CSSだけで『流れ』を綺麗にレスポンシブに表現したい
公開日：
最終更新日：
ワークフローや流れの説明をCSSで作る時、まだ画像で作っていませんか？
画像だと拡大縮小した時にボケるし、文字がどんどん小さくなっていって、潰れて読めなくなってしまいますよね。
そんな時に、CSSを使ってレスポンシブに表現する方法があります。
ワークフローにはリスト（ul, ol）を使おう
今回作るのは、以下のような画面幅が変わると、それに合わせて線が伸びるワークフローです。
上のサンプルでは、リスト（ol > li）に疑似要素を使って、実装しています。
ここから、各スタイルの部分で何をしているのか手順ごとに解説します。
手順１：リストのスタイルを消し、疑似要素を表示する
通常、リストには「list-style」が設定されていますから、これを消します。
ol {
list-style-type: none;
}そして、list-styleを消した後、olタグのカウンターをリセットして、疑似要素に番号を表示します。
ol {
counter-reset: item;
}
ol > li::before {
counter-increment: item;
content: counter(item);
}手順２：番号を修飾
手順１で疑似要素に番号を表示できるようになったら、番号を装飾します。
ol > li::before {
display: flex; // display: block;ではなく、flex;下のalign-itemsとjustify-contentで上下中央寄せにするため
width: 40px;
height: 40px;
align-items: center; // display: flex;の時、上下中央に配置
justify-content: center; // display: flex;の時、左右中央に配置
font-size: 22px;
font-weight: bold;
background: lightgray;
border-radius: 50%; // 50%で丸になる
}手順３：線を引く
今まで画像で「ワークフロー」を表現していた人は、画面幅によって行数が変わるので、線が切れてしまうじゃないかと考えているはずです。
しかし、li要素のborderを利用すれば、行数に応じて伸縮する線を引くことができます。
ol > li {
border-left: 1px solid black;
}手順４：番号の位置を整える
最後に番号の場所を整えます。
ol > li {
position: relative;
}
ol > li::before {
position: absolute;
top: 0px;
left: -20px;
}positionで場所を整えてあげてもいいですし
ol > li::before {
transform: translate(-53%, 0%);
}transformで移動させてもいいです。
注意点
ol > li:last-of-type {
border: none;
}リストの最後には線をつけませんが、単純にborder: none;をすると、最後の要素だけborder-width分位置がずれる可能性があります。
そこで、簡単な方法として色だけ透明する方法があります。
ol > li:last-of-type {
border-color: transparent;
}あとはそもそもbox-sizing: border-box;に設定しておけばずれないのかな？（未検証）
宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成（カルーセルやバリデーション等）など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
