フローチャートの書き方<覚書>
作業の流れや、お申し込みまでの流れ等、フローを作成する時のHTMLとCSS。
この記事の目次
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;
}
こんなフローです
-
1.お問い合わせ
問い合わせフォームに必要事項を書いて送信ください。 -
2.お見積もり
3日以内にお見積もりををメールにて送信いたします。 -
3.ご契約&ご入金
ご契約後、期日までに契約金額の50%を指定銀行へお振込お願いします。 -
4.製作開始
打ち合わせの内容に基づき製作を開始いたします。 -
5.完成&ご入金
完成後、お客様にご確認いただきます。その後残りの50%をお振込お願いします。
投稿者プロフィール

-
ブログ集客プロデューサー/ライター/コラムニスト
読者(消費者)との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。
これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。
講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。
最新の投稿
ブログ2019.07.03お泊まりご飯会に参加して得られたこと
ブログ2019.06.08はじまりはいつもプロフィール
ブログ2019.05.26薫風自南来〜美しい女性を目指して月一お稽古〜
ブログ2019.05.19やばいご飯