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

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

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

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

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

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

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

FontAwesomeを読み込む

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

Wordpressでご利用の場合は、テーマ内で既に実装されている場合があります。
例えば、当サイトでも使用しているテーマ「Cocoon」では、FontAwesome4.7が使用されていますので、読み込む必要はありません。

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でリストを生成する
  • 完成!
以上、cssのみでフローチャートデザインを作成、でした。

コメント

タイトルとURLをコピーしました