ブログ

フローチャートの書き方<覚書>

投稿日:

作業の流れや、お申し込みまでの流れ等、フローを作成する時の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年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。


これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。


講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。


▶︎詳しいプロフィールはこちらから

この記事が気に入ったら
いいね ! しよう

Twitter で

-ブログ

Copyright© 7stars725.com , 2019 All Rights Reserved.