こういうステップフローがあるコンポーネントを作る
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; /* 縦向きにのみ繰り返す */
}
参考記事