MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！ステップ・フロー図デザイン11選

【HTML/CSS】コピペ！ステップ・フロー図デザイン11選

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なステップ・フロー図デザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ベーシック・横型（ステップ・フロー・横）

ECサイトのカート画面や会員登録画面などでよく目にする、左から右へ進むフロー図横方向のデザインです。

ここでは、以下のベーシック・横型（ステップ・フロー・横）のデザイン例を記載しています。

ベーシック・横型（ステップ・フロー・横）
  • シンプル丸型線繋ぎ（王道のステップバー）
  • 連結する矢印リボン（ステップバー矢印）
  • アイコン主体の進捗プログレスバー

実際のデザインプレビューとHTML＆CSSコードを記載しています。

シンプル丸型線繋ぎ（王道のステップバー）

ECサイトの購入フロー（カート → お客様情報 → お支払い → 完了）やサービスの登録手順などでよく使われる、視認性に優れた王道のデザインです。

  • 1
    カート
  • 2
    お客様情報
  • 3
    お支払い
  • 4
    完了
HTMLコード表示
<div class="cs-step-wrapper">
    <ul class="cs-step-list">
        
        <li class="cs-step-item is-completed">
            <div class="cs-step-circle">1</div>
            <span class="cs-step-label">カート</span>
        </li>
        
        <li class="cs-step-item is-active">
            <div class="cs-step-circle">2</div>
            <span class="cs-step-label">お客様情報</span>
        </li>

        <li class="cs-step-item">
            <div class="cs-step-circle">3</div>
            <span class="cs-step-label">お支払い</span>
        </li>

        <li class="cs-step-item">
            <div class="cs-step-circle">4</div>
            <span class="cs-step-label">完了</span>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・リスト初期化
========================================= */
.cs-step-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    padding: 20px 0;
}

.cs-step-list {
    display: flex;
    list-style: none; /* テーマ標準の黒ポッチを消去 */
    padding: 0;
    margin: 0;
}

/* =========================================
   各ステップの項目（等間隔に配置）
========================================= */
.cs-step-item {
    flex: 1; /* すべてのステップを同じ幅に均等割付 */
    position: relative;
    text-align: center;
}

/* =========================================
   繋ぎのライン（疑似要素で描画）
========================================= */
.cs-step-item::after {
    content: '';
    position: absolute;
    /* 丸の高さの中央に配置（36pxの半分 = 18px）+ border分 */
    top: 20px; 
    left: 50%; /* 自分の丸の中央からスタート */
    width: 100%; /* 次の丸の中央まで線を引く */
    height: 4px;
    background-color: #e2e8f0; /* 未完了のグレー線 */
    z-index: 1;
}

/* 一番最後の項目には線を引かない */
.cs-step-item:last-child::after {
    content: none;
}

/* =========================================
   丸型アイコン
========================================= */
.cs-step-circle {
    position: relative;
    z-index: 2; /* 繋ぎの線より上に表示 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e2e8f0; /* 未完了のグレー */
    color: #94a3b8;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
    /* 丸と線の間に余白を作るための白枠 */
    border: 4px solid #ffffff; 
    box-sizing: border-box;
}

/* =========================================
   テキスト（ラベル）
========================================= */
.cs-step-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #94a3b8; /* 未完了のグレーテキスト */
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */

/* ▼ 完了済（is-completed）のスタイル ▼ */
.cs-step-item.is-completed .cs-step-circle {
    background-color: #2589d0; /* ブルー */
    color: #ffffff;
}
.cs-step-item.is-completed::after {
    background-color: #2589d0; /* 次へ続く線もブルーに塗る */
}
.cs-step-item.is-completed .cs-step-label {
    color: #475569; /* 少し濃いグレー */
}

/* ▼ 現在地（is-active）のスタイル ▼ */
.cs-step-item.is-active .cs-step-circle {
    background-color: #2589d0;
    color: #ffffff;
    /* 現在地を強調するために、周囲にふんわりとした光（影）を落とす */
    box-shadow: 0 0 0 4px rgba(37, 137, 208, 0.2); 
}
.cs-step-item.is-active .cs-step-label {
    color: #2589d0; /* テキストもブルーにして目立たせる */
    font-weight: 800;
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-step-circle {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
        border-width: 3px;
        margin-bottom: 8px;
    }
    .cs-step-item::after {
        top: 16px; /* 丸の縮小に合わせて線の位置も調整 */
    }
    .cs-step-label {
        font-size: 0.75rem;
    }
}

連結する矢印リボン（ステップバー矢印）

「＞」の形をしたリボンが重なり合いながら右へ進んでいく、視線誘導効果が高い定番のデザインです。

  • STEP 1 カート
  • STEP 2 情報入力
  • STEP 3 確認画面
  • STEP 4 注文完了
HTMLコード表示
<div class="cs-arrow-wrapper">
    <ul class="cs-arrow-list">
        
        <li class="cs-arrow-item is-completed">
            <span class="cs-arrow-num">STEP 1</span>
            <span class="cs-arrow-title">カート</span>
        </li>
        
        <li class="cs-arrow-item is-active">
            <span class="cs-arrow-num">STEP 2</span>
            <span class="cs-arrow-title">情報入力</span>
        </li>

        <li class="cs-arrow-item">
            <span class="cs-arrow-num">STEP 3</span>
            <span class="cs-arrow-title">確認画面</span>
        </li>

        <li class="cs-arrow-item">
            <span class="cs-arrow-num">STEP 4</span>
            <span class="cs-arrow-title">注文完了</span>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-arrow-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    padding: 10px 0;
}

.cs-arrow-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    /* 角丸を全体にかけるための設定 */
    border-radius: 8px; 
    overflow: hidden;
}

/* =========================================
   各ステップ（リボン本体）
========================================= */
.cs-arrow-item {
    flex: 1; /* すべて均等の幅にする */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* 左側が凹む分、テキストが被らないように左の余白(padding)を多めにとる */
    padding: 16px 12px 16px 24px; 
    
    background-color: #e2e8f0; /* 未完了の背景色（グレー） */
    color: #64748b;            /* 未完了の文字色 */
    text-align: center;
    
    /* ▼ 図形を矢印（リボン）の形に切り抜く ▼ */
    clip-path: polygon(
        calc(100% - 16px) 0%, /* 右上（少し内側） */
        100% 50%,             /* 右端の中央（尖る部分） */
        calc(100% - 16px) 100%, /* 右下（少し内側） */
        0% 100%,              /* 左下 */
        16px 50%,             /* 左端の中央（凹む部分） */
        0% 0%                 /* 左上 */
    );
    
    /* 前の要素にめり込ませて、隙間を2pxだけ残す高度な計算（16px - 14px = 2px） */
    margin-left: -14px; 
}

/* 最初と最後の要素は、端を平らにする */
.cs-arrow-item:first-child {
    padding-left: 16px;
    clip-path: polygon(calc(100% - 16px) 0%, 100% 50%, calc(100% - 16px) 100%, 0% 100%, 0% 0%);
    margin-left: 0; /* 最初はめり込ませない */
}

.cs-arrow-item:last-child {
    padding-right: 16px;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 16px 50%, 0% 0%);
}

/* =========================================
   テキストの装飾
========================================= */
.cs-arrow-num {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 4px;
    opacity: 0.8;
}

.cs-arrow-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

/* =========================================
   ステータス別の色変化
========================================= */
/* ▼ 完了済（is-completed） ▼ */
.cs-arrow-item.is-completed {
    background-color: #10b981; /* グリーン */
    color: #ffffff;
}

/* ▼ 現在地（is-active） ▼ */
.cs-arrow-item.is-active {
    background-color: #2589d0; /* ブルー */
    color: #ffffff;
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-arrow-item {
        /* スマホでは隙間を減らし、コンパクトに */
        padding: 12px 8px 12px 16px; 
    }
    .cs-arrow-item:first-child { padding-left: 8px; }
    .cs-arrow-item:last-child { padding-right: 8px; }
    
    .cs-arrow-num {
        font-size: 0.65rem;
        margin-bottom: 2px;
    }
    .cs-arrow-title {
        font-size: 0.75rem;
    }
}

アイコン主体の進捗プログレスバー

現在のステップを視覚的に一瞬で理解できるため、入力項目が多い会員登録フォームや複数ページにまたがる診断コンテンツなどで効果的なUIです。

  • カート
  • 情報入力
  • お支払い
  • 完了
HTMLコード表示
<div class="cs-icon-step-wrapper">
    <ul class="cs-icon-step-list">
        
        <li class="cs-icon-step-item is-completed">
            <div class="cs-icon-step-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
            </div>
            <span class="cs-icon-step-label">カート</span>
        </li>
        
        <li class="cs-icon-step-item is-active">
            <div class="cs-icon-step-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
            </div>
            <span class="cs-icon-step-label">情報入力</span>
        </li>

        <li class="cs-icon-step-item">
            <div class="cs-icon-step-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
            </div>
            <span class="cs-icon-step-label">お支払い</span>
        </li>

        <li class="cs-icon-step-item">
            <div class="cs-icon-step-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            </div>
            <span class="cs-icon-step-label">完了</span>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-icon-step-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    padding: 20px 0;
}

.cs-icon-step-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ▼ 背後の繋ぎ線（全体の背景として1本引く） ▼ */
.cs-icon-step-list::before {
    content: '';
    position: absolute;
    top: 32px; /* アイコンの高さ（64px）の中央 */
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #e2e8f0;
    z-index: -1; /* アイコンの裏側に配置 */
}

/* =========================================
   各ステップ項目
========================================= */
.cs-icon-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* =========================================
   アイコン領域（丸い背景）
========================================= */
.cs-icon-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ffffff; /* 背後の線を隠すために白く塗りつぶす */
    border: 4px solid #e2e8f0; /* 未完了のグレー枠 */
    color: #94a3b8; /* 未完了のアイコン色（グレー） */
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* SVGアイコン自体のサイズ調整 */
.cs-icon-step-icon svg {
    width: 28px;
    height: 28px;
}

/* =========================================
   テキスト（ラベル）
========================================= */
.cs-icon-step-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    transition: color 0.3s ease;
}

/* =========================================
   ステータス別の色変化（完了・現在地）
========================================= */

/* ▼ 完了済（is-completed）のスタイル ▼ */
.cs-icon-step-item.is-completed .cs-icon-step-icon {
    background-color: #2589d0; /* ブルーで塗りつぶす */
    border-color: #2589d0;
    color: #ffffff; /* アイコンを白に */
}
.cs-icon-step-item.is-completed .cs-icon-step-label {
    color: #475569;
}

/* 完了済のステップから次へ伸びる「青い線」を疑似要素で描画 */
.cs-icon-step-item.is-completed::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 50%;
    width: 100%;
    height: 4px;
    background-color: #2589d0;
    z-index: -1;
}

/* ▼ 現在地（is-active）のスタイル ▼ */
.cs-icon-step-item.is-active .cs-icon-step-icon {
    background-color: #ffffff;
    border-color: #2589d0; /* 枠線だけブルーにして目立たせる */
    color: #2589d0; /* アイコン色もブルー */
    box-shadow: 0 4px 12px rgba(37, 137, 208, 0.2); /* 浮き上がるような影 */
}
.cs-icon-step-item.is-active .cs-icon-step-label {
    color: #2589d0;
    font-weight: 800;
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-icon-step-list::before {
        top: 24px; /* アイコン縮小に伴い線の位置を調整 */
    }
    .cs-icon-step-icon {
        width: 48px;
        height: 48px;
        border-width: 3px;
        margin-bottom: 8px;
    }
    .cs-icon-step-icon svg {
        width: 20px;
        height: 20px;
    }
    .cs-icon-step-item.is-completed::after {
        top: 24px;
    }
    .cs-icon-step-label {
        font-size: 0.75rem;
    }
}

ベーシック・縦型（ステップ・フロー・縦）

画面幅の狭いスマートフォンや各手順について画像付きで詳細な説明を加えたいブログ記事などに最適な構成です。

ここでは、以下のベーシック・縦型（ステップ・フロー・縦）のデザイン例を記載しています。

ベーシック・縦型（ステップ・フロー・縦）
  • 左ライン・タイムライン風（ステップバー縦）
  • センターライン・交互配置型
  • 矢印付きカード型プロセス

実際のデザインプレビューとHTML＆CSSコードを記載しています。

左ライン・タイムライン風（ステップバー縦）

企業の沿革、サービスの利用手順、あるいはプロジェクトの進行記録など、時系列に沿ったストーリーを語るのに最適なレイアウトです。

スマートフォンなどの縦長の画面幅と相性が良く、レスポンシブ環境で安全かつ美しく情報を整理できます。

  • 1
    サーバー環境のリセット

    約8年間運営していたPythonプログラミングサイトのデータをサーバーから完全に削除し、新しい環境へ移行するための準備を完了しました。

  • 2
    サイトリニューアル・WordPress再構築

    HTMLとCSSを中心としたWebデザインサイトとして方向性を一新。SWELLテーマを導入し、デザインとサイト設計をゼロから再構築しました。

  • 3
    月間1,500PV・70記事到達

    リニューアルから約1ヶ月で、検索流入が順調に増加。アクセスを集めるアクティブな記事が約70本に到達し、初期のトラフィック目標を達成しました。

  • 4
    HTML＆CSS技術記事の拡充

    HTMLの各タグに関する情報発信やモダンなCSSレイアウト技術など、より高度で実践的なフロントエンド技術に関する長編記事を順次公開中です。

HTMLコード表示
<div class="cs-timeline-wrapper">
    <ul class="cs-timeline-list">
        
        <li class="cs-timeline-item is-completed">
            <div class="cs-timeline-node">1</div>
            <div class="cs-timeline-content">
                <time class="cs-timeline-date" datetime="2026-03-31">2026.03.31</time>
                <span class="cs-timeline-title">サーバー環境のリセット</span>
                <p class="cs-timeline-desc">約8年間運営していたPythonプログラミングサイトのデータをサーバーから完全に削除し、新しい環境へ移行するための準備を完了しました。</p>
            </div>
        </li>
        
        <li class="cs-timeline-item is-completed">
            <div class="cs-timeline-node">2</div>
            <div class="cs-timeline-content">
                <time class="cs-timeline-date" datetime="2026-04-01">2026.04.01</time>
                <span class="cs-timeline-title">サイトリニューアル・WordPress再構築</span>
                <p class="cs-timeline-desc">HTMLとCSSを中心としたWebデザインサイトとして方向性を一新。SWELLテーマを導入し、デザインとサイト設計をゼロから再構築しました。</p>
            </div>
        </li>

        <li class="cs-timeline-item is-completed">
            <div class="cs-timeline-node">3</div>
            <div class="cs-timeline-content">
                <time class="cs-timeline-date" datetime="2026-04-30">2026.04.30</time>
                <span class="cs-timeline-title">月間1,500PV・70記事到達</span>
                <p class="cs-timeline-desc">リニューアルから約1ヶ月で、検索流入が順調に増加。アクセスを集めるアクティブな記事が約70本に到達し、初期のトラフィック目標を達成しました。</p>
            </div>
        </li>

        <li class="cs-timeline-item is-active">
            <div class="cs-timeline-node">4</div>
            <div class="cs-timeline-content">
                <time class="cs-timeline-date" datetime="2026-07-16">2026.07.16</time>
                <span class="cs-timeline-title">HTML＆CSS技術記事の拡充</span>
                <p class="cs-timeline-desc">HTMLの各タグに関する情報発信やモダンなCSSレイアウト技術など、より高度で実践的なフロントエンド技術に関する長編記事を順次公開中です。</p>
            </div>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・リスト初期化
========================================= */
.cs-timeline-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    padding: 20px 16px;
}

.cs-timeline-list {
    list-style: none; /* デフォルトのリストマークを消去 */
    padding: 0;
    margin: 0;
}

/* =========================================
   各ステップ項目と「縦の繋ぎ線」
========================================= */
.cs-timeline-item {
    position: relative;
    /* 左側に丸アイコンと線を配置するための余白（パディング） */
    padding-left: 56px; 
    /* 次のステップとの縦の余白 */
    padding-bottom: 48px; 
}

/* 最後のステップは下の余白をなくす */
.cs-timeline-item:last-child {
    padding-bottom: 0;
}

/* ▼ 魔法のコード：疑似要素で各ステップを繋ぐ縦線を描く ▼ */
.cs-timeline-item::before {
    content: '';
    position: absolute;
    /* 丸アイコンの真下からスタートさせる（アイコンのサイズ32pxに合わせて調整） */
    top: 32px; 
    /* 左端から15pxの位置（丸アイコンの中央）に線を引く */
    left: 15px; 
    width: 2px;
    /* 丸アイコンの分（32px）を引いた高さまで線を伸ばす */
    height: calc(100% - 32px); 
    background-color: #e2e8f0; /* 未完了のグレー線 */
    z-index: 1;
}

/* 最後のステップには下へ伸びる線を引かない */
.cs-timeline-item:last-child::before {
    display: none;
}

/* =========================================
   丸いノード（ステップ番号）
========================================= */
.cs-timeline-node {
    position: absolute;
    top: 0;
    left: 0; /* padding-leftで空けたスペースの左上に絶対配置 */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    z-index: 2; /* 縦線より上に表示 */
    box-sizing: border-box; /* ボーダー追加時にサイズが変わるのを防ぐ */
    transition: all 0.3s ease;
}

/* =========================================
   コンテンツ（日付・タイトル・説明文）
========================================= */
.cs-timeline-content {
    /* 丸アイコンの高さの中央付近とテキストの上部を揃えるための微調整 */
    padding-top: 2px; 
}

.cs-timeline-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.cs-timeline-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}

.cs-timeline-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */

/* ▼ 完了済（is-completed）のスタイル ▼ */
.cs-timeline-item.is-completed .cs-timeline-node {
    background-color: #2589d0; /* ブルー */
    color: #ffffff;
}
.cs-timeline-item.is-completed::before {
    background-color: #2589d0; /* 下へ続く縦線もブルーに塗る */
}

/* ▼ 現在地（is-active）のスタイル ▼ */
.cs-timeline-item.is-active .cs-timeline-node {
    background-color: #ffffff;
    border: 3px solid #2589d0; /* 枠線をブルーに */
    color: #2589d0;
    box-shadow: 0 4px 12px rgba(37, 137, 208, 0.2);
}
.cs-timeline-item.is-active .cs-timeline-title {
    color: #2589d0; /* タイトルもアクセントカラーにして強調 */
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-timeline-item {
        padding-left: 44px; /* スマホでは左の余白を少し狭くする */
        padding-bottom: 36px;
    }
    .cs-timeline-node {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    .cs-timeline-item::before {
        top: 28px;
        left: 13px; /* 28pxの半分(14px)から線の太さ(2px)の半分(1px)を引いた位置 */
        height: calc(100% - 28px);
    }
    .cs-timeline-title {
        font-size: 1rem;
    }
    .cs-timeline-desc {
        font-size: 0.9rem;
    }
}

センターライン・交互配置型

中央に一本の線を通し、コンテンツを左右交互（ジグザグ）に配置するレイアウトです。

会社の沿革（ヒストリー）や、LP（ランディングページ）でのストーリーテリングなど、画面の横幅を広く使ってダイナミックに見せたい場面で人気があります。

  • 1
    サーバー環境のリセット

    長年運営していたPythonサイトのデータを整理し、新しい環境へ移行するための準備を完了しました。

  • 2
    サイトリニューアル・再構築

    HTMLとCSSを中心としたWebデザインサイトとして方向性を一新。SWELLテーマを導入し、ゼロから再構築しました。

  • 3
    月間1,500PV・70記事到達

    リニューアルから約1ヶ月で検索流入が増加。アクティブな記事が約70本に到達し、初期目標を達成しました。

  • 4
    HTML＆CSS技術記事の拡充

    より高度で実践的なフロントエンド技術に関する長編記事を順次公開し、コンテンツを拡充しています。

HTMLコード表示
<div class="cs-center-wrapper">
    <ul class="cs-center-list">
        
        <li class="cs-center-item is-completed">
            <div class="cs-center-node">1</div>
            <div class="cs-center-content">
                <time class="cs-center-date" datetime="2026-03-31">2026.03.31</time>
                <span class="cs-center-title">サーバー環境のリセット</span>
                <p class="cs-center-desc">長年運営していたPythonサイトのデータを整理し、新しい環境へ移行するための準備を完了しました。</p>
            </div>
        </li>
        
        <li class="cs-center-item is-completed">
            <div class="cs-center-node">2</div>
            <div class="cs-center-content">
                <time class="cs-center-date" datetime="2026-04-01">2026.04.01</time>
                <span class="cs-center-title">サイトリニューアル・再構築</span>
                <p class="cs-center-desc">HTMLとCSSを中心としたWebデザインサイトとして方向性を一新。SWELLテーマを導入し、ゼロから再構築しました。</p>
            </div>
        </li>

        <li class="cs-center-item is-completed">
            <div class="cs-center-node">3</div>
            <div class="cs-center-content">
                <time class="cs-center-date" datetime="2026-04-30">2026.04.30</time>
                <span class="cs-center-title">月間1,500PV・70記事到達</span>
                <p class="cs-center-desc">リニューアルから約1ヶ月で検索流入が増加。アクティブな記事が約70本に到達し、初期目標を達成しました。</p>
            </div>
        </li>

        <li class="cs-center-item is-active">
            <div class="cs-center-node">4</div>
            <div class="cs-center-content">
                <time class="cs-center-date" datetime="2026-07-16">2026.07.16</time>
                <span class="cs-center-title">HTML＆CSS技術記事の拡充</span>
                <p class="cs-center-desc">より高度で実践的なフロントエンド技術に関する長編記事を順次公開し、コンテンツを拡充しています。</p>
            </div>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-center-wrapper {
    width: 100%;
    max-width: 900px; /* 左右に広がるため少し広めに確保 */
    margin: 0 auto 2em;
    padding: 20px 16px;
}

.cs-center-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* =========================================
   各ステップ項目
========================================= */
.cs-center-item {
    position: relative;
    width: 100%;
    margin-bottom: 40px; /* ステップ同士の縦の隙間 */
}
.cs-center-item:last-child {
    margin-bottom: 0;
}

/* ▼ 中央の縦線（各アイテムごとに引いて繋げる） ▼ */
.cs-center-item::before {
    content: '';
    position: absolute;
    top: 32px; /* 丸ノードの真下からスタート */
    left: 50%;
    transform: translateX(-50%); /* 完璧に中央へ配置 */
    width: 2px;
    height: calc(100% + 8px); /* 次のノードまで届かせる計算 */
    background-color: #e2e8f0;
    z-index: 1;
}

/* 最後のステップの線は消す */
.cs-center-item:last-child::before {
    display: none;
}

/* =========================================
   丸いノード（ステップ番号）
========================================= */
.cs-center-node {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 中央に配置 */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    z-index: 2;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* =========================================
   コンテンツ（テキスト領域の左右振り分け）
========================================= */
.cs-center-content {
    width: 50%; /* 全体の半分の幅にする */
    box-sizing: border-box;
    padding-top: 2px;
}

/* ▼ 奇数（左側）のスタイル ▼ */
.cs-center-item:nth-child(odd) .cs-center-content {
    padding-right: 40px; /* 中央の線との隙間 */
    text-align: right;   /* テキストを右寄せにして線に寄せる */
}

/* ▼ 偶数（右側）のスタイル ▼ */
.cs-center-item:nth-child(even) .cs-center-content {
    margin-left: 50%;    /* 右半分に押し出す */
    padding-left: 40px;  /* 中央の線との隙間 */
    text-align: left;    /* テキストは左寄せ */
}

/* テキスト装飾 */
.cs-center-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}
.cs-center-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}
.cs-center-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */
.cs-center-item.is-completed .cs-center-node {
    background-color: #2589d0;
    color: #ffffff;
}
.cs-center-item.is-completed::before {
    background-color: #2589d0;
}
.cs-center-item.is-active .cs-center-node {
    background-color: #ffffff;
    border: 3px solid #2589d0;
    color: #2589d0;
    box-shadow: 0 4px 12px rgba(37, 137, 208, 0.2);
}
.cs-center-item.is-active .cs-center-title {
    color: #2589d0;
}

/* =========================================
   レスポンシブ対応（スマホ表示時は「左ライン」に変化）
========================================= */
@media screen and (max-width: 768px) {
    /* 縦線の位置を左端へ移動 */
    .cs-center-item::before {
        left: 16px;
        transform: translateX(-50%);
    }
    
    /* 丸ノードの位置を左端へ移動 */
    .cs-center-node {
        left: 16px;
        transform: translateX(-50%);
    }
    
    /* コンテンツ幅を100%にし、すべて左寄せに統一 */
    .cs-center-content {
        width: 100%;
    }
    .cs-center-item:nth-child(odd) .cs-center-content,
    .cs-center-item:nth-child(even) .cs-center-content {
        margin-left: 0;
        padding-left: 48px; /* 丸ノードとの隙間 */
        padding-right: 0;
        text-align: left;   /* 右寄せを解除 */
    }
    
    .cs-center-title { font-size: 1rem; }
    .cs-center-desc { font-size: 0.9rem; }
}

矢印付きカード型プロセス

各ステップを独立した「カード（囲み枠）」にし、その間を「下向きの矢印（↓）」で繋ぐデザインです。

LP（ランディングページ）での「お申し込みの流れ」や企業サイトでの「採用プロセス」などでよく使われる、信頼感と安定感のあるレイアウトです。

  • STEP 01 お問い合わせ・ご相談

    まずは専用フォームまたはお電話にて、お気軽にご相談ください。24時間以内に担当者より折り返しご連絡いたします。

  • STEP 02 ヒアリング・お見積もり

    現状の課題やご要望をオンラインにてヒアリングさせていただき、最適なプランとお見積もりをご提案します。

  • STEP 03 ご契約・キックオフ

    提案内容にご納得いただけましたらご契約となります。今後のスケジュールや具体的な設計についてキックオフミーティングを行います。

  • STEP 04 開発・納品

    設計に基づいて開発を進めます。途中経過をご確認いただきながら進行し、最終チェックを経て本番環境へ納品いたします。

HTMLコード表示
<div class="cs-card-step-wrapper">
    <ul class="cs-card-step-list">
        
        <li class="cs-card-step-item is-completed">
            <div class="cs-card-step-box">
                <div class="cs-card-step-header">
                    <span class="cs-card-step-num">STEP 01</span>
                    <span class="cs-card-step-title">お問い合わせ・ご相談</span>
                </div>
                <p class="cs-card-step-desc">
                    まずは専用フォームまたはお電話にて、お気軽にご相談ください。24時間以内に担当者より折り返しご連絡いたします。
                </p>
            </div>
        </li>
        
        <li class="cs-card-step-item is-completed">
            <div class="cs-card-step-box">
                <div class="cs-card-step-header">
                    <span class="cs-card-step-num">STEP 02</span>
                    <span class="cs-card-step-title">ヒアリング・お見積もり</span>
                </div>
                <p class="cs-card-step-desc">
                    現状の課題やご要望をオンラインにてヒアリングさせていただき、最適なプランとお見積もりをご提案します。
                </p>
            </div>
        </li>

        <li class="cs-card-step-item is-active">
            <div class="cs-card-step-box">
                <div class="cs-card-step-header">
                    <span class="cs-card-step-num">STEP 03</span>
                    <span class="cs-card-step-title">ご契約・キックオフ</span>
                </div>
                <p class="cs-card-step-desc">
                    提案内容にご納得いただけましたらご契約となります。今後のスケジュールや具体的な設計についてキックオフミーティングを行います。
                </p>
            </div>
        </li>

        <li class="cs-card-step-item">
            <div class="cs-card-step-box">
                <div class="cs-card-step-header">
                    <span class="cs-card-step-num">STEP 04</span>
                    <span class="cs-card-step-title">開発・納品</span>
                </div>
                <p class="cs-card-step-desc">
                    設計に基づいて開発を進めます。途中経過をご確認いただきながら進行し、最終チェックを経て本番環境へ納品いたします。
                </p>
            </div>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-card-step-wrapper {
    width: 100%;
    max-width: 600px; /* カード型は幅を少し絞った方が綺麗に見えます */
    margin: 0 auto 2em;
    padding: 10px 0;
}

.cs-card-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================
   各ステップ項目（カード＋下部余白）
========================================= */
.cs-card-step-item {
    position: relative;
    padding-bottom: 48px; /* カードとカードの隙間（ここに矢印が入る） */
}

/* 最後のステップは下の隙間をなくす */
.cs-card-step-item:last-child {
    padding-bottom: 0;
}

/* ▼ カード間の「下向き矢印」をCSSで描画 ▼ */
.cs-card-step-item::after {
    content: '';
    position: absolute;
    bottom: 18px; /* 下部余白（48px）の真ん中付近に配置 */
    left: 50%;
    
    /* 矢印のサイズと線の太さ */
    width: 14px;
    height: 14px;
    border-right: 3px solid #cbd5e1;
    border-bottom: 3px solid #cbd5e1;
    
    /* 要素を中央にずらし、45度回転させて「∨」の形を作る */
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
}

.cs-card-step-item:last-child::after {
    display: none;
}

/* =========================================
   カード本体のデザイン
========================================= */
.cs-card-step-box {
    background-color: #ffffff;
    border: 2px solid #e2e8f0; /* 未完了のグレー枠 */
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease; /* ホバーや状態変化のアニメーション */
}

/* =========================================
   カード内のヘッダー（STEP番号とタイトル）
========================================= */
.cs-card-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0; /* タイトル下の破線 */
}

.cs-card-step-num {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    background-color: #94a3b8; /* 未完了のグレー */
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 16px;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease;
}

.cs-card-step-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.4;
}

/* =========================================
   カード内の説明文
========================================= */
.cs-card-step-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */

/* ▼ 完了済（is-completed） ▼ */
.cs-card-step-item.is-completed .cs-card-step-num {
    background-color: #2589d0; /* バッジを青に */
}
.cs-card-step-item.is-completed::after {
    border-color: #2589d0; /* 次へ続く矢印を青に */
}

/* ▼ 現在地（is-active） ▼ */
.cs-card-step-item.is-active .cs-card-step-num {
    background-color: #2589d0;
}
.cs-card-step-item.is-active .cs-card-step-box {
    border-color: #2589d0; /* カードの枠線を青にして強調 */
    box-shadow: 0 8px 24px rgba(37, 137, 208, 0.15); /* フワッとした影 */
    transform: translateY(-2px); /* 少し上に浮き上がらせる */
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-card-step-item {
        padding-bottom: 40px; /* スマホでは隙間を少し詰める */
    }
    .cs-card-step-item::after {
        bottom: 14px;
        width: 10px;
        height: 10px;
    }
    .cs-card-step-box {
        padding: 20px 16px;
    }
    .cs-card-step-header {
        flex-direction: column;
        align-items: flex-start; /* 番号とタイトルを縦並びにする */
        gap: 8px;
    }
    .cs-card-step-num {
        font-size: 0.75rem;
        margin-right: 0;
    }
    .cs-card-step-title {
        font-size: 1rem;
    }
    .cs-card-step-desc {
        font-size: 0.9rem;
    }
}

レスポンシブ・実用型（ステップ・フロー・レスポンシブ）

PCとスマートフォン、それぞれのデバイスで最適な表示形式に自動で切り替わる、現代のWeb制作に必須の手法です。

ここでは、以下のレスポンシブ・実用型（ステップ・フロー・レスポンシブ）のデザイン例を記載しています。

レスポンシブ・実用型（ステップ・フロー・レスポンシブ）
  • PC横並び・スマホ縦並びの自動切り替え
  • スマホ特化の横スクロール（スワイプ対応）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

PC横並び・スマホ縦並びの自動切り替え

PCなどの広い画面では視認性の高い「横並び（フロー図）」として表示し、スマートフォンなどの狭い画面では画面外へのはみ出しを防ぐために「縦積み（タイムライン風）」へ自動的に変形する、現代のWeb制作において実用的で必須となる設計です。

  • 1
    お客様情報

    お名前やお届け先などの基本情報を入力します。

  • 2
    お支払い方法

    クレジットカードやコンビニ決済などからお選びください。

  • 3
    ご注文確認

    入力した内容とご注文金額の最終確認を行います。

  • 4
    完了

    ご注文完了となります。確認メールが送信されます。

HTMLコード表示
<div class="cs-resp-wrapper">
    <ul class="cs-resp-list">
        
        <li class="cs-resp-item is-completed">
            <div class="cs-resp-circle">1</div>
            <div class="cs-resp-content">
                <span class="cs-resp-title">お客様情報</span>
                <p class="cs-resp-desc">お名前やお届け先などの基本情報を入力します。</p>
            </div>
        </li>
        
        <li class="cs-resp-item is-active">
            <div class="cs-resp-circle">2</div>
            <div class="cs-resp-content">
                <span class="cs-resp-title">お支払い方法</span>
                <p class="cs-resp-desc">クレジットカードやコンビニ決済などからお選びください。</p>
            </div>
        </li>

        <li class="cs-resp-item">
            <div class="cs-resp-circle">3</div>
            <div class="cs-resp-content">
                <span class="cs-resp-title">ご注文確認</span>
                <p class="cs-resp-desc">入力した内容とご注文金額の最終確認を行います。</p>
            </div>
        </li>

        <li class="cs-resp-item">
            <div class="cs-resp-circle">4</div>
            <div class="cs-resp-content">
                <span class="cs-resp-title">完了</span>
                <p class="cs-resp-desc">ご注文完了となります。確認メールが送信されます。</p>
            </div>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・PC表示（横並び）の基本設定
========================================= */
.cs-resp-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 2em;
    padding: 20px 0;
}

.cs-resp-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================
   各ステップの項目（PC：横並び設定）
========================================= */
.cs-resp-item {
    flex: 1; /* 均等幅に割り付け */
    text-align: center;
    position: relative;
    padding: 0 12px; /* PC表示時のテキストの左右余白 */
}

/* ▼ 魔法のコード（PC用）：横に伸びる繋ぎ線 ▼ */
.cs-resp-item::after {
    content: '';
    position: absolute;
    top: 20px; /* 丸（40px）の中央の高さ */
    left: 50%; /* 自分の丸の中央からスタート */
    width: 100%; /* 次の丸の中央まで伸ばす */
    height: 3px;
    background-color: #e2e8f0; /* 未完了のグレー */
    z-index: 1;
}

.cs-resp-item:last-child::after {
    display: none; /* 最後のステップには線を引かない */
}

/* =========================================
   丸いアイコンとテキスト
========================================= */
.cs-resp-circle {
    position: relative;
    z-index: 2; /* 繋ぎ線より上に配置 */
    width: 40px;
    height: 40px;
    margin: 0 auto 16px; /* PCでは丸を中央揃えにして下に余白を空ける */
    background-color: #e2e8f0;
    border: 4px solid #ffffff; /* 隙間を作るための白枠 */
    color: #94a3b8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.cs-resp-title {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}

.cs-resp-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */
.cs-resp-item.is-completed .cs-resp-circle {
    background-color: #2589d0;
    color: #ffffff;
}
.cs-resp-item.is-completed::after {
    background-color: #2589d0;
}

.cs-resp-item.is-active .cs-resp-circle {
    background-color: #ffffff;
    border-color: #2589d0;
    color: #2589d0;
    box-shadow: 0 4px 12px rgba(37, 137, 208, 0.2);
}
.cs-resp-item.is-active .cs-resp-title {
    color: #2589d0;
}

/* =========================================
   レスポンシブ対応（スマホ表示：縦並びに変形）
========================================= */
@media screen and (max-width: 640px) {
    /* 1. リスト全体を縦積みにする */
    .cs-resp-list {
        display: block;
    }
    
    /* 2. 各項目を横並び（丸アイコンが左、テキストが右）に変形 */
    .cs-resp-item {
        display: flex;
        align-items: flex-start;
        text-align: left; /* テキストを左寄せに戻す */
        padding: 0 0 32px 0; /* 左右の余白を消し、下部に次のステップへの余白を作る */
    }
    
    /* 3. 丸アイコンの配置調整 */
    .cs-resp-circle {
        flex-shrink: 0; /* テキストが増えても丸を潰さない */
        margin: 0 16px 0 0; /* 下余白を消し、右側に余白を作る */
    }
    
    /* 4. ▼ 線を「横」から「縦」に切り替える ▼ */
    .cs-resp-item::after {
        top: 40px; /* 丸の真下からスタート */
        left: 20px; /* 丸の中央（40pxの半分）の位置 */
        transform: translateX(-50%); /* 完璧に中央に合わせる */
        width: 3px; /* 線の太さ */
        height: calc(100% - 40px); /* 次のステップまでの距離だけ縦に伸ばす */
    }
}

スマホ特化の横スクロール（スワイプ対応）

スマホ表示でもあえて「横並び」のレイアウトを維持し、ユーザーが指でスワイプして進捗を確認できる（親要素からはみ出た部分をスクロールさせる）モダンで省スペースな設計です。

アプリのような心地よい操作体験を提供できます。

  • 1
    基本情報
  • 2
    本人確認
  • 3
    お支払い
  • 4
    最終確認
  • 5
    登録完了
HTMLコード表示
<div class="cs-swipe-wrapper">
    <ul class="cs-swipe-list">
        
        <li class="cs-swipe-item is-completed">
            <div class="cs-swipe-circle">1</div>
            <span class="cs-swipe-title">基本情報</span>
        </li>
        
        <li class="cs-swipe-item is-completed">
            <div class="cs-swipe-circle">2</div>
            <span class="cs-swipe-title">本人確認</span>
        </li>

        <li class="cs-swipe-item is-active">
            <div class="cs-swipe-circle">3</div>
            <span class="cs-swipe-title">お支払い</span>
        </li>

        <li class="cs-swipe-item">
            <div class="cs-swipe-circle">4</div>
            <span class="cs-swipe-title">最終確認</span>
        </li>

        <li class="cs-swipe-item">
            <div class="cs-swipe-circle">5</div>
            <span class="cs-swipe-title">登録完了</span>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・横スクロールの設定
========================================= */
.cs-swipe-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    padding: 10px 0 20px 0; /* 下部にスクロールバー用の余白を確保 */
    
    /* ▼ 横スクロールを有効にする ▼ */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* iOS端末で滑らかにスクロールさせる */
}

/* カスタムスクロールバーの装飾（美しく見せるためのプロ仕様） */
.cs-swipe-wrapper::-webkit-scrollbar {
    height: 6px; /* スクロールバーの太さ */
}
.cs-swipe-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9; /* スクロールバーの背景色 */
    border-radius: 4px;
}
.cs-swipe-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* スクロールバーのつまみの色 */
    border-radius: 4px;
}

.cs-swipe-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    /* 画面幅が狭くてもリスト全体の幅を縮ませないための設定 */
    min-width: max-content; 
}

/* =========================================
   各ステップ項目
========================================= */
.cs-swipe-item {
    /* PC表示時は均等幅に、スマホ表示時は最小幅（120px）をキープしてはみ出させる */
    flex: 1; 
    min-width: 120px; 
    text-align: center;
    position: relative;
}

/* =========================================
   繋ぎのライン（疑似要素で描画）
========================================= */
.cs-swipe-item::after {
    content: '';
    position: absolute;
    top: 18px; /* 丸の高さ（36px）の半分 */
    left: 50%;
    width: 100%;
    height: 3px;
    background-color: #e2e8f0;
    z-index: 1;
}

.cs-swipe-item:last-child::after {
    display: none;
}

/* =========================================
   丸型アイコンとテキスト
========================================= */
.cs-swipe-circle {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background-color: #e2e8f0;
    border: 4px solid #ffffff; /* 繋ぎ線を切り抜くための白枠 */
    color: #94a3b8;
    font-weight: 800;
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.cs-swipe-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap; /* テキストの改行を防ぐ */
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */
.cs-swipe-item.is-completed .cs-swipe-circle {
    background-color: #2589d0;
    color: #ffffff;
}
.cs-swipe-item.is-completed::after {
    background-color: #2589d0;
}
.cs-swipe-item.is-completed .cs-swipe-title {
    color: #475569;
}

.cs-swipe-item.is-active .cs-swipe-circle {
    background-color: #ffffff;
    border-color: #2589d0;
    color: #2589d0;
    box-shadow: 0 0 0 4px rgba(37, 137, 208, 0.15);
}
.cs-swipe-item.is-active .cs-swipe-title {
    color: #2589d0;
    font-weight: 800;
}

Lステップ回答フォーム特化型

Lステップ（LINE連携ツール）のアンケートや診断フォームをCSSだけでリッチなUIに装飾するためのカスタムパターンです。

ここでは、以下のLステップ回答フォーム特化型のデザイン例を記載しています。

Lステップ回答フォーム特化型
  • フォーム上部固定の進捗バー（回答フォーム用）
  • 設問ステップ見出し（カスタムテンプレート）
  • ボタン型選択肢のフローデザイン

実際のデザインプレビューとHTML＆CSSコードを記載しています。

フォーム上部固定の進捗バー（回答フォーム用）

LステップをはじめとするLINEマーケティングのアンケートや診断フォームにおいて、「あと何問で終わるのか」をユーザーに視覚的に伝えることは、離脱率（カゴ落ち）を防ぎ、回答完了率を引き上げる最重要施策です。

現在 2 問目 / 全 5 問 40%

Q1. あなたの性別を教えてください。（回答済）

Q2. ご職業に最も近いものをお選びください。

↓ 下へスクロールできます ↓

Q3. 興味のあるジャンルを選択してください。

HTMLコード表示
<div class="cs-lstep-preview-box">

    <div class="cs-lstep-progress-wrapper">
        <div class="cs-lstep-progress-header">
            <span class="cs-lstep-progress-text">現在 <strong>2</strong> 問目 / 全 5 問</span>
            <span class="cs-lstep-progress-percent">40%</span>
        </div>
        
        <div class="cs-lstep-progress-bar-bg">
            <div class="cs-lstep-progress-bar-fill" style="width: 40%;"></div>
        </div>
    </div>
    <div class="cs-lstep-dummy-form">
        <p class="cs-lstep-dummy-q">Q1. あなたの性別を教えてください。（回答済）</p>
        <p class="cs-lstep-dummy-q">Q2. ご職業に最も近いものをお選びください。</p>
        
        <div style="height: 300px; display: flex; align-items: center; justify-content: center; color: #94a3b8; border: 2px dashed #cbd5e1; border-radius: 8px; margin-top: 24px;">
            ↓ 下へスクロールできます ↓
        </div>
        
        <p class="cs-lstep-dummy-q" style="margin-top: 24px;">Q3. 興味のあるジャンルを選択してください。</p>
    </div>

</div>
CSSコード表示
/* =========================================
   プレビュー用のスクロール箱（デモ用）
========================================= */
.cs-lstep-preview-box {
    width: 100%;
    max-width: 600px; /* フォームの一般的な横幅 */
    height: 400px;
    margin: 0 auto 2em;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #f8fafc;
    position: relative;
}

/* =========================================
   進捗バーの枠組み（上部固定の設定）
========================================= */
.cs-lstep-progress-wrapper {
    /* ▼ スクロールしても上部にピタッと張り付く ▼ */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100; /* フォームの他の要素より上に表示 */
    
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px); /* 背景を少しぼかして高級感を出す（iOS対応） */
    padding: 16px 20px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* =========================================
   テキスト部分（現在〇問目 / 〇%）
========================================= */
.cs-lstep-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.cs-lstep-progress-text {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 700;
}

/* 「現在〇問目」の数字だけを大きく強調 */
.cs-lstep-progress-text strong {
    font-size: 1.25rem;
    color: #06c755; /* LINE風のグリーン */
    margin: 0 4px;
}

.cs-lstep-progress-percent {
    font-size: 1rem;
    font-weight: 800;
    color: #06c755;
    letter-spacing: 0.05em;
}

/* =========================================
   バー（メーター）部分
========================================= */
.cs-lstep-progress-bar-bg {
    width: 100%;
    height: 8px; /* スマホでもタップし間違えない、細すぎず太すぎないサイズ */
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.cs-lstep-progress-bar-fill {
    height: 100%;
    /* 単色ではなくグラデーションにすることでリッチな印象に */
    background: linear-gradient(90deg, #34d399, #06c755);
    border-radius: 4px;
    /* 進捗が増えた際に、パッと変わるのではなく「ヌルッ」と伸びるアニメーション */
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================
   ダミーフォームの装飾（デモ用）
========================================= */
.cs-lstep-dummy-form {
    padding: 24px 20px 60px;
}

.cs-lstep-dummy-q {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    background-color: #ffffff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 16px;
}

設問ステップ見出し（カスタムテンプレート）

Lステップのデフォルトの回答フォームは、設問（Q1, Q2…）が単なるプレーンテキストで表示されるため、少し殺風景になりがちです。

見出し部分にCSSを当てて「バッジ」や「吹き出し」風に装飾するだけで、フォーム全体のクオリティが跳ね上がり、ユーザーに安心感を与えて離脱を防ぐことができます。

Q1

あなたの性別を教えてください。

STEP 02

ご職業に最も近いものをお選びください。

Q3

興味のあるジャンルをすべて選択してください。

HTMLコード表示
<div class="cs-lstep-q-wrapper">

    <div class="cs-lstep-q-heading cs-q-standard">
        <span class="cs-lstep-q-badge">Q1</span>
        <h3 class="cs-lstep-q-text">あなたの性別を教えてください。</h3>
    </div>

    <div class="cs-lstep-q-heading cs-q-ribbon">
        <span class="cs-lstep-q-badge-ribbon">STEP 02</span>
        <h3 class="cs-lstep-q-text">ご職業に最も近いものをお選びください。</h3>
    </div>

    <div class="cs-lstep-q-heading cs-q-bubble">
        <div class="cs-lstep-q-bubble-inner">
            <span class="cs-lstep-q-badge-circle">Q3</span>
            <h3 class="cs-lstep-q-text">興味のあるジャンルをすべて選択してください。</h3>
        </div>
    </div>

</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-lstep-q-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2em;
    display: flex;
    flex-direction: column;
    gap: 40px; /* デモ用に各見出しの間隔を広めに取っています */
}

/* =========================================
   パターン1：スタンダード（バッジ＋下線）
========================================= */
.cs-q-standard {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.cs-q-standard .cs-lstep-q-badge {
    background-color: #06c755; /* LINEグリーン */
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 4px;
    margin-right: 16px;
    flex-shrink: 0; /* テキストが長くなってもバッジを潰さない */
}

.cs-q-standard .cs-lstep-q-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.5;
}

/* =========================================
   パターン2：リボン風（立体的な折り返し）
========================================= */
.cs-q-ribbon {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border-radius: 4px;
    padding: 12px 16px 12px 0; /* 左側はリボンが来るので余白0 */
    border: 1px solid #e2e8f0;
}

.cs-lstep-q-badge-ribbon {
    position: relative;
    background-color: #0f172a; /* 高級感のあるダークネイビー */
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 6px 16px;
    margin-right: 16px;
    /* 左側に少しはみ出させる */
    left: -8px; 
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* リボンの「折り返し（影）」の部分を疑似要素で作る */
.cs-lstep-q-badge-ribbon::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    /* CSSのborderを使って直角三角形を作る */
    border-top: 8px solid #020617; /* より暗い色 */
    border-left: 8px solid transparent;
}

.cs-q-ribbon .cs-lstep-q-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.5;
}

/* =========================================
   パターン3：吹き出し風（選択肢への視線誘導）
========================================= */
.cs-q-bubble {
    position: relative;
    /* 吹き出しのしっぽ（三角形）の分の余白を下に取る */
    margin-bottom: 12px; 
}

.cs-lstep-q-bubble-inner {
    display: flex;
    align-items: center;
    background-color: #eff6ff; /* 淡いブルー */
    border: 2px solid #3b82f6; /* ブルーの枠線 */
    padding: 16px;
    border-radius: 8px;
}

/* 吹き出しの「しっぽ（下向き三角形）」を疑似要素で作る */
.cs-q-bubble::after {
    content: '';
    position: absolute;
    bottom: -12px; /* 枠の外へ配置 */
    left: 50%;
    transform: translateX(-50%);
    /* ボーダーを使って下向きの三角形を作る */
    border-top: 12px solid #3b82f6;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
}

/* 三角形の内側（白抜き部分）をもう一つの疑似要素で作る */
.cs-q-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px; /* 少し上にずらす */
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #eff6ff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    z-index: 1; /* 青い三角形より上に重ねる */
}

.cs-lstep-q-badge-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
}

.cs-q-bubble .cs-lstep-q-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.5;
}

/* =========================================
   レスポンシブ対応（スマホ表示）
========================================= */
@media screen and (max-width: 640px) {
    .cs-q-standard .cs-lstep-q-text,
    .cs-q-ribbon .cs-lstep-q-text,
    .cs-q-bubble .cs-lstep-q-text {
        font-size: 0.95rem; /* スマホでは文字サイズを調整 */
    }
    
    .cs-lstep-q-bubble-inner {
        padding: 12px;
    }
    
    .cs-lstep-q-badge-circle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        margin-right: 12px;
    }
}

ボタン型選択肢のフローデザイン

スマートフォンの小さな画面において、ブラウザ標準の小さなラジオボタン（丸いポッチ）はタップしづらく、ユーザーのストレス（離脱）に直結します。

HTMLコード表示
<div class="cs-lstep-choice-wrapper">
    
    <div class="cs-lstep-choice-grid">
        <label class="cs-lstep-choice-label">
            <input type="radio" name="lstep-q1" class="cs-lstep-choice-radio">
            <span class="cs-lstep-choice-box">はい</span>
        </label>
        
        <label class="cs-lstep-choice-label">
            <input type="radio" name="lstep-q1" class="cs-lstep-choice-radio">
            <span class="cs-lstep-choice-box">いいえ</span>
        </label>
    </div>

    <div class="cs-lstep-choice-column">
        <label class="cs-lstep-choice-label">
            <input type="radio" name="lstep-q2" class="cs-lstep-choice-radio">
            <span class="cs-lstep-choice-box">Webデザインの基礎から学びたい</span>
        </label>
        
        <label class="cs-lstep-choice-label">
            <input type="radio" name="lstep-q2" class="cs-lstep-choice-radio">
            <span class="cs-lstep-choice-box">実践的なCSSアニメーションを習得したい</span>
        </label>
    </div>

</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-lstep-choice-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2em;
}

/* 2列レイアウト（短い回答用） */
.cs-lstep-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

/* 1列レイアウト（長い回答用） */
.cs-lstep-choice-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =========================================
   ラジオボタンの非表示化（必須設定）
========================================= */
.cs-lstep-choice-radio {
    display: none; /* デフォルトの丸いボタンを完全に隠す */
}

/* =========================================
   ボタン本体のデザイン
========================================= */
.cs-lstep-choice-label {
    display: block;
    cursor: pointer;
    /* タップ時のハイライト（青い半透明の枠）を無効化 */
    -webkit-tap-highlight-color: transparent; 
}

.cs-lstep-choice-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px 16px 20px; /* 右側にチェックマーク用の余白を確保 */
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #475569;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

/* PC等でのホバーアクション */
.cs-lstep-choice-label:hover .cs-lstep-choice-box {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* =========================================
   選択時（:checked）のスタイル変化
========================================= */
.cs-lstep-choice-radio:checked + .cs-lstep-choice-box {
    background-color: #f0fdf4; /* ごく薄いグリーン背景 */
    border-color: #06c755; /* LINEグリーンの枠線 */
    color: #06c755; /* 文字色もグリーンに */
    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.15); /* グリーンの影 */
}

/* ▼ 選択時に右側に現れる「チェックマーク（✔︎）」 ▼ */
.cs-lstep-choice-radio:checked + .cs-lstep-choice-box::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 6px;
    height: 12px;
    /* CSSのborderを使ってチェックマークを描画 */
    border-right: 3px solid #06c755;
    border-bottom: 3px solid #06c755;
    transform: translateY(-60%) rotate(45deg);
    /* ふわっと現れるアニメーション */
    animation: cs-lstep-check-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cs-lstep-check-pop {
    0% { transform: translateY(-60%) rotate(45deg) scale(0); opacity: 0; }
    100% { transform: translateY(-60%) rotate(45deg) scale(1); opacity: 1; }
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-lstep-choice-box {
        font-size: 0.95rem;
        padding: 14px 36px 14px 16px;
    }
}

まとめ

ここでは全体のまとめを記載しておきます。

本記事のまとめ
  • シンプル丸型線繋ぎ
    flex: 1で均等配置し、疑似要素::afterでステップ間の中央を結ぶ直線を描画した基本形。
  • 連結する矢印リボン
    clip-pathで要素を矢印型に切り抜き、ネガティブマージンで連結させる崩れにくい設計。
  • アイコン主体の進捗プログレスバー
    インラインSVGのcurrentColorを活用し、CSSのみでアイコンと枠の色を同期・変更するデザイン。
  • 左ライン・タイムライン風
    padding-leftで左側に余白を設け、position: absoluteでノードと縦の繋ぎ線を配置する時系列レイアウト。
  • センターライン・交互配置型
    中央に直線を配置し、:nth-child(odd)および:nth-child(even)を用いて左右交互にコンテンツを振り分けるレイアウト。
  • 矢印付きカード型プロセス
    各ステップを囲み枠とし、borderとtransform: rotateで作成した下向き矢印をカード間に配置する構成。
  • PC横・スマホ縦の自動切り替え
    メディアクエリを利用し、疑似要素の直線のwidthとheightを入れ替えることで、伸びる方向を横から縦へ動的に変更する設計。
  • スマホ特化の横スクロール
    overflow-x: autoとmin-widthを組み合わせ、画面幅が狭い場合でも横並びを維持し、スワイプで進捗を確認させる省スペース型。
  • フォーム上部固定の進捗バー
    position: stickyとbackdrop-filterで画面上部に追従させ、transitionで進捗バーが滑らかに伸びるアニメーションを付与。
  • 設問ステップ見出し
    flex-shrink: 0による変形防止や、borderを利用したリボンの折り返し・吹き出しのしっぽ描画を行う見出しテンプレート。
  • ボタン型選択肢のフローデザイン
    非表示のラジオボタンと隣接兄弟結合子（+）を連動させ、選択時に背景色とチェックマーク（✔︎）をCSSアニメーションで表示するハック。

よくある質問（FAQ）

丸いアイコン同士を繋ぐ「線」が最初や最後の要素からはみ出してしまうのはなぜですか？

疑似要素（::beforeや::after）の引き方と、:last-childの処理で解決できます。

リスト全体（ulなど）の背景として1本の長い線を引いてしまうと、端の処理が難しくなります。

現在の主流は、各ステップ項目（li）の疑似要素で「自分の中心から次の要素の中心まで（幅100%）」の線を引き、最後の要素（:last-child::after）に対してdisplay: none;やcontent: none;を指定して線を消すという手法です。

これにより、ステップ数が増減しても絶対に線がはみ出さない美しい設計になります。

スマホで見たときに、テキストが改行されて丸いアイコン（STEP番号）が縦長に潰れて（楕円形に）なってしまいます。

丸いアイコンのCSSにflex-shrink: 0;を追加してください。

横並びレイアウトを作る際によく使われるdisplay: flex;は、デフォルトで「画面幅が狭い場合、子要素を自動的に縮小して収めようとする」性質を持っています。

テキストの分量が多いと、ブラウザが気を利かせてアイコン側を押し潰してしまうのが原因です。

アイコンの要素にflex-shrink: 0;を指定することで、「どれだけ幅が狭くてもこの要素だけは絶対に縮めない」という命令になり、綺麗な真円をキープできます。

ステップの数が増減した時に、HTMLの番号（1, 2, 3…）を毎回書き直すのが面倒です。CSSで自動化できますか？

はい、CSSの「カウンター機能（counter-resetとcounter-increment）」を使えば完全自動化が可能です。

親要素（ulなど）にcounter-reset: step-counter;を指定して数値をリセットし、各ステップ（li）にcounter-increment: step-counter;を指定します。

あとはアイコン部分の::beforeのcontentプロパティでcounter(step-counter)を呼び出すだけです。

この設計にしておけば、HTML上で項目をコピペして増やすだけで「4, 5, 6…」と自動で連番が振られるため、保守性が向上します。

PCでは横並びのステップバーを、スマホでは縦積み（タイムライン風）に切り替える一番スマートな方法は何ですか？

Flexboxの向きを縦に変え、繋ぎの線の「縦横の比率」をメディアクエリで入れ替える方法です。

PC版ではflex-direction: row;（横並び）で、疑似要素の線をwidth: 100%; height: 2px;（横長）に設定します。

そして、スマホ版（ブレイクポイント以下）のメディアクエリ（@media）内でflex-direction: column;（縦積み）に切り替え、疑似要素の線をwidth: 2px; height: 100%;（縦長）に上書きします。

HTMLの構造を一切変えずに、CSSだけで線の伸びる方向を90度回転させるのが最良のレスポンシブ設計です。

「完了済」「現在地」「未完了」など、ステップの進行状況に応じて色を変えるにはどう設計すべきですか？

状態を表す専用の「クラス（class）」を用意し、それをHTMLに付与することで制御します。

ベースとなるCSS（未完了のグレー状態など）を作った上で、.is-completed（完了済のブルー）や.is-active（現在地の強調）といったステータスクラスをCSS側で用意しておきます。

WordPressなどのCMSやJavaScriptが介入するシステムにおいては、現在の進行状況を判定してHTMLのliタグに該当するクラスを動的に付与する（例：<li class="step-item is-active">）だけで、あらかじめ定義しておいた色がパッと適用されるという設計にするのが管理しやすく安全です。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次