【HTML,CSS】3カラムのレイアウトを解説

3カラムレイアウトは、Webデザインにおいて情報を効果的に整理し表示するための高度なレイアウト手法です。この記事では、3カラムレイアウトの基本概念、特徴、適した用途、メリット・デメリット、そして実践的なコード例を通じて、効果的な3カラムデザインの作成方法を紹介します。

はじめに
3カラムとは？
3カラムのレイアウト作成
まとめ

はじめに

この記事のコードをコピペして出力してみよう。

VSCodeのインストールがまだの方はこちら

3カラムとは？

3カラムレイアウトは、Webページのデザインにおいて主要なコンテンツを中央に配置し、その左右にサイドバーなどの補助的な情報を配置する形式です。

特徴

主要コンテンツが中央に配置される
左右両側にサイドバーがある
一度に多くの情報を表示できる

適している用途

ポータルサイト: 豊富な情報を効率的に提供
ECサイト: 商品情報と関連商品の表示
ニュースサイト: メイン記事と関連記事、カテゴリーの表示
大規模サイト: 充実したコンテンツ量をアピール

メリット

情報量の多さ: 一度に多くの情報を表示できる
回遊率の向上: 関連コンテンツへのリンクを多く提示できる
選択肢の提供: ユーザーに次の行動の選択肢を多く提示できる
サイト規模のアピール: 充実したコンテンツ量を示せる
広告効果: 適切に配置することでクリック率の向上が期待できる

デメリット

煩雑な印象: 3種類のコンテンツが並列するため、サイトが煩雑に見える可能性がある
レスポンシブ対応の難しさ: スマートフォン表示時に1カラムへの変換が必要
コンテンツ領域の狭さ: 各カラムのスペースが限られる
ユーザーの集中力低下: 多くの情報が同時に表示されるため、主要コンテンツへの集中が妨げられる可能性がある

3カラムレイアウトは、情報量の多いサイトに適していますが、デザインのバランスや使いやすさに十分な配慮が必要です。特に、モバイル対応を考慮した柔軟なデザイン構成が重要となります。

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

以下のページを作成します。

コード例

index.html
※クリックするとコードが表示されます。

index.html

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>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>3列レイアウト</h1>
      </header>
      <div class="content">
        <aside class="sidebar-left">
          <h2>左サイドバー</h2>
          <p>
            これは左サイドバーです。補足情報やナビゲーションに使用されることが多いです。
          </p>
        </aside>
        <main>
          <h2>メインコンテンツ</h2>
          <p>
            これはメインコンテンツエリアです。3列レイアウトの中央に位置し、主要な情報を表示します。
          </p>
        </main>
        <aside class="sidebar-right">
          <h2>右サイドバー</h2>
          <p>これは右サイドバーです。追加の情報や広告などに使用できます。</p>
        </aside>
      </div>
      <footer>
        <p>フッターコンテンツ</p>
      </footer>
    </div>
  </body>
</html>

styles.css
※クリックするとコードが表示されます。

styles.css

CSS

:root {
  --primary-color: #e74c3c;
  --secondary-color: #ecf0f1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo,
    メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  border-radius: 5px;
}

header {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

.content {
  display: flex;
  gap: 20px;
  flex: 1;
}

main,
aside {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

main {
  flex: 3;
}

.sidebar-left,
.sidebar-right {
  flex: 1;
}

h1,
h2 {
  margin-top: 0;
}

index.htmlの解説

HTML

<!DOCTYPE html>
<html lang="ja">

<!DOCTYPE html>: HTML5文書であることを宣言
<html lang="ja">: HTMLのルート要素、日本語文書であることを指定

HTML

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3列レイアウト</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<meta charset="UTF-8" />: 文字エンコーディングをUTF-8に設定
<meta name="viewport" ...>: レスポンシブデザインのためのビューポート設定
<title>: ページタイトルの設定
<link>: 外部CSSファイルの読み込み

HTML

<body>
  <div class="container">

<body>: 表示されるコンテンツの開始
<div class="container">: 全体を包むコンテナ

HTML

    <header>
      <h1>3列レイアウト</h1>
    </header>

<header>: ページのヘッダー部分
<h1>: ページの主要タイトル

HTML

    <div class="content">
      <aside class="sidebar-left">
        <h2>左サイドバー</h2>
        <p>これは左サイドバーです。補足情報やナビゲーションに使用されることが多いです。</p>
      </aside>
      <main>
        <h2>メインコンテンツ</h2>
        <p>これはメインコンテンツエリアです。3列レイアウトの中央に位置し、主要な情報を表示します。</p>
      </main>
      <aside class="sidebar-right">
        <h2>右サイドバー</h2>
        <p>これは右サイドバーです。追加の情報や広告などに使用できます。</p>
      </aside>
    </div>

<div class="content">: 3列構造を含む部分
<aside class="sidebar-left">: 左サイドバー
<main>: メインコンテンツエリア
<aside class="sidebar-right">: 右サイドバー

HTML

    <footer>
      <p>フッターコンテンツ</p>
    </footer>
  </div>
</body>
</html>

<footer>: ページのフッター部分
閉じタグ: </div>, </body>, </html>で各要素を適切に閉じる

このHTMLは3列レイアウトの基本的な構造を提供していますが、実際のレイアウトはCSSで制御する必要があります。

styles.cssの解説

CSS

:root {
  /* プライマリーカラー（主要な色）を定義 */
  --primary-color: #e74c3c; /* 赤色 */
  
  /* セカンダリーカラー（背景色）を定義 */
  --secondary-color: #ecf0f1; /* 薄いグレー */
}

カスタムプロパティを使用してカラーテーマを定義
--primary-color: 主要な色（赤系）
--secondary-color: 背景色（薄いグレー）

CSS

html, body {
  /* htmlとbodyの高さを100%に設定し、全体をフルハイトにする */
  height: 100%;
  
  /* デフォルトのマージンとパディングを0にリセット */
  margin: 0;
  padding: 0;
}

body {
  /* フォントファミリーを日本語フォントに設定 */
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo,
    メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  
  /* 背景色をセカンダリーカラーに設定 */
  background-color: var(--secondary-color);
  
  /* フレックスボックスレイアウトを使用して縦方向に並べる */
  display: flex;
  flex-direction: column;
}

height: 100%: フルハイトレイアウトを実現
margin: 0; padding: 0;: ブラウザのデフォルトマージンとパディングをリセット
font-family: 日本語フォントを優先的に使用
display: flex;: フレックスボックスレイアウトを使用

CSS

.container {
  /* 最大幅を1200pxに設定し、それ以上は広がらないようにする */
  max-width: 1200px;
  
  /* 幅を100%に設定して、親要素にフィットさせる */
  width: 100%;
  
  /* 中央揃えのためのマージン設定 */
  margin: 0 auto;
  
  /* 内側の余白を20pxに設定 */
  padding: 20px;
  
  /* 残りの空間を占めるように設定 */
  flex: 1;
  
  /* フレックスボックスレイアウトを使用して縦方向に並べる */
  display: flex;
  flex-direction: column;
}

max-width: 1200px;: コンテンツの最大幅を設定
margin: 0 auto;: 中央揃え
flex: 1;: 残りの空間を全て占めるように設定

CSS

header, footer {
  /* 背景色をプライマリーカラーに設定 */
  background-color: var(--primary-color);
  
  /* テキストの色を白に設定 */
  color: white;
  
  /* 内側の余白を20pxに設定 */
  padding: 20px;
  
  /* コーナーを丸くするための設定 */
  border-radius: 5px;
}

/* ヘッダーの下部マージンを20pxに設定 */
header {
  margin-bottom: 20px;
}

/* フッターの上部マージンを20pxに設定 */
footer {
  margin-top: 20px;
}

background-color: var(--primary-color);: カスタムプロパティを使用
border-radius: 5px;: 角を丸く

CSS

.content {
   /* フレックスボックスレイアウトで子要素を横並びにする */
   display: flex;

   /* 子要素間のスペースを20pxに設定 */
   gap: 20px;

   /* 残りの空間を占めるように設定 */
   flex: 1; 
}

/* メインコンテンツとサイドバー共通のスタイル */
main, aside {
   /* 背景色を白に設定 */
   background-color: white;

   /* 内側の余白を20pxに設定 */
   padding: 20px;

   /* コーナーを丸くするための設定 */
   border-radius: 5px;

   /* フレックスボックスレイアウトで縦方向に並べる */
   display: flex;
   flex-direction: column;
}

/* メインコンテンツがサイドバーよりも広くなるように設定（比率3）*/
main {
   flex: 3; 
}

/* 左右のサイドバーがメインコンテンツよりも狭くなるように設定（比率1）*/
.sidebar-left, .sidebar-right {
   flex: 1; 
}

.content: フレックスボックスを使用して3列レイアウトを実現
gap: 20px;: 列間のスペースを設定
main と aside: 背景色と角丸を設定
flex: 3; と flex: 1;: メインコンテンツとサイドバーの幅比を3:1:1に設定

CSS

h1, h2 {
   /* 見出しの上部マージンを削除して、隙間ができないようにする */
   margin-top: 0; 
}

見出しの上部マージンを削除

このCSSは3列レイアウトの基本的な構造を提供していますが、より複雑なレスポンシブデザインを実現するには、メディアクエリなどの追加が必要になる場合があります。

まとめ

3カラムレイアウトは、コンテンツを3つの縦列に配置するデザイン手法です。
主な特徴は情報の効率的な整理と視覚的な階層構造の提供です。
ニュースサイト、ポータルサイト、複雑な情報構造を持つウェブサイトに特に適しています。
メリットには多様な情報の同時表示とユーザーナビゲーションの向上があります。
デメリットとしては、モバイル対応の複雑さとデザインの難しさが挙げられます。
実装方法にはフロート、フレックスボックス、グリッドレイアウトなどがあります。

3カラムレイアウトは、その柔軟性と豊富な情報提示能力により、複雑なウェブサイトのデザインに適しています。適切に実装することで、ユーザーエクスペリエンスを向上させ、コンテンツの整理と優先順位付けを効果的に行うことができます。ただし、レスポンシブデザインへの対応には特に注意が必要です。