HTMLとCSSだけでステッパーを作る

はじめに

HTMLとCSSだけでこのようなUI（stepper/progress tracker）を作りたいと考え、色々模索したのでメモとして残しておきます✍️

全体像

---

実装

線と丸を組み合わせたパーツとして分解し、最初のステップだけは線を付与しない方向で実装します。

丸＋テキストのパーツを作る

ステップ名を記載するテキストを用意し、擬似要素を使って丸を実装します。

【HTML】

<div class="item">
  Step1
</div>

【CSS】

.item {
  position: relative;
  padding-top: 8px;
}

.item::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: lightcoral;
  top: -32px;
  /* 丸をテキストに対して中央揃えにする */
  left: 0;
  right: 0;
  margin: auto;
}

前の丸と線で繋ぐ

前の丸と繋いでいる線の部分を作っていきます。

線の部分の長さはこのパーツの横幅に準ずるので、テキスト幅ではなくパーツ全体に対して

以下作戦

【HTML】

<li>
  <div class="item">
    Step1
  </div>
</li>

【CSS】

li {
  display: inline-block;
  position: relative;
  /* 丸のぶんの余白*/
  margin-top: 32px;
}
li + li {
  display: flex;
  flex-direction: row;
}
li + li::before {
  content: "";
  display: block;
  position: absolute;
  height: 4px;
  background-color: lightcoral;
  top: -16px;
  /* ①パーツ幅と同じだけ長さを確保 */
  width: 100%;
  /* ②左にずらす */
  left: -10%; 
}

状態に合わせてスタイルを変える

今回は3つの状態を用意しました

1. ready：実行前の操作
2. wip：現在実行中の操作
3. done：完了している操作

それぞれ、丸の色・前の丸と繋ぐ線の色を調整しました。

【HTML】

<li class="done">
  <div class="item">
    Step1
  </div>
</li>

【CSS】

.ready::before {
  background-color: lightgrey;
}
.ready > .item::before {
  background-color: lightgrey;
}

wipだけは真ん中に白い丸を入れてデザインを変えています。
外側の丸はborderを使用したうえで、丸の大きさ自体はreadyとdoneと同じ大きさにするため、box-sizing: border-box;を指定しています。

.item::before {
  box-sizing: border-box;
}
.wip::before {
  background-color: lightcoral;
}
.wip > .item::before {
  border: solid 8px lightcoral;
  background-color: white;
}

---

完成！

不備があればご指摘いただけると嬉しいです！