[css] LPデザインで使えるステップパターン #04「ペンタゴン・アロー・プロセス」

2023年4月11日

CSS

eyecatch LPデザイン以外でもプレゼンテーション資料としてもよく使われている、ペンタゴン・アロー型のステップパターンを紹介します。

ソースコード

index.html

<div class='step'> <ul class='pentagon'> <li> <div class='arrow'>Design</div> <div class='text'>新しいアイデアをデザイン(設計)する。</div> </li> <li> <div class='arrow'>Develop</div> <div class='text'>デザインした設計どおりに、構築(開発)する。</div> </li> <li> <div class='arrow'>Test</div> <div class='text'>構築できたら、テスト(検証)する。</div> </li> <li> <div class='arrow'>Release</div> <div class='text'>問題が無いことが確認できたら、公開する。</div> </li> </ul> </div>

pentagon.css

.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 : 600px; --size-height : 80px; --size-arrow : 30px; --size-gap : 10px; --color-bg : #417a6e; width : var(--size-width); margin : 20px auto; } .step .pentagon{ display:flex; gap:calc(var(--size-arrow) + var(--size-gap)); width:calc(100% - var(--size-arrow) * 2); margin:0 auto; } .step .pentagon > *{ flex: 1; } .step .pentagon > * .arrow{ background-color: var(--color-bg); position:relative; height:var(--size-height); color:white; text-align:center; padding:10px 0; display:flex; align-items:center; justify-content:center; } .step .pentagon > * .arrow > *{ white-space:normal; word-break:break-all; } .step .pentagon > *:first-child .arrow::before{ content:''; position:absolute; left:calc(var(--size-arrow) * -1); top:0; height:100%; width:var(--size-arrow); background-color:var(--color-bg); } .step .pentagon > *:not(:first-child) .arrow::before{ content:''; position:absolute; left:calc(var(--size-arrow) * -1); top:0; background-color:transparent; z-index:-1; width: 0px; height: 0px; border-style: solid; border-width: calc(var(--size-height) / 2) var(--size-arrow) calc(var(--size-height) / 2) var(--size-arrow); border-color: var(--color-bg) var(--color-bg) var(--color-bg) transparent; } .step .pentagon > * .arrow::after{ content:''; position:absolute; left:100%; top:0; background-color:transparent; z-index:1; width: 0px; height: 0px; border-style: solid; border-width: calc(var(--size-height) / 2) var(--size-arrow) calc(var(--size-height) / 2) var(--size-arrow); border-color: transparent transparent transparent var(--color-bg); } .step .pentagon > * .text{ display:flex; gap:var(--size-gap); width:calc(100% + var(--size-arrow) * 1.1); margin-left:calc(var(--size-arrow) * -0.8); padding:10px 0; } .step .pentagon > * .text > *{ padding:10px; flex: 1; } @media (max-width:700px){ .step{ width:100%; } .step .pentagon{ flex-direction : column; width: calc(100% - var(--size-arrow)); gap:var(--size-gap); } .step .pentagon > *{ width:100%; } .step .pentagon > * .arrow{ width:calc(100% - var(--size-arrow)); max-width:250px; } .step .pentagon > * .text{ width:calc(100% - var(--size-arrow)); margin:var(--size-gap) auto 0; } .step .pentagon > * .arrow::before{ content:none!important; } }

デモ

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

解説

5角形の矢印なので、ペンタゴン・アロー・プロセスという名前なんですね。 レスポンシブの状態は、今回は縦並びにしているだけなんですが、高さを短くした方がデザイン的にいいかもしれませんね。 PC表示の時の矢印部分は、疑似要素のbeforeとafterを駆使して、三角形を書く技で対応しています。 ちょっとした技としては、こうしたプログレス表示の場合、それぞれの項目で横幅を統一するのがポイントなので、 flex:1;というのを、横並び項目につけています。 ※これ、他の場合でも使えるので、知らなかった人は覚えておきましょう。 flex-grow:1;と言うふうに解説されている場合もありますが、flex:1;の方が扱いやすいでしょう。

githubでソース取得

https://github.com/yugeta/step_pattern branch : 04_pentagon $ git clone https://github.com/yugeta/step_pattern.git -b 04_pentagon

このブログを検索

ごあいさつ

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