[css] LPデザインで使えるステップパターン #05「カラーパターン」

2023年4月18日

CSS

eyecatch 今回のステップサンプルは、色分けをした順番表示をする時に使えるデザインです。 パステル色の色相階調で順番に並べてもいいし、同系色のグラデーションで並べても、いいデザインになります。

ソースコード

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta charset='utf-8' /> <link rel='stylesheet' href='step.css' /> <style> body{ background-color:#ddd; } </style> <div class='step'> <ul class='color'> <li> <div class='num'></div> <div class='label'>Design</div> <div class='image'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M215 939q-33.835 0-66.917-11.5Q115 916 90 890q35-12 50-35t15-62q0-43.75 30.676-74.375Q216.353 688 260.176 688 304 688 334.5 718.625T365 793q0 64-43.5 105T215 939Zm0-60q35 0 62.5-25t27.5-61q0-20-12.5-32.5T260 748q-20 0-32.5 12.5T215 793q0 39-8.5 57.5T175 873q6 1 20 3.5t20 2.5Zm230-177-90-95 376-376q14-14 31-14.5t32 14.5l29 29q15 15 14.5 32.5T823 324L445 702Zm-185 91Z"/></svg></div> <div class='text'>新しいアイデアをデザイン(設計)する。</div> </li> <li> <div class='num'></div> <div class='label'>Develop</div> <div class='image'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M270 936q-78 0-134-56T80 746q0-67 39-117t101-66v63q-35 14-57.5 46.5T140 746q0 54 38 92t92 38q54 0 92-38t38-92v-30h249q8-9 19-14.5t22-5.5q21 0 35.5 14.5T740 746q0 20-14.5 35T690 796q-11 0-22-5.5T649 776H458q-14 69-66.5 114.5T270 936Zm420 0q-48 0-88.5-22T535 856h86q15 10 32.5 15t36.5 5q54 0 92-38t38-92q0-54-38-92t-92-38q-19 0-35 4.5T624 634L495 416q-20-4-32.5-17.5T450 366q0-21 15-35.5t35-14.5q21 0 35.5 14.5T550 366q0 4-.5 7.5T547 384l103 176q11-2 21.5-3t18.5-1q79 0 134.5 55.5T880 746q0 78-55.5 134T690 936ZM270 796q-20 0-35-15t-15-35q0-18 12.5-31.5T264 696l111-187q-30-29-47.5-65.5T310 366q0-79 56-134.5T500 176q76 0 131 52.5T690 356h-60q-3-51-40.5-85.5T500 236q-54 0-92 38t-38 92q0 42 24.5 75.5T457 489L316 727q2 6 3 10.5t1 8.5q0 20-14.5 35T270 796Z"/></svg></div> <div class='text'>デザインした設計どおりに、構築(開発)する。</div> </li> <li> <div class='num'></div> <div class='label'>Test</div> <div class='image'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M480 936q-65 0-121-31t-83-89H160v-60h92q-7-26-7-52.5V650h-86v-60h86q0-29 .5-57.5T254 476h-94v-60h120q14-28 37-49t51-35l-77-76 40-40 94 94q28-10 56.5-10t56.5 10l94-94 40 40-76 76q28 14 49.5 35.5T683 416h118v60h-95q9 28 8.5 56.5T714 590h87v60h-87q0 27 .5 53.5T708 756h93v60H685q-26 59-82.5 89.5T480 936Zm0-60q72 0 123-50.5T654 703V536q0-72-51-122.5T480 363q-72 0-123 50.5T306 536v167q0 72 51 122.5T480 876Zm-80-140h160v-60H400v60Zm0-173h160v-60H400v60Zm80 57h.5-.5.5-.5.5-.5.5-.5Z"/></svg></div> <div class='text'>構築できたら、テスト(検証)する。</div> </li> <li> <div class='num'></div> <div class='label'>Release</div> <div class='image'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="m180 746 270 156V593L180 437v309Zm330 156 270-156V436L510 593v309ZM213 387l267 155 266-155-266-154-267 154Zm-93 394V406q0-16 8-30t22-22l300-173q14-8 30-8t30 8l300 173q14 8 22 22t8 30v340q0 16-8 30t-22 22L510 971q-14 8-30 8t-30-8L120 781Zm360-205Z"/></svg></div> <div class='text'>問題が無いことが確認できたら、公開する。</div> </li> <li> <div class='num'></div> <div class='label'>Operation</div> <div class='image'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M520 466v-60h130V216h60v190h130v60H520Zm130 470V526h60v410h-60Zm-400 0V756H120v-60h320v60H310v180h-60Zm0-300V216h60v420h-60Z"/></svg></div> <div class='text'>定期的な運用を行い、集客を活性化を促す。</div> </li> <li> <div class='num'></div> <div class='label'>Refactoring</div> <div class='image'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M480 976q-75 0-140.5-28T225 871q-49-49-77-114.5T120 616h60q0 125 87.5 212.5T480 916q125 0 212.5-87.5T780 616q0-125-85-212.5T485 316h-23l73 73-41 42-147-147 147-147 41 41-78 78h23q75 0 140.5 28T735 361q49 49 77 114.5T840 616q0 75-28 140.5T735 871q-49 49-114.5 77T480 976Z"/></svg></div> <div class='text'>改善を行うことで、アップデートさせる。</div> </li> </ul> </div>

step.html

.step, .step *, .step *::before, .step *::after{ -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -o-box-sizing : border-box; -ms-box-sizing : border-box; box-sizing : border-box; } .step ul, .step li{ list-style:none; margin:0; padding:0; } .step{ --size-width : 800px; --color-1 : #ff7d81; --color-2 : #f19148; --color-3 : #ffcb00; --color-4 : #25af8f; --color-5 : #44c0bf; --color-6 : #aa89bd; width : var(--size-width); margin : 20px auto; } .step .color{ display : flex; gap : 10px; } .step .color > *{ flex : 1; background-color:white; } .step .color .label{ padding: 10px; text-align:center; font-weight:bold; } .step .color .image{ text-align:center; } .step .color .image > *{ width:48px; height:48px; } .step .color .text{ padding:10px; white-space:pre-wrap; word-break:break-all; font-size:0.9rem; } .color li:nth-child(1) .num{--color-bg:var(--color-1)} .color li:nth-child(2) .num{--color-bg:var(--color-2)} .color li:nth-child(3) .num{--color-bg:var(--color-3)} .color li:nth-child(4) .num{--color-bg:var(--color-4)} .color li:nth-child(5) .num{--color-bg:var(--color-5)} .color li:nth-child(6) .num{--color-bg:var(--color-6)} .color li:nth-child(1) .label{color:var(--color-1)} .color li:nth-child(2) .label{color:var(--color-2)} .color li:nth-child(3) .label{color:var(--color-3)} .color li:nth-child(4) .label{color:var(--color-4)} .color li:nth-child(5) .label{color:var(--color-5)} .color li:nth-child(6) .label{color:var(--color-6)} .color li:nth-child(1) .image{fill:var(--color-1)} .color li:nth-child(2) .image{fill:var(--color-2)} .color li:nth-child(3) .image{fill:var(--color-3)} .color li:nth-child(4) .image{fill:var(--color-4)} .color li:nth-child(5) .image{fill:var(--color-5)} .color li:nth-child(6) .image{fill:var(--color-6)} .color{ counter-reset :num 0; } .color li{ counter-increment : num; } .color li .num{ padding:10px 0; text-align:center; --size-tail : 15px; position:relative; background-color:var(--color-bg); margin: 0 0 var(--size-tail) 0; } .color li .num::before{ content : ''; display:block; position:absolute; top:100%; left:50%; transform:translate(-50% , 0); width: 0; height: 0; border-left : var(--size-tail) solid transparent; border-right : var(--size-tail) solid transparent; border-top : var(--size-tail)solid var(--color-bg); border-bottom : 0; } .color li .num::after{ content : 'STEP\A'counter(num); font-size : 1.4rem; white-space : pre-wrap; display:block; text-align:center; color:white; font-weight:bold; } @media (max-width:800px){ .step{ width:100%; } .step .color{ flex-direction : column; width: calc(100% - var(--size-arrow)); gap:10px; } .step .color li{ display:grid; grid-template-columns:30% 1fr; } .step .color li .num{ grid-column : 1/2; grid-row : 1/4; } .color li .num{ padding:10px; margin: 0 var(--size-tail) 0 0; } .color li .num::before{ left:100%; top:50%; transform:translate(0,-50%); border-top : var(--size-tail) solid transparent; border-bottom : var(--size-tail) solid transparent; border-left : var(--size-tail)solid var(--color-bg); border-right : 0; } .color li .num::after{ position:absolute; font-size:1.0rem; top:50%; left:50%; transform:translate(-50%,-50%); } .step .color .label{ font-size:0.9rem; } }

デモ

  • Design
    新しいアイデアをデザイン(設計)する。
  • Develop
    デザインした設計どおりに、構築(開発)する。
  • Test
    構築できたら、テスト(検証)する。
  • Release
    問題が無いことが確認できたら、公開する。
  • Operation
    定期的な運用を行い、集客を活性化を促す。
  • Refactoring
    改善を行うことで、アップデートさせる。

解説

枠内に説明文章まで入れ込んだサンプルにしていますが、できるだけ正方形にした方が見栄えが良くなります。 レスポンシブデザインで、2段階切り替えを行っていますが、中間で、2行にしてもいい効果が出ます。 ナンバリング部分のSTEP+番号の文字は、疑似要素で自動的にcssで出力して、シッポ部分も擬似要素で三角表記で行っています。 文字だけだと少しさみしくなるので、今回は、アイコン(画像)を追加していますが、色の統一感を出すために、svgを直接記述して、cssでfillでカラー指定しています。 ナンバリング箇所1つずつに色指定をする必要があるので、数が増えた時は適宜対応してください。

githubでソース取得

https://github.com/yugeta/step_pattern branch : 05_color $ git clone https://github.com/yugeta/step_pattern.git -b 05_color

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。