Webサイトで有効なステップパターンは、ナンバリング装飾がポイントになります。
リボン方式は、多様するとくどくなるのですが、番号表示の装飾としては、非常に有効です。
色味を変更することで、印象もガラッと変わるので、使い所は無限大です。
ソースコード
index.html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset='utf-8' />
<link rel='stylesheet' href='ribbon.css' />
<ul class='step-lists'>
<li>
<div class='ribbon'>
<div class='num'>Step</div>
</div>
<div class='title'>Design</div>
<div class='text'>新しいアイデアをデザイン（設計）する。</div>
</li>
<li>
<div class='ribbon'>
<div class='num'>Step</div>
</div>
<div class='title'>Develop</div>
<div class='text'>デザインした設計どおりに、構築（開発）する。</div>
</li>
<li>
<div class='ribbon'>
<div class='num'>Step</div>
</div>
<div class='title'>Test</div>
<div class='text'>構築できたら、テスト（検証）する。</div>
</li>
<li>
<div class='ribbon'>
<div class='num'>Step</div>
</div>
<div class='title'>Release</div>
<div class='text'>問題が無いことが確認できたら、公開する。</div>
</li>
</ul>
ribbon.css
:root{
--color-1:#eee3d3;
--color-2:#33c4cf;
--color-3:#579e9c;
--size-ribbon-margin : 120px;
--size-width : 70px;
--size-over : 15px;
}
.step-lists,
.step-lists *,
.step-lists *::before,
.step-lists *::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;
}
ul.step-lists,
.step-lists li{
list-style : none;
margin:0;
padding:0;
}
ul.step-lists{
width : 500px;
margin:20px auto;
}
@media(max-width : 600px){
ul.step-lists{
width:90%;
max-width:500px;
}
}
ul.step-lists > li{
width : 100%;
margin : 30px 0;
padding:10px 10px 30px var(--size-ribbon-margin);
background-color: var(--color-1);
position:relative;
}
.step-lists .title{
color:var(--color-2);
font-weight:bold;
font-size:1.5rem;
margin-bottom:20px;
}
/* Ribbon */
.step-lists .ribbon{
position:absolute;
top:0px;
left : calc((var(--size-ribbon-margin) - var(--size-width)) / 2);
transform:translate(0% , calc(var(--size-over) * -1));
background-color: var(--color-2);
width: var(--size-width);
padding:10px 10px 0 10px;
color:white;
}
.step-lists .ribbon::before{
content:'';
position:absolute;
top:100%;
left:0;
width: 0;
height: 0;
border-left: calc(var(--size-width) / 2) solid transparent;
border-right: calc(var(--size-width) / 2) solid transparent;
border-top: calc(var(--size-width) * 0.3) solid var(--color-2);
}
.step-lists .ribbon::after{
content:'';
position:absolute;
top:0;
left:100%;
width: 0;
height: 0;
border-left: calc(var(--size-over) * 0.7) solid transparent;
border-right: calc(var(--size-over) * 0.7) solid transparent;
border-top: calc(var(--size-over) * 0.7) solid var(--color-3);
transform:rotate(45deg);
transform-origin:top left;
}
/* Ribbon >> */
/* Num */
.step-lists{
counter-reset :num 0;
}
.step-lists > li{
counter-increment : num;
}
.step-lists .num{
display:block;
text-align:center;
font-size:1.2rem;
font-style:italic;
}
.step-lists .num::after{
content : counter(num);
display:block;
text-align:center;
font-size:30px;
font-weight:bold;
font-style:normal;
}
/* Num >> */
表示サンプル
-
Design
新しいアイデアをデザイン（設計）する。
-
Develop
デザインした設計どおりに、構築（開発）する。
-
Test
構築できたら、テスト（検証）する。
-
Release
問題が無いことが確認できたら、公開する。
解説
:rootのプロパティ変数に色やサイズの変更ポイントを詰め込んでいます。
--color-1 : 台座の背景色
--color-2 : リボンの基本色
--color-3 : リボンの壁色
--size-ribbon-margin : リボンが入る左領域のサイズ
--size-width : リボンの横幅
--size-over : リボンの上部にはみ出るサイズ
その他の箇所は、自動的に計算するようにcalcを仕込んであります。
文字などのサイズや色については、cssをイジってください。
githubでソース取得
https://github.com/yugeta/step_pattern
branch : 02_ribbon
$ git clone https://github.com/yugeta/step_pattern.git -b 02_ribbon
