CSSで作るフロー・ステップ 【縦バージョン】コピペOK

上から下に読める、縦型のフローステップをCSSで作るにゃん

PCでもスマホでもよく使う、上から下へ縦長のフローステップのシンプルなパターンをご紹介します！

縦型のフローステップ（枠線だけ） CSS

四角の枠組みと、縦の棒が組み合わさった、シンプルなフローステップです。
Howtoなどの紹介に。

See the Pen 縦のフローステップ by tsucchikimiko (@nyanhanako) on CodePen.

縦型のフローステップ（中身を2列） CSS

先ほどのシンプルなフローステップの、1つ目・2つ目のみ、内容を2列にしています。
画像との組み合わせや、２つの事象を対比・並列させる場合に。

See the Pen 縦のフローステップ（中が2列） by tsucchikimiko (@nyanhanako) on CodePen.

縦型のフローステップ（シンプル丸）CSS

円形から線が伸びる、よく見るシンプルなフローステップです。こちらはタイトル箇所もあるため、HowtoやHistoryなどにも。

See the Pen 縦のフローステップ（円形にタイトル） by tsucchikimiko (@nyanhanako) on CodePen.

縦型のフローステップ（STEP題名入り）CSS

先ほどの円形を少し進化させ、円形の中にタイトルや数字を入れられます。

See the Pen 縦のフローステップ（中が2列） by tsucchikimiko (@nyanhanako) on CodePen.

経歴・沿革の表示（年号を背景にする）

フロー図で、よく使うパターンとして、経歴表示も。
背景に大きく年号を表示できます。

See the Pen 縦のフローステップ（円形にタイトル） by tsucchikimiko (@nyanhanako) on CodePen.

にゃん花子

FacebookInstagram

「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します