初心者でも簡単！HTMLで3カラムレイアウトを作る方法｜flexを使ったやり方

html

ホームページやブログを作っていて、「サイドバーを左右に置いて真ん中にメイン記事を配置したい」と思ったことはありませんか？

これがいわゆる3カラムレイアウトです。

でも、実際に作ろうとすると、

  • 「どのHTMLタグを使えばいいの？」
  • 「CSSでどうやって3つに分けるの？」
  • 「スマホでも見やすくするにはどうしたらいい？」
  • 「昔のやり方と今のやり方の違いは？」

そんな疑問を持つ方も多いのではないでしょうか。

この記事では、初心者の方にもわかりやすく、HTMLとCSSを使って3カラムレイアウトを作る方法を詳しく解説します。

スポンサーリンク

3カラムレイアウトとは？

3カラムレイアウトの構成

3カラムレイアウトとは、ウェブページを縦に3つの領域に分けるデザイン手法です。

┌─────────────────────────────────────┐
│           ヘッダー                   │
├─────────┬─────────────┬─────────┤
│         │              │         │
│ 左カラム │ メインコンテンツ │ 右カラム │
│         │              │         │
│         │              │         │
└─────────┴─────────────┴─────────┘

各カラムの役割

左カラム（サイドバー）：

  • ナビゲーションメニュー
  • カテゴリー一覧
  • 広告バナー
  • 検索フォーム

メインコンテンツ：

  • 記事本文
  • 商品情報
  • 主要な情報

右カラム（サイドバー）：

  • 関連記事
  • 人気記事
  • 広告
  • SNSリンク

3カラムレイアウトの利点

ユーザビリティ

  • 情報の整理：コンテンツが分類されて見やすい
  • ナビゲーション：サイドバーから他のページへ移動しやすい
  • スキャン性：必要な情報を素早く見つけられる

運営面

  • 広告効果：サイドバーに広告を配置できる
  • SEO効果：関連リンクでサイト内回遊が促進
  • コンテンツ分離：メインとサブ情報を明確に区別

3カラムレイアウトが使われるサイト

  • ニュースサイト：記事 + カテゴリー + 関連記事
  • ブログ：記事 + アーカイブ + プロフィール
  • ECサイト：商品 + カテゴリー + おすすめ
  • 企業サイト：コンテンツ + メニュー + お知らせ

HTMLの基本構造を作成する

基本的なHTML構造

まずは、3つのカラム（左カラム・中央メイン・右カラム）をそれぞれ<div>で作ります：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3カラムレイアウト</title>
</head>
<body>
    <header>
        <h1>サイトタイトル</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">会社概要</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <aside class="left-sidebar">
            <h2>左サイドバー</h2>
            <ul>
                <li><a href="#category1">カテゴリー1</a></li>
                <li><a href="#category2">カテゴリー2</a></li>
                <li><a href="#category3">カテゴリー3</a></li>
            </ul>
        </aside>

        <main class="main-content">
            <h2>メインコンテンツ</h2>
            <article>
                <h3>記事タイトル</h3>
                <p>ここに記事の本文が入ります。メインコンテンツエリアは最も重要な情報を表示する場所です。</p>
            </article>
        </main>

        <aside class="right-sidebar">
            <h2>右サイドバー</h2>
            <div class="widget">
                <h3>関連記事</h3>
                <ul>
                    <li><a href="#article1">記事1</a></li>
                    <li><a href="#article2">記事2</a></li>
                    <li><a href="#article3">記事3</a></li>
                </ul>
            </div>
        </aside>
    </div>

    <footer>
        <p>&copy; 2024 サイト名. All rights reserved.</p>
    </footer>
</body>
</html>

構造の詳細解説

セマンティックHTMLの使用

適切なタグの選択：

  • <header>：サイトのヘッダー部分
  • <nav>：ナビゲーションメニュー
  • <main>：メインコンテンツ
  • <aside>：サイドバー（補足情報）
  • <article>：記事コンテンツ
  • <footer>：フッター部分

クラス名の付け方

わかりやすい命名：

  • container：全体を包む親要素
  • left-sidebar：左サイドバー
  • main-content：メインコンテンツ
  • right-sidebar：右サイドバー

より詳細なHTML構造の例

<div class="container">
    <aside class="left-sidebar">
        <section class="widget">
            <h3>カテゴリー</h3>
            <ul class="category-list">
                <li><a href="#tech">テクノロジー</a></li>
                <li><a href="#design">デザイン</a></li>
                <li><a href="#marketing">マーケティング</a></li>
            </ul>
        </section>
        
        <section class="widget">
            <h3>検索</h3>
            <form class="search-form">
                <input type="search" placeholder="キーワード検索">
                <button type="submit">検索</button>
            </form>
        </section>
    </aside>

    <main class="main-content">
        <article class="post">
            <header class="post-header">
                <h1>記事のタイトル</h1>
                <div class="post-meta">
                    <time datetime="2024-01-15">2024年1月15日</time>
                    <span class="category">テクノロジー</span>
                </div>
            </header>
            
            <div class="post-content">
                <p>記事の本文がここに入ります。</p>
                <h2>見出し2</h2>
                <p>さらに詳しい内容...</p>
            </div>
        </article>
    </main>

    <aside class="right-sidebar">
        <section class="widget">
            <h3>人気記事</h3>
            <ul class="popular-posts">
                <li><a href="#post1">人気記事1</a></li>
                <li><a href="#post2">人気記事2</a></li>
                <li><a href="#post3">人気記事3</a></li>
            </ul>
        </section>
        
        <section class="widget ad-widget">
            <h3>広告</h3>
            <div class="ad-banner">
                <img src="ad-banner.jpg" alt="広告バナー">
            </div>
        </section>
    </aside>
</div>

CSSでFlexboxを使った3カラムレイアウト

基本的なFlexboxレイアウト

/* 基本的なリセットとスタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* ヘッダーのスタイル */
header {
    background-color: #333;
    color: white;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

header h1 {
    text-align: center;
    margin-bottom: 1rem;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

header nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

header nav a:hover {
    background-color: #555;
}

/* メインコンテナのFlexboxレイアウト */
.container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    gap: 2rem;
}

/* 左サイドバー */
.left-sidebar {
    width: 250px;
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    height: fit-content;
}

/* メインコンテンツ */
.main-content {
    flex: 1;
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 右サイドバー */
.right-sidebar {
    width: 250px;
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    height: fit-content;
}

/* フッター */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
}

各プロパティの詳細解説

Flexboxの基本プロパティ

display: flex：

  • 親要素をフレックスコンテナにする
  • 子要素が横並びになる

flex: 1：

  • 利用可能な空間を自動的に埋める
  • メインコンテンツが可変幅になる

width: 250px：

  • サイドバーの幅を固定
  • 一定の幅を確保

gap: 2rem：

  • 各カラム間の間隔を指定
  • marginを個別に設定する必要がない

より詳細なスタイリング

/* サイドバーのウィジェット */
.widget {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.widget h3 {
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.2rem;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

.widget ul {
    list-style: none;
}

.widget li {
    margin-bottom: 0.5rem;
}

.widget a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
}

.widget a:hover {
    color: #007bff;
}

/* メインコンテンツのスタイル */
.post-header {
    margin-bottom: 2rem;
}

.post-header h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
}

.post-meta {
    color: #666;
    font-size: 0.9rem;
}

.post-meta time {
    margin-right: 1rem;
}

.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.post-content h2 {
    margin: 2rem 0 1rem 0;
    color: #333;
}

.post-content p {
    margin-bottom: 1rem;
}

/* 検索フォーム */
.search-form {
    display: flex;
}

.search-form input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
}

.search-form button {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.search-form button:hover {
    background-color: #0056b3;
}

/* 広告ウィジェット */
.ad-widget .ad-banner {
    text-align: center;
}

.ad-widget .ad-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

レスポンシブデザインの実装

基本的なレスポンシブ対応

/* タブレット向け（768px以下） */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .left-sidebar,
    .right-sidebar {
        width: 100%;
        order: 2;
    }
    
    .main-content {
        order: 1;
    }
    
    header nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* スマートフォン向け（480px以下） */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .left-sidebar,
    .main-content,
    .right-sidebar {
        padding: 1rem;
    }
    
    .post-header h1 {
        font-size: 1.5rem;
    }
    
    .widget {
        margin-bottom: 1rem;
    }
}

詳細なレスポンシブ設定

/* デスクトップ向け（1200px以上） */
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
    
    .left-sidebar,
    .right-sidebar {
        width: 280px;
    }
}

/* ラップトップ向け（992px〜1199px） */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 1100px;
    }
    
    .left-sidebar,
    .right-sidebar {
        width: 220px;
    }
}

/* タブレット向け（768px〜991px） */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .container {
        flex-direction: column;
    }
    
    .left-sidebar,
    .right-sidebar {
        width: 100%;
        display: flex;
        gap: 1rem;
    }
    
    .left-sidebar .widget,
    .right-sidebar .widget {
        flex: 1;
    }
    
    .main-content {
        order: -1;
    }
}

/* スマートフォン向け（767px以下） */
@media screen and (max-width: 767px) {
    .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .left-sidebar,
    .right-sidebar,
    .main-content {
        width: 100%;
    }
    
    .main-content {
        order: -1;
    }
    
    /* スマホでサイドバーを折りたたみ可能にする */
    .sidebar-toggle {
        display: block;
        width: 100%;
        padding: 0.5rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        margin-bottom: 1rem;
        cursor: pointer;
    }
    
    .sidebar-content {
        display: none;
    }
    
    .sidebar-content.active {
        display: block;
    }
}

実際に使えるサンプルコード

完全なHTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3カラムレイアウト - 実用例</title>
    <style>
        /* 基本スタイル */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        /* ヘッダー */
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            text-align: center;
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-weight: 300;
        }

        header nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 2rem;
        }

        header nav a {
            color: white;
            text-decoration: none;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            transition: all 0.3s ease;
            background-color: rgba(255,255,255,0.1);
        }

        header nav a:hover {
            background-color: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        /* メインコンテナ */
        .container {
            display: flex;
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
            gap: 2rem;
        }

        /* 左サイドバー */
        .left-sidebar {
            width: 280px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            height: fit-content;
            overflow: hidden;
        }

        /* メインコンテンツ */
        .main-content {
            flex: 1;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        /* 右サイドバー */
        .right-sidebar {
            width: 280px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            height: fit-content;
            overflow: hidden;
        }

        /* ウィジェット */
        .widget {
            padding: 1.5rem;
            border-bottom: 1px solid #eee;
        }

        .widget:last-child {
            border-bottom: none;
        }

        .widget h3 {
            margin-bottom: 1rem;
            color: #333;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .widget h3::before {
            content: "▶";
            color: #667eea;
            font-size: 0.8rem;
        }

        .widget ul {
            list-style: none;
        }

        .widget li {
            margin-bottom: 0.75rem;
            padding-left: 1rem;
            position: relative;
        }

        .widget li::before {
            content: "•";
            color: #667eea;
            position: absolute;
            left: 0;
        }

        .widget a {
            color: #555;
            text-decoration: none;
            transition: color 0.3s;
        }

        .widget a:hover {
            color: #667eea;
        }

        /* 記事スタイル */
        .article {
            padding: 2rem;
        }

        .article h1 {
            font-size: 2.2rem;
            color: #333;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        .article-meta {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 2rem;
            display: flex;
            gap: 1rem;
        }

        .article-meta span {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .article-content h2 {
            margin: 2rem 0 1rem 0;
            color: #333;
            font-size: 1.6rem;
        }

        .article-content p {
            margin-bottom: 1.5rem;
        }

        /* 検索フォーム */
        .search-form {
            display: flex;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #ddd;
        }

        .search-form input {
            flex: 1;
            padding: 0.75rem;
            border: none;
            font-size: 1rem;
        }

        .search-form button {
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            transition: opacity 0.3s;
        }

        .search-form button:hover {
            opacity: 0.9;
        }

        /* フッター */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 2rem 0;
            margin-top: 2rem;
        }

        /* レスポンシブデザイン */
        @media screen and (max-width: 768px) {
            .container {
                flex-direction: column;
                gap: 1rem;
            }
            
            .left-sidebar,
            .right-sidebar {
                width: 100%;
                order: 2;
            }
            
            .main-content {
                order: 1;
            }
            
            header nav ul {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            header h1 {
                font-size: 2rem;
            }
        }

        @media screen and (max-width: 480px) {
            .container {
                margin: 1rem auto;
                padding: 0 0.5rem;
            }
            
            .article {
                padding: 1.5rem;
            }
            
            .article h1 {
                font-size: 1.8rem;
            }
            
            .widget {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <h1>My Website</h1>
            <nav>
                <ul>
                    <li><a href="#home">ホーム</a></li>
                    <li><a href="#about">会社概要</a></li>
                    <li><a href="#services">サービス</a></li>
                    <li><a href="#contact">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="container">
        <aside class="left-sidebar">
            <div class="widget">
                <h3>カテゴリー</h3>
                <ul>
                    <li><a href="#tech">テクノロジー</a></li>
                    <li><a href="#design">デザイン</a></li>
                    <li><a href="#marketing">マーケティング</a></li>
                    <li><a href="#business">ビジネス</a></li>
                    <li><a href="#lifestyle">ライフスタイル</a></li>
                </ul>
            </div>
            
            <div class="widget">
                <h3>検索</h3>
                <form class="search-form">
                    <input type="search" placeholder="キーワードを入力...">
                    <button type="submit">検索</button>
                </form>
            </div>
            
            <div class="widget">
                <h3>アーカイブ</h3>
                <ul>
                    <li><a href="#2024-01">2024年1月</a></li>
                    <li><a href="#2023-12">2023年12月</a></li>
                    <li><a href="#2023-11">2023年11月</a></li>
                    <li><a href="#2023-10">2023年10月</a></li>
                </ul>
            </div>
        </aside>

        <main class="main-content">
            <article class="article">
                <h1>3カラムレイアウトの作り方</h1>
                <div class="article-meta">
                    <span>📅 2024年1月15日</span>
                    <span>👤 管理者</span>
                    <span>📁 テクノロジー</span>
                </div>
                <div class="article-content">
                    <p>このページでは、HTML と CSS を使って3カラムレイアウトを作る方法について詳しく解説しています。</p>
                    
                    <h2>Flexboxを使うメリット</h2>
                    <p>Flexboxを使うことで、従来の方法よりも簡単で柔軟なレイアウトが作成できます。特に以下のような利点があります：</p>
                    
                    <ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
                        <li>コードがシンプルで理解しやすい</li>
                        <li>レスポンシブ対応が簡単</li>
                        <li>高さを自動で揃えられる</li>
                        <li>並び順を自由に変更できる</li>
                    </ul>
                    
                    <h2>実装のポイント</h2>
                    <p>3カラムレイアウトを作る際のポイントは以下の通りです：</p>
                    
                    <ol style="margin-left: 2rem; margin-bottom: 1.5rem;">
                        <li>セマンティックなHTMLを使用する</li>
                        <li>Flexboxで横並びレイアウトを作る</li>
                        <li>レスポンシブデザインを考慮する</li>
                        <li>アクセシビリティを配慮する</li>
                    </ol>
                    
                    <p>このような構造にすることで、検索エンジンにも優しく、ユーザビリティの高いサイトが作成できます。</p>
                </div>
            </article>
        </main>

        <aside class="right-sidebar">
            <div class="widget">
                <h3>人気記事</h3>
                <ul>
                    <li><a href="#popular1">HTML基礎講座</a></li>
                    <li><a href="#popular2">CSS Grid入門</a></li>
                    <li><a href="#popular3">JavaScript基本文法</a></li>
                    <li><a href="#popular4">レスポンシブデザイン</a></li>
                    <li><a href="#popular5">SEO対策の基本</a></li>
                </ul>
            </div>
            
            <div class="widget">
                <h3>最新記事</h3>
                <ul>
                    <li><a href="#latest1">モダンCSS入門</a></li>
                    <li><a href="#latest2">Webアクセシビリティ</a></li>
                    <li><a href="#latest3">パフォーマンス最適化</a></li>
                </ul>
            </div>
            
            <div class="widget">
                <h3>タグ</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <a href="#html" style="background-color: #e3f2fd; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; text-decoration: none; color: #1976d2;">HTML</a>
                    <a href="#css" style="background-color: #f3e5f5; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; text-decoration: none; color: #7b1fa2;">CSS</a>
                    <a href="#js" style="background-color: #fff3e0; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; text-decoration: none; color: #f57c00;">JavaScript</a>
                    <a href="#responsive" style="background-color: #e8f5e8; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.9rem; text-decoration: none; color: #388e3c;">レスポンシブ</a>
                </div>
            </div>
        </aside>
    </div>

    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

より高度なレイアウトテクニック

1. 可変幅と固定幅の組み合わせ

/* パターン1: 左固定、中央可変、右固定 */
.container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 1rem;
}

.left-sidebar {
    width: 200px; /* 固定幅 */
    flex-shrink: 0; /* 縮小しない */
}

.main-content {
    flex: 1; /* 残り空間を全て使用 */
    min-width: 0; /* Flexboxでの文字溢れ防止 */
}

.right-sidebar {
    width: 250px; /* 固定幅 */
    flex-shrink: 0; /* 縮小しない */
}

/* パターン2: 左固定、中央と右が可変 */
.container-pattern2 {
    display: flex;
    gap: 1rem;
}

.left-sidebar-pattern2 {
    width: 200px;
    flex-shrink: 0;
}

.main-content-pattern2 {
    flex: 2; /* 2の比率 */
}

.right-sidebar-pattern2 {
    flex: 1; /* 1の比率 */
}

2. 最小幅・最大幅の設定

.container {
    display: flex;
    max-width: 1400px;
    min-width: 320px;
    margin: 0 auto;
    gap: 1rem;
}

.left-sidebar {
    width: 250px;
    min-width: 200px;
    max-width: 300px;
}

.main-content {
    flex: 1;
    min-width: 300px; /* 最小幅を設定 */
    max-width: 800px; /* 最大幅を設定 */
}

.right-sidebar {
    width: 250px;
    min-width: 200px;
    max-width: 300px;
}

3. 高さの調整

/* 等しい高さにする */
.container {
    display: flex;
    align-items: stretch; /* デフォルトの動作 */
}

/* 最も高い要素に合わせる */
.left-sidebar,
.main-content,
.right-sidebar {
    display: flex;
    flex-direction: column;
}

/* サイドバーを画面の高さに固定（スティッキー） */
.sticky-sidebar {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow-y: auto;
}

古い方法との比較

1. Table レイアウト（非推奨）

<!-- 古い方法：使わないでください -->
<table style="width: 100%;">
    <tr>
        <td style="width: 200px;">左サイドバー</td>
        <td>メインコンテンツ</td>
        <td style="width: 200px;">右サイドバー</td>
    </tr>
</table>

問題点：

  • セマンティックでない（テーブルはデータ表示用）
  • レスポンシブ対応が困難
  • アクセシビリティが悪い
  • SEOに不利

2. Float レイアウト（古い方法）

/* 古い方法：メンテナンスが大変 */
.container::after {
    content: "";
    display: table;
    clear: both;
}

.left-sidebar {
    float: left;
    width: 200px;
}

.right-sidebar {
    float: right;
    width: 200px;
}

.main-content {
    margin: 0 220px; /* 両サイドの余白 */
}

問題点：

  • clearfixが必要
  • レスポンシブ対応が複雑
  • 並び順の変更が困難

3. Flexbox（現代の方法）

/* 現代の方法：推奨 */
.container {
    display: flex;
    gap: 1rem;
}

.left-sidebar,
.right-sidebar {
    width: 200px;
}

.main-content {
    flex: 1;
}

利点：

  • コードがシンプル
  • レスポンシブ対応が簡単
  • 並び順の変更が容易
  • 高さの調整が簡単

実用的なレスポンシブパターン

パターン1：スマホで縦積み

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .left-sidebar,
    .right-sidebar {
        width: 100%;
        order: 2; /* メインコンテンツの後 */
    }
    
    .main-content {
        order: 1; /* 最初に表示 */
    }
}

パターン2：タブレットで2カラム

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        flex-wrap: wrap;
    }
    
    .left-sidebar {
        width: 100%;
        order: 1;
    }
    
    .main-content {
        flex: 2;
        order: 2;
    }
    
    .right-sidebar {
        flex: 1;
        order: 3;
    }
}

パターン3：折りたたみ可能なサイドバー

.sidebar-toggle {
    display: none;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .sidebar-toggle {
        display: block;
    }
    
    .sidebar-content {
        display: none;
    }
    
    .sidebar-content.active {
        display: block;
    }
}

<aside class="left-sidebar">
    <button class="sidebar-toggle" onclick="toggleSidebar('left')">
        メニューを開く
    </button>
    <div class="sidebar-content" id="leftSidebarContent">
        <!-- サイドバーの内容 -->
    </div>
</aside>

<script>
function toggleSidebar(side) {
    const content = document.getElementById(side + 'SidebarContent');
    const toggle = content.previousElementSibling;
    
    content.classList.toggle('active');
    
    if (content.classList.contains('active')) {
        toggle.textContent = 'メニューを閉じる';
    } else {
        toggle.textContent = 'メニューを開く';
    }
}
</script>

パフォーマンスとアクセシビリティ

パフォーマンス最適化

CSS最適化

/* GPUアクセラレーションを活用 */
.sidebar {
    transform: translateZ(0);
    will-change: transform;
}

/* 無駄な再描画を避ける */
.container {
    contain: layout style;
}

/* クリティカルCSS */
.container {
    display: flex; /* 最初に読み込まれるべきスタイル */
}

画像最適化

<!-- レスポンシブ画像 -->
<picture>
    <source media="(max-width: 768px)" srcset="small-image.jpg">
    <source media="(max-width: 1024px)" srcset="medium-image.jpg">
    <img src="large-image.jpg" alt="説明">
</picture>

<!-- 遅延読み込み -->
<img src="image.jpg" alt="説明" loading="lazy">

アクセシビリティ向上

スキップリンク

<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}
</style>

ARIA ラベル

<div class="container" role="main">
    <aside class="left-sidebar" 
           role="complementary" 
           aria-label="サイドバーメニュー">
        <!-- サイドバー内容 -->
    </aside>
    
    <main class="main-content" 
          role="main" 
          aria-label="メインコンテンツ">
        <!-- メイン内容 -->
    </main>
    
    <aside class="right-sidebar" 
           role="complementary" 
           aria-label="関連情報">
        <!-- サイドバー内容 -->
    </aside>
</div>

キーボードナビゲーション

/* フォーカス表示 */
a:focus,
button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* タブインデックスの調整 */
.main-content {
    /* メインコンテンツを最初にフォーカス */
}

よくある問題と解決法

問題1：サイドバーが短すぎる

症状：メインコンテンツが長いとサイドバーが短く見える

解決法：

.left-sidebar,
.right-sidebar {
    align-self: stretch; /* 親の高さに合わせる */
}

/* または */
.sidebar {
    min-height: 100vh; /* 画面の高さに合わせる */
}

問題2：コンテンツが画面からはみ出る

症状：固定幅のサイドバーでコンテンツが見切れる

解決法：

.main-content {
    min-width: 0; /* Flexboxでの幅制限を解除 */
    overflow-wrap: break-word; /* 長い単語を折り返し */
}

.container {
    min-width: 320px; /* 最小画面幅を設定 */
    overflow-x: auto; /* 横スクロールを許可 */
}

問題3：ガター（余白）が不揃い

症状：カラム間の余白が一定でない

解決法：

.container {
    gap: 2rem; /* 一定の余白を設定 */
}

/* または個別設定 */
.left-sidebar {
    margin-right: 1rem;
}

.right-sidebar {
    margin-left: 1rem;
}

問題4：Internet Explorer対応

症状：古いブラウザでFlexboxが効かない

解決法：

/* フォールバック */
.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* または条件付きコメント */
<!--[if IE]>
<style>
.container {
    display: table;
    width: 100%;
}
.left-sidebar,
.main-content,
.right-sidebar {
    display: table-cell;
    vertical-align: top;
}
</style>
<![endif]-->

まとめ：効果的な3カラムレイアウトの作り方

重要なポイント

HTMLの構造

  1. セマンティックなタグを使用する（main, aside など）
  2. 論理的な順序でコンテンツを配置する
  3. アクセシビリティを考慮した構造にする

CSSのレイアウト

  1. Flexboxを活用する（display: flex）
  2. gap プロパティで統一された余白を作る
  3. flex: 1でメインコンテンツを可変幅にする

レスポンシブ対応

  1. モバイルファーストで設計する
  2. メディアクエリで段階的にレイアウトを調整
  3. orderプロパティで表示順序を最適化

実装の流れ

ステップ作業内容重要度
1HTML構造の作成★★★
2基本的なFlexboxレイアウト★★★
3スタイリング★★☆
4レスポンシブ対応★★★
5アクセシビリティ対応★★☆

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました