htmlとcssで作るステップフローのメモ

こういうステップフローがあるコンポーネントを作る

PC表示

SP表示（更新）

SP表示（更新前）
これは「STEP」と「見出し」の位置が揃っていなかったので微調整

調整ソース

-   <div class="stepbar">
-
-    <ol>
-     <li><p>step<span>1</span></p></li>
-     <li><p>step<span>2</span></p></li>
-     <li><p>step<span>3</span></p></li>
-     <li><p>step<span>4</span></p></li>
-    </ol>
- 
-    <div class="content">
-     <section class="item">
-      <h3>見出しテキスト</h3>
-      <p>本文が入ります。本文が入ります。</p>
-     </section><!-- ./ item -->
- 
-     <section class="item">
-      <h3>見出しテキスト</h3>
-      <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
-     </section><!-- ./ item -->
- 
-     <section class="item">
-      <h3>見出しテキスト</h3>
-      <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
-     </section><!-- ./ item -->
- 
-     <section class="item">
-      <h3>見出しテキスト</h3>
-      <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
-     </section><!-- ./ item -->
-    </div><!-- ./ content -->
- 
-   </div><!-- ./ stepbar -->
+   <div class="stepbar">
+    <ol>
+     <li>
+      <p class="step_number">step<span>1</span></p>
+      <section class="item">
+       <h3>見出しテキスト</h3>
+       <p>本文が入ります。本文が入ります。</p>
+      </section><!-- ./ item -->
+     </li>
+
+     <li>
+      <p class="step_number">step<span>2</span></p>
+      <section class="item">
+       <h3>見出しテキスト</h3>
+       <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
+      </section><!-- ./ item -->
+ 
+     </li>
+     
+     <li>
+      <p class="step_number">step<span>3</span></p>
+      <section class="item">
+       <h3>見出しテキスト</h3>
+       <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
+      </section><!-- ./ item -->
+ 
+     </li>
+     
+     <li>
+      <p class="step_number">step<span>4</span></p>
+      <section class="item">
+       <h3>見出しテキスト</h3>
+       <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
+      </section><!-- ./ item -->
+     </li>
+    </ol>
+   </div><!-- ./ stepbar -->

- .stepbar {
- padding: 48px 24px;
- margin: 48px 0;
- background-color: #eee;
- border-radius: 10px;
- display: flex;
- flex-direction: column;
-}
-
-.stepbar ol {
- display: flex;
- align-items: center;
- justify-content: space-around;
-}
-
-.stepbar ol li {
- position: relative;
- z-index: 2;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.stepbar ol li p {
- background-color: #db2a2a;
- color: #fff;
- width: 48px;
- height: 48px;
- border-radius: 50%;
- text-align: center;
- padding: 6px 4px;
- font-size: .725rem;
- text-transform: uppercase;
-}
-
-.stepbar ol li:not(:last-child)::after {
- content: "";
- position: absolute;
- z-index: -1;
- top: 50%;
- left: 50%;
- width: 100%;
- height: 1px;
- background-image : linear-gradient(to right, #db2a2a, #db2a2a 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
- background-size: 8px 2px;          /* グラデーションの幅・高さを指定 */
- background-position: left bottom;  /* 背景の開始位置を指定 */
- background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
-}
-
-
-.stepbar ol li span {
- display: block;
- text-align: center;
- font-size: 1.25rem;
- font-weight: 700;
- margin:  -6px 0 0 0;
-}
-
-
-.stepbar .content {
- display: flex;
- align-items: flex-start;
- justify-content: space-around;
- gap: 16px;
- margin: 16px 0 0 0;
-}
-
-.stepbar .content .item {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: calc(100% / 4);
-}

+ .stepbar {
+  padding: 48px 24px;
+  margin: 48px 0;
+  background-color: #eee;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+ }
+ 
+ .stepbar ol {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  gap: 24px;
+ }
+ 
+ .stepbar ol li {
+  position: relative;
+  z-index: 2;
+  width: calc(100% / 4 - 24px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+ }
+ 
+ .stepbar ol li .step_number {
+  background-color: #db2a2a;
+  color: #fff;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 6px 4px;
+  font-size: .725rem;
+  text-transform: uppercase;
+ }
+ 
+ .stepbar ol li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 24px;
+  left: 60%;
+  width: 100%;
+  height: 1px;
+  background-image : linear-gradient(to right, #db2a2a, #db2a2a 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
+  background-size: 6px 2px;          /* グラデーションの幅・高さを指定 */
+  background-position: left bottom;  /* 背景の開始位置を指定 */
+  background-repeat: repeat-x;       /* 横向きにのみ繰り返す + */
+ }
+ 
+ .stepbar ol li .step_number span {
+  display: block;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin:  -6px 0 0 0;
+ }
+ 
+ .stepbar ol li .item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+ }

ブレイクポイント

@media screen and (max-width: 768px){
 
- /* stepbar */
- .stepbar {
-  flex-direction: row;
-  gap: 16px;
- }
- 
- .stepbar ol {
-  flex-direction: column;
- }
- 
- .stepbar ol li:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  width: 1px;
-  height: 100%;
-  background-image: linear-gradient(to bottom, #db2a2a, #db2a2a 2px, transparent 2px, transparent 8px);
-  background-size: 2px 9px;
-  background-position: right bottom;
-  background-repeat: repeat-y;
-  top: 100%;
- }
- 
- .stepbar .content {
-  flex-direction: column;
- }
- 
- .stepbar .content .item {
-  align-items: flex-start;
-  width: 100%;
- }
- 
- }
- 
- @media screen and (max-width: 480px) {
-  
-  .stepbar ol li:not(:last-child)::after {
-   height: 200%;
-  }
- }

+  /* stepbar */
+  .stepbar {
+  flex-direction: row;
+  gap: 16px;
+  }
+
+  .stepbar ol {
+  flex-direction: column;
+  }
+
+  .stepbar ol li {
+    flex-direction: row;
+    width: 100%;
+    gap: 16px;
+    padding: 6px 4px;
+    align-items: stretch;
+  }
+
+  .stepbar ol li .step_number {
+    padding: 6px 10px;
+  }
+
+  .stepbar ol li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  width: 1px;
+  height: 100%;
+  background-image: linear-gradient(to bottom, #db2a2a, #db2a2a 2px, transparent 2px, transparent 8px);
+  background-size: 2px 6px;
+  background-position: right bottom;
+  background-repeat: repeat-y;
+  left: 28px;
+  top: 50%;
+ }
+
+  .stepbar ol li .item {
+  align-items: flex-start;
+  width: 100%;
+  margin-top: 0;
+  }

考えたこと

・試しに上と下で分割して実装しよう
・上と下に分割するとSP表示にしたときに高さが揃わなかったので、分割せずに実装
・ステップナンバーはolを使えばいいだろう
・flexで何とかなるだろう

ポイント

リストの疑似要素に線を引くところ

style.css

.stepbar ol li:not(:last-child)::after {
 content: "";
 position: absolute;
 z-index: -1; /* 重なり順が一緒だとかぶってしまうためレイヤーを一つ下げた */
 top: 50%; /* リストから考えるから50%にした */
 left: 50%; 
 width: 100%; 
 height: 1px;
 background-image : linear-gradient(to right, #db2a2a, #db2a2a 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
 background-size: 8px 2px;          /* グラデーションの幅・高さを指定 */
 background-position: left bottom;  /* 背景の開始位置を指定 */
 background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}

SP表示

style.css

.stepbar ol li:not(:last-child)::after {
 content: "";
 position: absolute;
 top: 100%;　/* リストから考えるから100%にした */
 z-index: -1;
 width: 1px;　/* 縦にしたいので幅を変更 */
 height: 100%;　/* 縦にしたいの高さを変更 */
 background-image: linear-gradient(to bottom, #db2a2a, #db2a2a 2px, transparent 2px, transparent 8px);
 background-size: 2px 9px;　/* グラデーションの幅・高さを変更 */
 background-position: right bottom;　/* 背景の開始位置を指定 */
 background-repeat: repeat-y;　 /* 縦向きにのみ繰り返す */

}

参考記事