CSSフロー図とは？手順やステップを画像なしで図にする
申し込みの流れや作業の手順を「1 → 2 → 3」と並べて見せる図を、画像ではなく HTML と CSS で作るツールです。文字がそのまま文字として残るので、あとから文言を直しやすく、検索エンジンにも内容が伝わります。 ステップの数（2〜30）、横並び・縦並び、丸・四角・角丸・矢印形の形、中身（数字・文字・アイコン・矢印）、つなぐ線の種類、ラベルと補足説明を選ぶと、プレビューを見ながら HTML と CSS ができあがります。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 図の形を決める。プリセット（10種）から近いものを選び、ステップの数・向き・形・色・線を調整します。
- HTML と CSS をコピーする。「HTML Code」と「CSS Code」の Copy ボタンを押し、自分のページに貼り付けます。HTML は
<div class="flowchart">の形で出力されます。 - 文言を書き換える。貼り付けた HTML の
flow-label（ラベル）や補足説明の文字を、自分の手順に合わせて直します。画像として使いたいときは「画像保存」で PNG・WebP・SVG に書き出せます。
CSS の先頭には、見出しの書体（Noto Sans JP）を読み込む @import が入っています。中身をアイコンにしたときは、HTML の先頭に Font Awesome を読み込む <link> も入ります。
ブラウザ対応
| ブラウザ | ステップの間隔（flex の gap）に対応したバージョン |
矢印形（clip-path: polygon()）に対応したバージョン |
|---|---|---|
| Chrome・Edge | Chrome 84 以降・Edge 84 以降 | Chrome 23 以降・Edge 79 以降 |
| Safari（Mac・iPhone） | Mac 14.1 以降・iPhone 14.5 以降 | 7 以降 |
| Firefox | 63 以降 | 54 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。いま使われている主なブラウザはすべて対応しています。
よくある質問 (FAQ)
アイコンを表示する Font Awesome が読み込まれていないことがほとんどです。中身をアイコンにすると、出力される HTML の先頭に Font Awesome 6.4.0 を読み込む
<link> が入ります。この行ごと貼り付けてください。すでにサイト全体で Font Awesome を読み込んでいる場合は、この行を消してもかまいません。
CSS の先頭で、選んだ書体を読み込んでいるためです。サイトの書体に合わせたいときは、CSS の先頭の
@import の行を消し、.flowchart の font-family をサイトで使っている書体に書き換えてください。
横並びの図は、ステップが1列に並ぶので、数が多いと画面の幅に収まりません。出力される CSS は折り返さない作りです。スマホで読まれるページでは向きを「縦」にするか、ステップの数を減らすか、線の長さ（間隔）を短くしてください。
できます。「画像保存」で PNG・WebP・SVG のいずれかに書き出せます。大きさは 1x・2x・4x から選べるので、資料やスライドに貼るときは 2x 以上がきれいです。