コピペで使えるフローチャートデザイン

カスタマイズ HTML, CSS, JavaScript

2023/01/12

2023/01/12 0

vanillaice (Akira)

HTML LivingStandard Tips

作業工程(flow chart, ふろーちゃーと)などを視覚的にわかりやすくするデザイン提案です。

はじめに

縦型
長文に耐えうるもの

横フローははみ出したりなど調整が難しくなることがありますので、縦配置に絞りました。また、各ステップの文章量が多くなる可能性を想定し、長文でわかりづらくなるデザインも省きました。

htmlは共通です。CSSはデザイン別です。テンプレートのスタイルシート最終に記載します。

複数導入する方は自己責任でクラス名を変更してご利用ください。

目次へ戻る↑

共通html

記事を書く際は HTML編集に切り替えてください。

旧投稿画面をご利用の方は、改行の扱いを HTMLタグのみに変更する必要があります。

<!-- フローチャート -->
<ol class="flowchart">
  <!-- 工程を増やすにはここから複製 -->
  <li>
    <div class="flowchart-content">
      <div class="flowchart-title">タイトル</div>
      <p>文章</p>
    </div>
  </li>
  <!-- 工程を増やすにはここまで複製 (この直下(下の行)にペースト, インデントに全角スペースを利用しないよう注意) -->
</ol>
<!-- フローチャートここまで -->

デザインによってはラッパーを減らすことができますが、共通化するために上記の形としました。

以降のサンプルはstep2のみ p要素を2つ利用しています。文章は必ずしもp要素でマークアップする必要はありませんが、できるだけ雛形に近いかたちにしておくと混乱しなくて済むかと思います。

雛形の保存は以下の記事を参考に。

コメントを付けていますが不要ならば削除してください。FC2ブログではソースコードのインデントに全角スペースを利用してしまう方がとても多いです。インデントは必ず半角スペースで行うよう注意してください。インデントもコメント同様、不要ならば取り除いても構いません。

目次へ戻る↑

CSS

テンプレートで既に調整されていそうな内容には上書きできるよう !important を付けてありますが必ずしも必要とは限りません。また逆に、指定が効かない部位にはこの方法(important指定)が有効なこともあります。

カスタマイズの際に作業が煩雑にならないよう calc function や custom properties などを利用しています。

シンプル

基本設計

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
実施設計

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
見積もり

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSSソースコードを見る

:root {
  --flowchart-size: 30px;/* 番号のサイズ 変更可 */
  --flowchart-border: 5px;/* 縦線太さ 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  margin: 1em 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 2em calc(var(--flowchart-size) + 6px);/* 6px がタイトルとの距離であり余白 */
}

/* 番号部位デザイン */
.flowchart li::before {
  content: counter(flownum);
  counter-increment: flownum;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5px;/* 通常は 0, 横に並ぶタイトルとのバランスを見て調整 */
  left: 0;
  z-index: 2;
  width: var(--flowchart-size);
  height: var(--flowchart-size);
  border-radius: 50%;/* 番号円形, 四角形で良ければこの一行削除 */
  background: rgb(44,182,150);/* 番号背景 */
  color: white;/* 番号文字色 */
}

/* 縦線部位デザイン */
.flowchart li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--flowchart-size) / 2 - calc(var(--flowchart-border) / 2));
  z-index: 1;
  width: var(--flowchart-border);
  height: 100%;
  background: rgb(200,200,200);/* 線の色 */
}

/* 工程タイトル */
.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.4;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}

/* 最終工程の縦線が必要な方ここから削除 */
.flowchart li:last-of-type::after {
  content: none;
}
/* 最終工程の縦線が必要な方ここまで削除 */

/* p要素を利用した場合の調整 */
.flowchart li p {
  margin: 1em 0 !important;
}
.flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}

控えめ

* ドットの色を交互にしてあります(奇数は塗りつぶし, 偶数は中貫き)

基本設計

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
実施設計

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
見積もり

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSSソースコードを見る

:root {
  --flowchart-border: 4px;/* 縦線太さ 変更可 */
  --flowchart-dot-size: 14px;/* ドット大きさ 変更可 */
  --flowchart-dot-color: rgb(255,108,114);/* ドットの色 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  margin: 1em 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 0 calc(var(--flowchart-dot-size) + 20px);
}
.flowchart-content {
  position: relative;
  padding: 0 0 2em;
}

/* 縦線デザイン */
.flowchart-content::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(calc(calc(var(--flowchart-dot-size) / 2) + calc(var(--flowchart-border) / 2) + 20px) * -1);
  width: 4px;
  height: 100%;
  background: rgb(200,200,200);
}

/* 最終工程の縦線が必要な方ここから削除 */
.flowchart li:last-of-type .flowchart-content::before {
  content: none;
}
/* 最終工程の縦線が必要な方ここまで削除 */

/* 番号部位デザイン */
.flowchart li::before {
  content: "STEP " counter(flownum);
  counter-increment: flownum;
  color: white;/* 番号文字色 */
  color: rgb(150,150,150);/* STEP文字色 */
  font-weight: 700;
  font-size: 13px;/* STEPフォントサイズ */
  line-height: 1.3;
}

/* ドットデザイン */
.flowchart li::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;/* 通常は 0, STEPの文字とのバランスを見て調整 */
  left: 0;
  width: var(--flowchart-dot-size);
  height: var(--flowchart-dot-size);
  border-radius: 50%;
  border: 2px solid var(--flowchart-dot-color);/* 円の色 */
}
.flowchart li:nth-of-type(odd)::after {
  background: var(--flowchart-dot-color);
}

/* 工程タイトル */
.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.4;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}

/* p要素を利用した場合の調整 */
.flowchart li p {
  margin: 1em 0 !important;
}
.flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}

ちょっと複雑

* このデザインでは最終工程横にも縦線が付きます。

基本設計

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
実施設計

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
見積もり

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSSソースコードを見る


:root {
  --flowchart-size: 34px;/* 番号大きさ 変更可 */
  --flowchart-border: 16px;/* 縦線太さ 変更可(12px以上) */
  --flowchart-gradient: linear-gradient(to right, rgb(171,236,214) 0%, rgb(251,237,150) 100%);/* 番号背景 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  position: relative;
  margin: 1em 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 0 calc(var(--flowchart-size) + var(--flowchart-border) + 8px + 30px);
}
.flowchart-content {
  position: relative;
  padding: 0 0 2em;
}

/* 縦線デザイン */
.flowchart::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(var(--flowchart-size) + 8px);
  width: var(--flowchart-border);
  height: calc(100% + 6px);
  background: rgb(230,230,230);
  border-radius: 30px;/* 縦線角の丸み, 不要ならこの一行削除 */
}

/* 番号部位デザイン */
.flowchart li::before {
  content: counter(flownum);
  counter-increment: flownum;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -.5em;/* 通常は 0, 横に並ぶタイトルとのバランスを見て調整 */
  left: 0;
  z-index: 2;
  width: var(--flowchart-size);
  height: var(--flowchart-size);
  border-radius: 50%;/* 番号円形, 四角形で良ければこの一行削除 */
  background: var(--flowchart-gradient);
  color: rgb(51,51,51);/* 番号文字色 */
}

/* ドットデザイン */
.flowchart li::after {
  content: "";
  display: block;
  position: absolute;
  top: .2em;/* 破線とのバランスを見て適宜調整 */
  left: calc(var(--flowchart-size) + 8px + 2px);
  width: calc(var(--flowchart-border) - 4px);
  height: calc(var(--flowchart-border) - 4px);
  border-radius: 50%;
  background: rgb(85,171,197);/* ドットの色 */
}

/* 工程タイトル */
.flowchart-title {
  position: relative;
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.4;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}

/* タイトル横破線 デザイン */
.flowchart-title::before {
  content: "";
  display: block;
  position: absolute;
  top: .5em;
  left: calc(calc(calc(var(--flowchart-border) / 2) + 30px) * -1);
  width: 28px;
  border-top: 1px dashed rgb(150,150,150);/* 破線の太さと色 */
}

/* p要素を利用した場合の調整 */
.flowchart li p {
  margin: 1em 0 !important;
}
.flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}

目次へ戻る↑

まとめ

プロダクト系ブログで大まかな流れを説明しておきたいときなどに便利ではないかな、と思います。注意点としては、番号を大きくしすぎたり番号横余白を大きく取りすぎるなど、説明の左横の領域が多すぎるとスマートフォンで説明が見づらくなる可能性がありますのでほどほどに。

Comments 0

コメントに関する注意事項

テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
FC2共有テンプレート一覧ご質問の前に
専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)

管理者にだけ表示を許可する