🩰

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

2022/09/06に公開

はじめに

HTMLとCSSだけでこのようなUI(stepper/progress tracker)を作りたいと考え、色々模索したのでメモとして残しておきます✍️
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;
}

完成!

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

Discussion

ログインするとコメントできます