LPで定番のステップパターンの「プロセス・カード」を紹介します。
ソースコード
process.html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset='utf-8' />
<link rel='stylesheet' href='process.css' />
<style>
body{
background-color:#ddd;
}
</style>
<div class='step-process'>
<ul>
<li>
<div class='num'></div>
<div class='title'>Design</div>
<div class='text'>新しいアイデアをデザイン（設計）する。</div>
</li>
<li>
<div class='num'></div>
<div class='title'>Develop</div>
<div class='text'>デザインした設計どおりに、構築（開発）する。</div>
</li>
<li>
<div class='num'></div>
<div class='title'>Test</div>
<div class='text'>構築できたら、テスト（検証）する。</div>
</li>
<li>
<div class='num'></div>
<div class='title'>Release</div>
<div class='text'>問題が無いことが確認できたら、公開する。</div>
</li>
</ul>
</div>
process.css
.step-process,
.step-process *,
.step-process *::before,
.step-process *::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-process ul,
.step-process li{
list-style:none;
margin:0;
padding:0;
}
.step-process > ul{
width:100%;
display:flex;
flex-flow: row;
gap:10px;
justify-content:space-between;
align-items:flex-start;
align-items:stretch;
}
.step-process > ul > *{
flex: 1;
background-color:white;
padding:10px;
position:relative;
padding:40px 20px 20px;
}
.step-process > ul > * .num{
position:absolute;
top:0;
left:0;
background-color:black;
color:white;
padding:2px 20px;
}
.step-process{
counter-reset :num 0;
}
.step-process > ul > *{
counter-increment : num;
}
.step-process > ul > * .num::before{
content : 'step 'counter(num);
font-size : var(--size-num);
line-height : var(--size-num);
font-family : "Ibarra Real Nova", serif;
}
.step-process > ul > * .title{
font-weight:bold;
font-style:italic;
line-height:3.0rem;
font-size:1.5rem;
border-bottom:1px solid #aaa;
width:100%;
margin:0 auto 30px;
}
@media(max-width:600px){
.step-process > ul{
flex-flow:column;
}
.step-process > ul > *{
width:100%;
}
}
表示デモ
-
Design
新しいアイデアをデザイン（設計）する。
-
Develop
デザインした設計どおりに、構築（開発）する。
-
Test
構築できたら、テスト（検証）する。
-
Release
問題が無いことが確認できたら、公開する。
解説
PC表示の際の横並びで、flexアイテムの高さをすべて揃えるために、以下の記述をしています。
display: flex;
align-items: stretch;
あと、すべてのカードの横幅を同じにするためには、次のコードが必要でした。
justify-content:space-between;
600px以下の画面サイズ（スマホなど）の表示では、見た目を揃えるのは簡単ですが、横並びflexの場合は、上記の設定をしないと、ガタガタの見栄えになってしまいます。
あと、フォントも、ゴシック、明朝、太字、細字、サイズなどをバラバラにしてバランスを調整してやることで、安定したプロセスカード表示になります。
色は統一感が出たほうがいいので、あまりたくさんの色は使わないほうが効果的ですね。
そして、stepの数値は、いつものように、css-counterを使って自動採番にしているので、安心してカードの入れ替えや追加など行えるようにしています。
Databaseなどと連動して動的なカード表示をする場合にも効果的ですね。
githubでソース取得
https://github.com/yugeta/step_pattern
branch : 02_card
$ git clone https://github.com/yugeta/step_pattern.git -b 03_card
