サービスの流れなどをページでデザインするときに、タテのフローチャートをCSSだけで作ってみたいなと思ったので、完成したものをここでシェアさせていただきます。ご自由にコピペしてお使いください。
CSSでフローチャート（タテ）を作成する方法
ボタンで表示を切り替えてご覧ください。
フローチャートのタイトルがあって、その下に説明文を入れる形式にしました。説明文を入れる代わりに画像を配置しても良いですね。
HTML
<ol> |
<li><h2>お問い合わせ・ご連絡</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
</li> |
<li><h2>ご面談・事前ヒアリング</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p></li> |
<li><h2>ご提案とお見積もり提示</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p></li> |
<li><h2>ご契約</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p></li> |
<ol> |
CSS
ol{ |
list-style: none; |
border-left: 2px dashed; |
padding-left: 0; |
} |
ol li{ |
margin-left: 2em; |
position: relative; |
} |
ol li h2{ |
margin-bottom: 0; |
} |
ol li p{ |
margin-top: .3em; |
} |
ol li:before{ |
content: ""; |
width: 10px; |
height: 10px; |
border-radius: 50%; |
background: #000; |
position: absolute; |
left: calc(-2em - 6px); |
top: .7em; |
} |
ol li:after{ |
content: ""; |
border-bottom: 1px solid; |
width: 1.5em; |
background: #000; |
position: absolute; |
top: 1em; |
left: -2em; |
} |
これは、ol要素で作成したものです。もしかしたら、リスト要素の中に見出しとパラグラフを入れるのはマークアップとして変かもしれないですね。普通にdiv要素で作成したい場合は、下記のようにしてください。
HTML
<div class="flowchart"> |
<h2>お問い合わせ・ご連絡</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
|
<h2>ご面談・事前ヒアリング</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
|
<h2>ご提案とお見積もり提示</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
|
<h2>ご契約</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
</div> |
CSS
.flowchart{ |
margin-left: .5em; |
border-left: 2px dashed; |
} |
.flowchart h2{ |
position: relative; |
margin-left: 2em; |
margin-bottom: 0; |
} |
.flowchart p{ |
margin-top: .3em; |
margin-left: 3em; |
} |
.flowchart h2:before{ |
content: ""; |
width: 10px; |
height: 10px; |
border-radius: 50%; |
background: #000; |
position: absolute; |
left: calc(-2em - 6px); |
top: .5em; |
} |
.flowchart h2:after{ |
content: ""; |
border-bottom: 1px solid; |
width: 1.5em; |
background: #000; |
position: absolute; |
top: .7em; |
left: -2em; |
} |
黒い丸のところをアイコンで表示させるという方法もあります。
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> |
<div class="flowchart"> |
<h2>お問い合わせ・ご連絡</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
|
<h2>ご面談・事前ヒアリング</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
|
<h2>ご提案とお見積もり提示</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
|
<h2>ご契約</h2> |
<p>説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文、説明文</p> |
</div> |
CSS
.flowchart{ |
margin-left: .5em; |
border-left: 2px dashed; |
} |
.flowchart h2{ |
position: relative; |
margin-left: 2em; |
margin-bottom: 0; |
} |
.flowchart p{ |
margin-top: .3em; |
margin-left: 3em; |
} |
.flowchart h2:before{ |
font-family: Font Awesome\ 5 Free; |
font-weight: 900; |
content: "\f358"; |
position: absolute; |
left: -2.5em; |
top: .2em; |
width: 1em; |
height: 1em; |
border-radius: .5em; |
background: #fff; |
} |
.flowchart h2:after{ |
content: ""; |
border-bottom: 1px solid; |
width: 1em; |
background: #000; |
position: absolute; |
top: .8em; |
left: -1.5em; |
} |
positionプロパティ、疑似要素、paddingやmarginなどの基本的な知識があれば、誰でも作成できるようになります。
ざっくり作成してあるので、貼り付けるページに効いているスタイルシートの仕様によって黒い丸の位置などがズレると思いますので、調製してみてください。
