ホームページなどでは、完結に物事を説明する時に、ステップパターンを使って解説するのが効果的です。
中でも、サークルを基本としたステップパターンは、同じ構成でいろいろなデザインに合わせやすいです。
そんなデザインを簡単にコピペで実装できる用に、ソースコードを掲載しておきたいと思います。
ソースコード
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);
}
}
表示サンプル
-
新しいアイデアをデザイン（設計）する。
-
デザインした設計どおりに、構築（開発）する。
-
構築できたら、テスト（検証）する。
-
問題が無いことが確認できたら、公開する。
解説
サンプルでは項目を4個にしてありますが、サイズを変更すれば何個でも登録できます。
※あまり多すぎると破綻してしまいますが・・・
WEBサイトでのステップ表示は、３〜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
0 件のコメント:
コメントを投稿