フローチャートの書き方＜覚書＞

投稿日：2019年3月21日

作業の流れや、お申し込みまでの流れ等、フローを作成する時のHTMLとCSS。

この記事の目次

1 HTML
2 CSS
3 こんなフローです

HTML

<ul class="flow_list">
<li>
<h4>1.お問い合わせ</h4>
問い合わせフォームに必要事項を書いて送信ください。</li>
<li>
<h4>2.お見積もり</h4>
3日以内にお見積もりををメールにて送信いたします。</li>
<li>
<h4>3.ご契約＆ご入金</h4>
ご契約後、期日までに契約金額の50%を指定銀行へお振込お願いします。</li>
<li>
<h4>4.製作開始</h4>
打ち合わせの内容に基づき製作を開始いたします。</li>
<li class="last">
<h4>5.完成＆ご入金</h4>
完成後、お客様にご確認いただきます。その後残りの50%をお振込お願いします。</li>
</ul>

CSS

ul.flow_list{
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.flow_list li{
    border: 5px solid #ccc;
    border-radius: 10px;
    margin-bottom: 35px;
    padding: 4px 10px;
    position: relative;
}
ul.flow_list li::after{bottom: -40px;
    color:#ccc;
    content: "▼";
    font-size: 24px !important;
    left: 48%;
    position: absolute;}
ul.flow_list li.last::after{/*最後の▼を外す*/
    content: "";
}
ul.flow_list li h4::first-letter{/*1文字めを大きく*/
    font-family: garamond,times;
    font-size: 2rem;
    font-style: italic;
    letter-spacing: 0.15em;
}