HTML・CSS
HTML/CSS入門編｜11章：カラムレイアウトの基本を学ぼう
INDEX
目次
前の章に戻る 次の章に進む

HTML/CSS入門編 11章 カラムレイアウトの基本を学ぼう

本章では、Webサイトのレイアウトの基本であるカラムレイアウトの作成方法について解説します。
演習素材について
 本章では、「11章カラムレイアウトの基本を学ぼう」フォルダ内の演習データを使用します。
「11章カラムレイアウトの基本を学ぼう」フォルダの中には、「single-column-lesson」と「2-column-lesson」「3-column-lesson」フォルダが入っています。
  • 「11章カラムレイアウトの基本を学ぼう」フォルダ
    • start：作業前のデータが入っています。
    • fin：完成データが入っています。
演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編 はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編 演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

【11-1】カラムレイアウトとは

  • Webサイトのカラムレイアウト（Column Layout）とは、ページ内のコンテンツを縦の列に分割してレイアウトする手法のことです。
  • 英語で「カラム（Column）」は「列」という意味です。
  • 日本語でカラムレイアウトのことを段組（だんぐみ）と言いますが、主に雑誌や新聞などの紙面のレイアウトに使う言葉です。
    • Webサイト制作においては、「カラム」「カラムレイアウト」と呼ぶことが一般的です。

カラムレイアウトの種類を知ろう

主なカラムレイアウトの種類には次のようなものがあります。
■ シングルカラムレイアウト
(17159)

ページ全体が1つの縦長のブロックで構成されているシンプルなレイアウト。
スマートフォン用のレイアウトとしてよく使われるが、PC版のレイアウトにも近年よく使われている。
■ 2カラムレイアウト
(17162)

メインカラム（メインコンテンツ）+サブカラム（サイドバー）の構成で縦2列に分割されたレイアウト。
多くの企業サイトやブログなどで採用される一般的な形式のレイアウト。
■ 3カラムレイアウト
(17165)

左サイドバー+メインコンテンツ+右サイドバーの構成で縦3列に分割されたレイアウト。
情報量が多いニュースサイトやECサイトなどで使われることが多い。
■ グリッドレイアウト
(17168)

縦にも横にも分かれたグリッド構造のレイアウト。厳密にはカラムレイアウトとは異なる形式。
3カラムレイアウトと同様に、情報量が多いニュースサイトやECサイトなどで使われることが多い。
※グリッドレイアウトの作成方法は次章で解説します。

固定レイアウトと可変レイアウトを知ろう

Webサイトのレイアウトをどのようにするかを検討する際、基本的には情報量に応じて適切なカラム数を決めれば良いのですが、各カラムの幅をpx指定で固定するか、%指定などで可変させるかという判断もまた重要です。
固定レイアウト
  • 固定レイアウトとは、コンテンツの横幅をpx指定で固定したレイアウトのことです。
  • PC向けのレイアウト手法として現在も採用しているサイトは多いですが、現代的なレイアウト設計の方法としては短所もあります。
    • その時代の最も標準的なディスプレイサイズに最適化したサイズで作成するため、年々、PC画面の解像度が大型化する傾向の強い現代においては、数年でコンテンツの横幅が狭く感じられ、前近代的な印象を与えてしまうおそれがあります。
    • Webサイトがさまざまなサイズのデバイスで閲覧されることを前提とすれば、固定レイアウトのWebサイトは、コンテンツ幅が狭すぎたり、広すぎたりするリスクを避けられないでしょう。
【図解】固定レイアウト
(17173)

固定レイアウトはブラウザ幅を横に広げてもコンテンツの横幅は変わらない。
参考：固定レイアウトを採用しているWebサイト

HTML/CSS 11-1

HTML/CSS 11-1
https://www.yahoo.co.jp （2025年3月時点）
可変レイアウト
  • 可変レイアウトとは、ブラウザのウィンドウ幅が変わると、それに合わせてコンテンツ幅が伸縮するように設計されたレイアウトのことです。
  • 現代のWebサイトは、デスクトップPC、ノートPC、タブレットやスマートフォンなど、さまざまな画面サイズのデバイスで閲覧されます。
    • 画面サイズに応じてコンテンツ幅が伸縮する可変レイアウトは、Webサイトの閲覧環境の多様化が進んだ現在では、主流のレイアウト手法です。
    • どんなデバイスで閲覧しても、コンテンツ幅を適切なサイズに設定することが可能です。
    • 関連する技術に、異なるデバイスで適切なレイアウトを実現するレスポンシブデザインという手法があります。（14章で解説）
カラムレイアウトの考え方のまとめ
Webサイトのカラムレイアウトは、カラム数と、各カラムのサイズをpx指定で固定するか%指定などで可変にするかの2方向から検討します。
■ カラム数の決め方
情報量とその情報の階層構造の深さに応じて適切なカラム数を決めます。
以下はカラム数を決めるときの目安です。
情報量が少ない・階層が浅い場合
・シンプルにシングルカラムまたは2カラム
情報量が多い・階層が深い場合
・3カラム以上
■ 固定にするか可変にするかの判断
各カラムのサイズを固定にするか可変にするかは、コンテンツの性質やデザインコンセプト、操作性などを総合的に検討して決定します。
固定（px指定）向き
  • 操作上の安定感が重要なナビゲーション、サイドバーなど
  • バナーのサイズが決まっている広告枠
可変（%指定など）向き
  • 文章量の多い本文エリア
  • フルスクリーン型やセンタリング主体のデザイン
必要に応じて「固定＋可変」のように両者を組み合わせると、現代的なWebサイトのレイアウト設計を行うことができます。
例
2カラムレイアウトのサイドバーを固定、メインカラムは可変。
【図解】可変レイアウト
(19430)

可変レイアウトはブラウザ幅を横に広げると、コンテンツ幅も広がる。
参考：可変レイアウトを採用しているWebサイト

HTML/CSS 11-2

HTML/CSS 11-2
https://www.webcoach.jp （2025年3月時点）
それでは、まずはシンプルなシングルカラムレイアウトから作成していきましょう。

【11-2】シングルカラムレイアウトを作成しよう

  • シングルカラムレイアウトは、メッセージ性・ビジュアル重視で、情報を順序立てて縦にスクロール誘導しながら見せたいときに、よく採用されるレイアウトパターンです。
  • 一般的には、ブランドサイトやランディングページなどに使われることが多いです。
  • スマートフォン向けのレイアウトとしても向いています。
ここからの演習では、「single-column-lesson」フォルダ内のファイルを使用します。
演習の準備
1.　「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
2.　ブラウザプレビューします。
  • index.htmlには必要最低限のHTMLタグが入力されています。
  • reset.cssとstyle.cssが関連付けられています。
■ index.html
div要素をシングルカラムとしてスタイリングします。
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>シングルカラムレイアウト</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="content-wrapper">
    <h1>シングルカラムレイアウト</h1>
  </div>
</body>

</html>
HTML/CSS入門編 サンプルコード11-1
■ style.css
カラムの視認性を確保するため、div要素にはあらかじめ以下のスタイル指定がされています。
高さ
100vh（ブラウザの高さいっぱい）
※通常のWebページ制作では、ボックスの内容物（テキストや画像）によって高さは自然に伸びるので、このような指定はしません。
ダミー背景色
#bef9ff（水色）
 
.content-wrapper {
  height: 100vh;
  background-color: #bef9ff;
}
HTML/CSS入門編 サンプルコード11-2
■ 演習ファイルのブラウザプレビュー
(17206)

完成イメージを確認しよう

今回は、PC画面用のシングルカラムレイアウトとして、以下の仕様で作成します。
■ シングルカラム仕様
幅
ブラウザ幅の90%で可変
最大幅
1440px
マージン
中央配置　上下の余白：0
■ 完成イメージ
(17213)

CSSでシングルカラムレイアウトの指定をしよう

  • div要素をシングルカラムとしてスタイリングします。
  • divタグには、content-wrapperというclass名がついています。
    • このclass名を使い、classセレクタでCSSを記述します。
■ style.css
.content-wrapper {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  height: 100vh;
  background-color: #bef9ff;
}
HTML/CSS入門編 サンプルコード11-3
【画面収録】シングルカラムレイアウト完成

HTML/CSS 11-3

HTML/CSS 11-3
■ ブラウザプレビュー（完成）
(17222)

【11-3】2カラムレイアウトを作成しよう

  • 2カラムレイアウトは、主に以下のような構成のWebサイトで使われます。
    1.　ヘッダー（ロゴやグローバルナビゲーションなど）とメインコンテンツを横並びに配置する構成
    2.　メインコンテンツとサイドバー（カテゴリメニュー、関連記事、ランキング、バナーなどの補助的なコンテンツ）を横並びに配置する構成
  • コーポレートサイトやECサイト、ブログ、ニュースサイトなど、さまざまなジャンルのWebサイトで採用されているレイアウトパターンです。
ここからの演習では、「2-column-lesson」フォルダ内のファイルを使用します。
演習の準備
1.　「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
2.　ブラウザプレビューします。
  • index.htmlには必要最低限のHTMLタグが入力されています。
  • reset.cssとstyle.cssが関連付けられています。
■ index.html
  • header要素とmain要素を横並びにするカラムとしてマークアップします。
  • 親要素であるdiv要素は、Flexコンテナとして利用します。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2カラムレイアウト</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div class="content-wrapper">
      <header class="site-header">
        <h2>ヘッダー</h2>
      </header>
      <main class="main-contents">
        <h2>メインカラム</h2>
      </main>
    </div>
  </body>
</html>
HTML/CSS入門編 サンプルコード11-4
■ style.css
  • カラムの視認性を確保するため、各要素にはあらかじめ以下の指定がされています。
■ div要素（class名：content-wrapper）
高さ
100vh（ブラウザの高さいっぱい）
※通常のWebページ制作では、ボックスの内容物（テキストや画像）によって高さは自然に伸びるので、このような指定はしません。
ダミー背景色
#e9e9e9（グレー）
header要素（class名：site-header）
ダミー背景色
#f9ffc7（薄黄）
main要素（class名：main-contents）
ダミー背景色
#c8fbff（水色）
 
.content-wrapper {
  height: 100vh;
  background-color: #e9e9e9; /*グレー*/
}

.site-header {
  background-color: #f9ffc7; /*薄黄*/
}

.main-contents {
  background-color: #c8fbff; /*水色*/
}
HTML/CSS入門編 サンプルコード11-5
■ 演習ファイルのブラウザプレビュー
(17247)

■ HTMLの情報構造
(17249)

完成イメージを確認しよう

  • 今回は、PC画面用の2カラムレイアウトとして、以下の仕様で作成します。
  • これは、メニューなどを固定幅（px）に、コンテンツ部分は可変幅（%）にする一般的な2カラムのレイアウトパターンです。
■ 2カラム仕様
コンテンツ幅
フルスクリーン型（上下左右に余白なし）
ヘッダー
左カラム　300pxで固定
メインコンテンツ
右カラム　ブラウザ幅に応じて、残りのスペースいっぱいで可変
■ 完成イメージ
(17254)

CSSで2カラムレイアウトの指定をしよう

  • header要素とmain要素を横並びに配置し左カラムと右カラムを作成します。
    親要素であるdiv要素（class名：content-wrapper）のFlexboxを有効にし、Flexコンテナとして扱います。
  • ここでのポイントは右カラム（メインコンテンツ）のサイズ指定の方法です。
  • 左カラム（ヘッダー）は固定幅（300px）ですので、header要素（class名：site-header）にwidth: 300px;を指定すればOKです。
  • 問題は右カラム（メインコンテンツ）の幅指定です。
    • メインコンテンツは、ヘッダー領域以外の全領域を占めるという可変幅の仕様です。
    • この仕様でメインコンテンツの幅を指定する方法として、コンテンツ全体の幅（100%）からヘッダー幅（300px）を引くという計算処理を行う方法があります。
    • 幅・高さ、余白などの数値を動的に計算処理するコードとして、CSSにはcalc関数が用意されています。
calc()の使い方
  • calc()は数値を動的に計算処理するための関数です。
  • 関数とはプログラミング用語ですが、この場合は特定の処理を行う仕組みと捉えておけばよいでしょう。
  • 例えば、コンテンツ全体の幅（100%）からヘッダー幅（300px）を引いた数値を指定するときは、次のように記述します。
width: calc(100% - 300px);
HTML/CSS入門編 サンプルコード11-6
  • これは画面サイズに合わせて、100%から300pxを引いた幅という意味です。
  • +（加算）、-（減算）、*（乗算）、/（除算）の計算記号（演算子といいます）を使って計算を行うことができます。
  • 演算子の前後には半角スペースを空けます。
  • 異なる単位間での計算も可能であるため、今回のように、固定カラムと可変カラムを組み合わせたレイアウトを作成するときに大変役立ちます。
■ style.css
.content-wrapper {
  height: 100vh;
  display: flex;
  background-color: #e9e9e9;
}

.site-header {
  width: 300px;
  background-color: #f9ffc7;
}

.main-contents {
  width: calc(100% - 300px);
  background-color: #c8fbff;
}
HTML/CSS入門編 サンプルコード11-7
【画面収録】2カラムレイアウト完成

HTML/CSS 11-4

HTML/CSS 11-4
■ ブラウザプレビュー（完成）
(17262)

応用・豆知識：flex-growを使った可変幅レイアウト

calc()関数を使う代わりに、Flexboxのflex-growプロパティ（またはショートハンドのflex）を使うと、よりシンプルで柔軟なレイアウトが可能です。

  • 固定幅のカラムにはwidthを指定します。（例：width: 300px;）
  • 可変幅にしたいカラムにはflex-grow: 1;（またはflex: 1;）と指定します。

こうすることで、可変幅のカラムが「残りの利用可能なスペースを全て埋める」ように自動的に伸びてくれます。
固定幅のカラムのサイズが変わってもCSSを修正する必要がなく、メンテナンス性に優れています。

.content-wrapper {
  display: flex;
  /* ... */
}
.site-header {
  width: 300px;
  /* ... */
}
.main-contents {
  flex-grow: 1; /* または flex: 1; と記述 */
  /* ... */
}
HTML/CSS入門編 サンプルコード11-7の代替コード

【11-4】3カラムレイアウトを作成しよう

  • 3カラムレイアウトは、主に以下のような構成のWebサイトで使われます。
    • メインコンテンツを中央に配置し、左右にサイドバー（ナビゲーションや補助的なコンテンツ）を設置する構成
  • ポータルサイトやニュースサイト、ECサイトなど、情報量の多いWebサイトでよく採用されています。
  • サイドバーが2つあるため、多くの情報を1画面内で整理して見せたい場合に適しています。
ここからの演習では、「3-column-lesson」フォルダ内のファイルを使用します。
演習の準備
1.　「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
2.　ブラウザプレビューします。
  • index.htmlには必要最低限のHTMLタグが入力されています。
  • reset.cssとstyle.cssが関連付けられています。
index.html
  • main要素と2つのaside要素を横並びにするカラムとしてマークアップします。
    • 今回、サイドバーは両方ともasideタグでマークアップしています。
    • aside要素は「補助的なコンテンツ（メインのコンテンツを補足する情報）」を表すHTML5のセマンティック要素です。
      ※セマンティック要素については、「HTML/CSS入門編 10章 Flexboxを学ぼう」を参照してください。
  • 親要素であるdiv要素は、Flexコンテナとして利用します。
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>3カラムレイアウト</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="content-wrapper">
    <main class="main-contents">
      <h2>メインコンテンツ</h2>
    </main>
    <aside class="sidebar-left">
      <h2>左サイドバー</h2>
    </aside>
    <aside class="sidebar-right">
      <h2>右サイドバー</h2>
    </aside>
  </div>
</body>

</html>
HTML/CSS入門編 サンプルコード11-8
カラムの視認性を確保するため、各要素にはあらかじめ以下の指定がされています。
■ div要素（class名：content-wrapper）
高さ
100vh（ブラウザの高さいっぱい）
※通常のWebページ制作では、ボックスの内容物（テキストや画像）によって高さは自然に伸びるので、このような指定はしません。
ダミー背景色
#e9e9e9（グレー）
■ main要素（class名：main-contents）
ダミー背景色
#c8fbff（水色）
■ aside要素（class名：sidebar-left）
ダミー背景色
#f9ffc7（薄黄）
■ aside要素（class名：sidebar-right）
ダミー背景色
#ceffc7（薄緑）
 
.content-wrapper {
  height: 100vh;
  background-color: #e9e9e9;
}

.main-contents {
  background-color: #c8fbff;
}

.sidebar-left {
  background-color: #f9ffc7;
}

.sidebar-right {
  background-color: #ceffc7;
}
HTML/CSS入門編 サンプルコード11-9
■ 演習ファイルのブラウザプレビュー
(17298)

■ HTMLの情報構造
(17300)

カラムの情報構造をマークアップする際の注意点
 カラムの情報構造をマークアップする際、表面的なデザインの再現性のみから判断して順番を決めるのではなく、情報としての優先度が上のものからマークアップします。
■ 理由
  • スクリーンリーダー（読み上げブラウザ）はHTMLファイルの上から順番にコンテンツを読み上げるので、優先度順にコンテンツがマークアップされていないと、内容が伝わらないため。
  • Googleなどの検索エンジンは、HTMLの構造を読み取る際に、より先に書かれたコンテンツを「重要」と判断するため。

完成イメージを確認しよう

  • 今回は、PC画面用の3カラムレイアウトとして、以下の仕様で作成します。
  • これは、左右のサイドバーの幅をpx指定で固定、メインコンテンツを%指定などで可変にする一般的な3カラムのレイアウトパターンです。
■ 3カラム仕様
コンテンツ幅
フルスクリーン型（上下左右に余白なし）
メインコンテンツ
中央カラム　ブラウザ幅に応じて、残りのスペースいっぱいで可変
左サイドバー
左カラム　幅220pxで固定
右サイドバー
右カラム　幅220pxで固定
■ 完成イメージ
(17307)

CSSで3カラムレイアウトの指定をしよう

  • main要素と2つのaside要素を横並びにして中央カラム、左カラムと右カラムを作成しますので、親要素であるdiv要素（class名：content-wrapper）にdisplay:flex;を指定し、Flexboxを有効にします。
      • ここでのポイントは次の2つです。
    1. メインカラムのサイズ指定の方法：calc()を使う
    2. カラムの表示順の指定方法：orderプロパティを使う
■ 1. メインカラムのサイズ指定の方法
  • 左カラムと右カラムは固定幅（220px）ですので、aside要素（class名：sidebar-leftとsidebar-right）にwidth:220px;を指定すればOKです。
  • 中央カラム（メインコンテンツ）の幅指定には、前節の2カラムレイアウトでも使用したcalc関数を使い指定します。
    • メインコンテンツは、サイドバー領域以外の全領域を占めるという可変幅の仕様です。
    • この仕様でメインコンテンツの幅（width）を指定するために、コンテンツ全体の幅（100%）からサイドバー幅（合計440px）を引くという計算処理を次のようにcalc関数で行います。
    width: calc(100% - 440px);
    HTML/CSS入門編 サンプルコード11-10
    また、次のように、2つのサイドバーの合計幅の計算も式に含めることが可能です。 
    width: calc(100% - (220px + 220px));
    HTML/CSS入門編 サンプルコード11-11
■ 2. カラムの表示順の指定方法
  • 3カラムを構成する要素は、main要素（中央カラム）→aside要素（左カラム）→aside要素（右カラム）の順番で上からマークアップされています。
  • 親要素であるdiv要素（class名：content-wrapper）をFlexコンテナ化すると、子要素であるFlexアイテムはこの順番で横に並ぶため、main要素が一番左端に表示されます。
  • main要素を中央に表示させるためには、各Flexアイテム（子要素）にorderプロパティで表示順を指定する必要があります。
※orderプロパティについては「HTML/CSS入門編 10章 Flexboxを学ぼう」の「【10-3】子要素に指定するプロパティを覚えよう」節を参照してください。
■ style.css
.content-wrapper {
  height: 100vh;
  display: flex;
  background-color: #e9e9e9;
}

.main-contents {
  width: calc(100% - 440px);
  order: 2;
  background-color: #c8fbff;
}

.sidebar-left {
  width: 220px;
  order: 1;
  background-color: #f9ffc7;
}

.sidebar-right {
  width: 220px;
  order: 3;
  background-color: #ceffc7;
}
HTML/CSS入門編 サンプルコード11-12
【画面収録】カラムを横並びにする

HTML/CSS 11-5

HTML/CSS 11-5
【画面収録】カラムの表示順を指定する（3カラムレイアウト完成）

HTML/CSS 11-6

HTML/CSS 11-6
■ ブラウザプレビュー
(17323)

これで「HTML/CSS入門編 11章 カラムレイアウトの基本を学ぼう」の解説を終わります。

次の章に進みましょう。
前の章に戻る 次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH