<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブ・ステップフロー（サイズ指定版）</title>
<style>
/* === ベース設定 === */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 40px 20px;
}
/* === 全体のコンテナ === */
.flow-container {
display: flex;
align-items: flex-start; /* 上揃え */
justify-content: center; /* コンテンツが少ないときは中央寄せ */
width: 100%;
max-width: 1000px; /* 全体の最大幅（適宜調整してください） */
margin: 0 auto;
}
/* === ステップ（箱）の基本スタイル === */
.step-item {
/* flex: 0 1 auto; -> 伸びない(0)、縮む(1)、ベースサイズは自動(auto) */
flex: 0 1 auto;
width: 100%; /* 基本は親に合わせて広がる */
position: relative;
z-index: 2;
}
/* ▼▼▼ ここでサイズを指定します ▼▼▼ */
.step-max-266 {
max-width: 266px;
}
.step-max-240 {
max-width: 240px;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
.step-box {
background-color: #8FD3EF; /* 水色 */
color: #333;
font-weight: bold;
padding: 15px 5px; /* 左右paddingを少し減らして文字領域確保 */
text-align: center;
border-radius: 4px;
width: 100%;
min-height: 50px;
/* 上下中央揃え */
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/* テキスト折り返し設定 */
word-wrap: break-word;
overflow-wrap: break-word;
}
/* === コネクタ（間のスペース・線・完了メッセージ） === */
.connector-area {
/* flex: 1; -> ステップの幅が決まっているので、残りの余白を全てコネクタが埋める */
flex: 1;
position: relative;
display: flex;
justify-content: center;
height: 150px;
min-width: 40px; /* ステップ同士がくっつきすぎないように最小幅を確保 */
}
/* 1. 青い横線 */
.connector-line-blue {
position: absolute;
top: 40px;
/* 左右のステップの下に確実に潜り込ませるため、幅を100%より広くする */
width: calc(100% + 10px);
left: -5px; /* 左にずらしてオーバーラップさせる */
height: 4px;
background-color: #2F66A9;
z-index: 1;
}
/* 2. 茶色の縦線 */
.connector-line-brown {
position: absolute;
top: 40px;
width: 3px;
height: 40px;
background-color: #C18A38;
z-index: 1;
}
/* 3. 完了メッセージボックス */
.complete-msg-box {
position: absolute;
top: 80px;
background-color: #FDEEA3;
border: 1px solid #ECD665;
padding: 10px 5px;
text-align: center;
/* コネクタ幅に関わらず、文字が読める幅を確保 */
width: 160px; /* 固定幅、あるいは max-width等でもOK */
max-width: 200%; /* コネクタが狭くてもはみ出して表示させる許可 */
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 3;
font-size: 14px;
line-height: 1.4;
}
.complete-msg-box a {
color: #3333cc;
text-decoration: none;
display: inline-block;
margin-top: 4px;
font-size: 12px;
}
.complete-msg-box a:hover {
text-decoration: underline;
}
/* スマホ対応：画面が狭いときはflex-wrapさせず、縮小を許可する */
@media (max-width: 600px) {
.complete-msg-box {
width: 120px; /* スマホではメッセージボックスを少し小さく */
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="flow-container">
<div class="step-item step-max-266">
<div class="step-box">
Step1<br>最大266px<br>幅広です
</div>
</div>
<div class="connector-area">
<div class="connector-line-blue"></div>
<div class="connector-line-brown"></div>
<div class="complete-msg-box">
step1完了<br>
<a href="#">詳しくはこちら</a>
</div>
</div>
<div class="step-item step-max-240">
<div class="step-box">Step2<br>Max 240px</div>
</div>
<div class="connector-area">
<div class="connector-line-blue"></div>
<div class="connector-line-brown"></div>
<div class="complete-msg-box">
step2完了<br>
<a href="#">詳しくはこちら</a>
</div>
</div>
<div class="step-item step-max-240">
<div class="step-box">Step3<br>Max 240px</div>
</div>
</div>
</body>
</html>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme