cssのみでフローチャートデザインを作成

2019年9月24日

cssのみでフローチャートリストを作成し、ユーザーに手順を説明するデザインをリストタグ(ul,liタグ)を使用して作成しました。

cssで作るフローチャートデザインとは

• 簡単に言えば
• こんな風に
• 項目ごとにブロック分けして
• 流れを分かりやすくする
• デザインのことです

↑このデザインの作り方を解説します。

フローチャートデザインの導入方法

次にフローチャートデザインの導入方法を解説します。

FontAwesomeを読み込む

リストの間で使われている矢印→を使用するために、各種アイコンを導入できる「FontAwesome」を読み込む必要があります。

FontAwesome5を使用する場合

最新バージョンのFontAwesomeを使用する場合は、以下のコードをheadタグ内にコピーしてください。

FontAwesome4.7を使用する場合

最新バージョンより軽い、過去バージョンの4.7のFontAwesomeを使用する場合は、以下のコードをheadタグ内にコピーしてください。

cssを追記する

デザインを適用するため、下記のcssを追記してください。

ul.arrowlist{
    list-style: none;
    padding: 0 10px 15px 10px;
    margin: 15px 0;
    border: 2px solid #e8e8e8; /* 外枠ボーダー 好みに合わせて */
    background-color: #e8fcf3; /* 背景色 好みに合わせて */
}
ul.arrowlist:before{
    content: attr(data-title)"";
    display: block;
    padding: 10px;
    margin: 0 -10px 15px -10px;
    background-color: #e8e8e8; /* タイトル背景色 好みに合わせて */
    text-align: center;
    font-weight: bold;
}
ul.arrowlist li{
    display: table;
    margin: 0 auto;
    display: table;
    position: relative;
    box-sizing: border-box;
    padding: 10px 20px;
    border: 2px solid #e8e8e8; /* ブロックボーダー 好みに合わせて */
    background-color: #FFF;
    border-radius: 10px;
    text-align: center;
}
ul.arrowlist li:not(:last-child){
    margin-bottom: 30px;
}
ul.arrowlist li:not(:last-child):after{
    content: "\f078";
    font-family: FontAwesome;
    /* FontAwesome5を使用する場合はこっちに置き換えてください */
    /* font-family: "Font Awesome 5 Free"; */
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    display: block;
    text-align: center;
    color: #37AB9D; /* 矢印の色 好みに合わせて */
}

FontAwesome4.7とFontAwesome5それぞれで指定するfont-familyが異なるので、使い分けてください。

WordPressで使用する場合

WordPressで使用する場合は以下の流れで実装してください。

• ダッシュボード（管理画面）を開く
• 外観→テーマエディターをクリック
• 「style.css」にcssを追記する
• 下の「ファイルを更新」ボタンをクリック

HTMLでulとliを記述する

<ul class="arrowlist" data-title="フローチャートデザインの作り方">
    <li>FontAwesomeを読み込む</li>
    <li>CSSでデザインを書く</li>
    <li>HTMLでリストを生成する</li>
    <li>完成！</li>
</ul>

data-titleの部分に、フローチャートの上に表示されるタイトルを書き込んでください。

結果が以下のようになっていれば成功です。

• FontAwesomeを読み込む
• CSSでデザインを書く
• HTMLでリストを生成する
• 完成！