[css] LPデザインで使えるステップパターン #01「丸型採番」

2023年4月2日

CSS

eyecatch ホームページなどでは、完結に物事を説明する時に、ステップパターンを使って解説するのが効果的です。 中でも、サークルを基本としたステップパターンは、同じ構成でいろいろなデザインに合わせやすいです。 そんなデザインを簡単にコピペで実装できる用に、ソースコードを掲載しておきたいと思います。

ソースコード

sample.html

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta charset='utf-8' /> <link rel='stylesheet' href='style.css' /> <style> body{ background-color:#ddd; } </style> <ul class='step-word'> <li> <div class='circle'> <div class='num'></div> <div>Design</div> </div> <div class='text'>新しいアイデアをデザイン(設計)する。</div> </li> <li> <div class='circle'> <div class='num'></div> <div>Develop</div> </div> <div class='text'>デザインした設計どおりに、構築(開発)する。</div> </li> <li> <div class='circle'> <div class='num'></div> <div>Test</div> </div> <div class='text'>構築できたら、テスト(検証)する。</div> </li> <li> <div class='circle'> <div class='num'></div> <div>Release</div> </div> <div class='text'>問題が無いことが確認できたら、公開する。</div> </li> </ul>

style.css

html,body{ padding:0; margin:0; } .step-word, .step-word *, .step-word *::before, .step-word *::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-word, .step-word li{ list-style : none; margin : 0; padding : 0; } .step-word{ --size-circle : 150px; --size-gap : 30px; --size-num : 40px; width : 100%; max-width : 1000px; margin : 20px auto; padding : var(--size-gap); border : 1px solid black; display : flex; gap : var(--size-gap); background-color : #CCC; z-index : 0; position : relative; -webkit-align-items : center; align-items : center; -webkit-justify-content : space-between; justify-content : space-between; } .step-word li{ display : flex; width : 100%; } .step-word li .circle{ padding : 10px; width : var(--size-circle); height : var(--size-circle); text-align : center; position : relative; display : flex; flex-direction : column; -webkit-align-items : center; align-items : center; -webkit-justify-content : center; justify-content : center; } .step-word li .circle::before{ content : ''; width : var(--size-circle); height : var(--size-circle); border : 1px solid black; position : absolute; top : 0; left : 0; z-index : -1; border-radius : 50%; background-color : white; } .step-word{ counter-reset :num 0; } .step-word > li{ counter-increment : num; } .step-word > li .num::before{ content : counter(num , decimal-leading-zero); font-size : var(--size-num); line-height : var(--size-num); font-family : "Ibarra Real Nova", serif; font-weight: bold; font-style: italic; } @media(max-width : 768px){ .step-word{ --size-circle : 120px; --size-gap : 20px; --size-num : 30px; flex-direction : column; -webkit-justify-content : flex-start; justify-content : flex-start; } .step-word::before{ content : ''; position : absolute; width : 1px; height : calc(100% - (var(--size-gap) * 2)); left : calc(var(--size-gap) + (var(--size-circle) / 2)); top : var(--size-gap); z-index : -2; background-color : black; transform : translate(-50%,0); } .step-word li{ flex-direction : row; align-items : center; } .step-word li .text{ width : calc(100% - (var(--size-gap) * 2) - var(--size-circle)); margin-left:var(--size-gap); } } @media(min-width : 769px){ .step-word{ flex-direction : row; align-items:flex-start; } .step-word::before{ content : ''; position : absolute; height : 1px; width : calc(100% - (var(--size-gap) * 2)); top : calc(var(--size-gap) + (var(--size-circle) / 2)); left : var(--size-gap); z-index : -2; background-color : black; transform : translate(0,-50%); } .step-word li{ flex-direction : column; width : var(--size-circle); } .step-word li .text{ width:100%; margin-top:var(--size-gap); } }

表示サンプル

  • Design
    新しいアイデアをデザイン(設計)する。
  • Develop
    デザインした設計どおりに、構築(開発)する。
  • Test
    構築できたら、テスト(検証)する。
  • Release
    問題が無いことが確認できたら、公開する。

解説

サンプルでは項目を4個にしてありますが、サイズを変更すれば何個でも登録できます。 ※あまり多すぎると破綻してしまいますが・・・ WEBサイトでのステップ表示は、3〜4個ぐらいが適当だから、そのままコピペしてお使いいただけます。 一応、レスポンシブデザインにも対応させてあるので、画面サイズを変更して、小さめの画面になると、項目が縦並びになるようにしています。 ※スマホでご覧になっている方は、PC表示にすると、横並びの表示で見ることができます。 数値表示は、cssのカウンター表示にしているので、自動で採番される仕様です。 適度に背景に画像などを入れてみるても安定した見栄えになると思います。 色味やサイズなどを変更して、適宜ご使用ください。

githubでソース取得

https://github.com/yugeta/step_pattern branch : 01_circle $ git clone https://github.com/yugeta/step_pattern.git -b 01_circle_step

このブログを検索

ごあいさつ

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