MENU
  1. ホーム
  2. Gallery
  3. 流れ

流れ

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

動的なナンバリング：CSSカウンター機能（counter）を用いた自動連番システム

ポイント: HTML側に「01, 02…」といった数字を直接記述せず、CSSの counter-increment および counter() 関数を用いて、ステップ番号をシステム的かつ動的に自動生成しています。

.flow {
  counter-increment: item-counter;
  position: relative;
}

.flow-title::before {
  content: "0" counter(item-counter);
  /* 省略（正円・フォントスタイル等） */
}

解説: HTMLに直接「01」などとハードコーディングしていると、順序変更のたびにすべての数字を手動で書き換える必要があり、修正ミスに繋がります。この問題を解決するために、CSSだけで完結する自動連番システム（CSSカウンター）を採用しています。親要素にあたる .flow が出現するたびに counter-increment: item-counter; で内部の数値をプラス1し、.flow-title::before の content 属性の中でその数値を呼び出しています。頭に文字列として "0" を結合することで、デザインカンプ通りの「2桁の番号（01, 02…）」を動的に表現しています。CMS（WordPress等）への組み込みや将来の仕様変更にも耐えうる設計です。

タイムライン線の構築：縦線の絶対配置とcalc()関数による中央軸の自動計算

ポイント: 各ステップを縦に繋ぐドット・タイムライン線を ::before 疑似要素で実装。円形アイコンのサイズ（50px）と完全に連動するように calc() 関数を用いて線の位置（左余白）を自動計算しています。

.flow:not(:last-child)::before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--color-nord6);
  position: absolute;
  left: calc(50px / 2);
  top: 0;
}

解説: 各ステップを繋ぐ縦線を表現するために、装飾目的の無駄な空タグをHTMLに増やさず、.flow 要素の疑似要素としてスタイリングしています。ここで重要なのが、縦線を「番号の正円（横幅50px）の真ん中」にピタッと通すための計算ロジックです。left: calc(50px / 2); と記述することで、円の直径（50px）の半分（25px）の位置をブラウザに自動計算させ、縦線の中心軸と正円の中心軸を完全に一致させています。数値を「25px」と直接指定せず、あえて calc(50px / 2) と書くことで、「50pxの円の中心を探している」というコードの意図が第三者にも一目で伝わる実装パターンです。

重なりの制御：:not(:last-child)による最終線の除外とz-indexによる表示バグ防止

ポイント: リストの最後の要素にだけ縦線を引かない制御を :not(:last-child) で行い、さらに番号の背景が縦線で串刺し状に透けて見えないよう z-index で重なり順を最適化しています。

.flow:not(:last-child)::before {
  /* 縦線の指定 */
}

.flow-title::before {
  /* 番号の正円の指定 */
  position: relative;
  z-index: 1;
}

解説: デザインカンプ通り、一番最後のステップ（03）の下側には不要な縦線が伸びないよう、:not(:last-child) を使って「最後以外の要素の疑似要素」としてのみ縦線を生成しています。これにより、余分な線を消すための打ち消しコードが不要になります。
また、縦線を .flow を起点に top: 0; から height: 100%; で引き伸ばしているため、そのままでは上にある番号の正円の文字（01や02）を縦線が串刺しのように通過してしまい、見た目が美しくありません。この重なり順のバグを防ぐため、正円（.flow-title::before）側に position: relative; と z-index: 1; を付与し、縦線よりも手前に浮き上がらせています。円自体の背景色（background-color）によって、重なった背後の縦線が綺麗にマスク（目隠し）され、カンプ通りのタイムラインUIを実現しています。

Gallery
目次