流行なのかタイムライン風のフローチャートなどを、最近色々なサイトで見られます。
画像を使用すればあっという間に作る事が出来ますが、スタイルやJSを使ってとなると色々とややこしいですよね。
そこで今回はCSSやJSなどで簡単に作れるフローチャートをご紹介します。
きっとコーディングの参考になりますよ！
目次
SVGフローチャート
See the Pen SVG flowchart by Bill Kroger (@BillKroger) on CodePen.
マーメイドシーケンス図
See the Pen Mermaid Sequence Diagram by Antti Nyman (@atnyman) on CodePen.
シンプルなCSSフローチャート
See the Pen CSS FlowChart by Emil Devantie Brockdorff (@Mestika) on CodePen.
CSSレスポンシブフローチャート
See the Pen CSS Layout & SVG Practice by Gabriele Corti (@borntofrappe) on CodePen.
DSGN100 – E&P フローチャート
See the Pen DSGN100 – E&P Flowchart by Kwchang (@demonwhite) on CodePen.
リストタグを使用したツリービュー
See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen.
Bootstrap判定フローチャート
See the Pen Bootstrap Determination Flowchart by Melanie Sumner (@melsumner) on CodePen.
ブロックダイアグラム(家系図風)
See the Pen Menu parent children as a diagram… by François Lesenne (@francoislesenne) on CodePen.
横型ブロックダイアグラム(家系図風)
See the Pen CSS Horizontal Family Tree by Peiwen Lu (@P233) on CodePen.
