今回のステップサンプルは、色分けをした順番表示をする時に使えるデザインです。
パステル色の色相階調で順番に並べてもいいし、同系色のグラデーションで並べても、いいデザインになります。
ソースコード
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でカラー指定しています。
ナンバリング箇所１つずつに色指定をする必要があるので、数が増えた時は適宜対応してください。
githubでソース取得
https://github.com/yugeta/step_pattern
branch : 05_color
$ git clone https://github.com/yugeta/step_pattern.git -b 05_color
0 件のコメント:
コメントを投稿