HTML/CSS入門編｜12章：グリッドレイアウトの基本を学ぼう

HTML/CSS入門編 12章グリッドレイアウトの基本を学ぼう

本章では、整然としたマス目状の構成のレイアウトや、新聞や雑誌のような複雑で入り組んだ構成のレイアウトを実現できるグリッドレイアウトの学習をします。

演習素材について
本章では、「12章グリッドレイアウトの基本を学ぼう」フォルダ内の演習データを使用します。
「12章グリッドレイアウトの基本を学ぼう」フォルダの中には、「2column-layout_grid」と「gallery-layout-grid」「gallery-random-grid」フォルダが入っています。

「12章グリッドレイアウトの基本を学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

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

【12-1】グリッドレイアウトとは

Webサイトのグリッドレイアウト（Grid Layout）とは、ページ内のコンテンツを縦・横両方向に分割してレイアウトする手法のことです。
英語で「グリッド（Grid）」は「格子状・方眼状のもの」という意味です。
格子状に並んだマス目を好きな順番で配置したり、結合したりして、さまざまなレイアウトを実現することができます。

グリッドレイアウトで作成できるものを知ろう

グリッドレイアウトの手法では、次のようなレイアウトの作成が可能です。

■ 通常のカラムレイアウト

Flexboxで作成できる2カラムレイアウトや3カラムレイアウトは、グリッドレイアウトでも同様のものが実現可能です。

■ 縦・横に等間隔で並べるレイアウト

Flexboxでも同様のレイアウトが作成可能ですが、グリッドレイアウトではよりシンプルなコードで実現できます。

■ ランダムグリッドレイアウト

縦横サイズが不規則なグリッド状のレイアウトです。

【12-2】グリッドレイアウトの基本を学ぼう

グリッドレイアウトの仕組みを学ぼう

グリッドレイアウトの基本構造

グリッドレイアウト（Grid Layout）は、HTMLの要素を縦・横に仕切られた格子状に分割するレイアウト手法です。
グリッドレイアウトでは、「コンテナ」と呼ばれる親要素の中に「アイテム」と呼ばれる子要素を並べていく、という概念を使いレイアウトを行います。

グリッドレイアウトの基本（必須の記述）
1.　親要素と、その中に配置する子要素をマークアップする。
2.　親要素に display: grid; を指定する。
→ 親要素はコンテナ化する
→ 子要素はアイテム化する

HTML

<div class="container"> <!-- コンテナ -->
    <header>ヘッダー</header> <!-- アイテム -->
    <main>メインコンテンツ</main> <!-- アイテム -->
    <aside>サイドバー</aside> <!-- アイテム -->
    <footer>フッター</footer>  <!-- アイテム -->
</div>

HTML/CSS入門編サンプルコード12-1

CSS

.container {
  display: grid;
}

HTML/CSS入門編サンプルコード12-2

この手順でグリッドを有効化した後、グリッドを制御するプロパティを使い、レイアウトを作成していきます。

【図解】Grid Layoutの基本構造

グリッドレイアウト用語を覚えよう

上記の方法で有効化されたグリッドの詳細な指定を関連のプロパティで行い、レイアウトを制御する際に、知っておくと便利な用語がいくつかあります。

例えば、右の【図解】グリッドレイアウト例のレイアウトをグリッドレイアウトで作成するとします。
このとき各アイテムは、下の【図解】グリッド線（ライン）・行（row）と列（column）・セルのように概念化されます。

■各用語の解説

用語	解説
グリッド線（ライン）	グリッドを構成する水平線や垂直線のこと。アイテムをどの位置に配置するかを決める基準となります。
セル（cell）	1つのアイテムがグリッド内に配置される領域の最小単位です。アイテムは複数のセルにまたがって配置することも可能です。
行（row）	セルの横方向（x軸）の並びのこと
列（column）	セルの縦方向（y軸）の並びのこと
ライン番号	グリッド線（ライン）に振られた番号のこと。横線（行を分ける線）は上から、縦線（列を分ける線）は左から、1から順番に番号が振られています。

【図解】グリッドレイアウト例

【図解】グリッド線（ライン）・セル（cell）・行（row）と列（column）

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

それでは、実際にグリッドレイアウトの手法を使い、いろいろなタイプのレイアウトを作成してみましょう。
まずは、シンプルな2カラムレイアウトを作成します。

■ 2カラムレイアウト完成

ここからの演習では、「2column-layout_grid」フォルダ内のファイルを使用します。

演習の準備

1.　「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
2.　ブラウザプレビューします。

index.htmlには必要最低限のHTMLタグが入力されています。
reset.cssとstyle.cssが関連付けされています。

■ index.html

main要素（メインコンテンツ）とaside要素（サイドバー）を横並びにするカラムとしてマークアップします。
header、main、aside、footer要素の親要素であるdiv要素をコンテナとして利用します。

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

  <body>
    <div class="container">
      <header>ヘッダー</header>
      <main>メインコンテンツ</main>
      <aside>サイドバー</aside>
      <footer>フッター</footer>
    </div>
  </body>
</html>

HTML/CSS入門編サンプルコード12-3

■ style.css

カラムの視認性を確保するため、各要素にはあらかじめ背景色の指定がされています。

header {
  background-color: #ffffd8; /*黄*/
}

main {
  background-color: #dac4ff; /*紫*/
}

aside {
  background-color: #cbffcd; /*緑*/
}

footer {
  background-color: #dbdbdb; /*グレー*/
}

HTML/CSS入門編サンプルコード12-4

■ 演習ファイルのブラウザプレビュー（作成前）

■ HTMLの情報構造

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

今回は、PC画面用の2カラムレイアウトとして、以下の仕様で作成します。
ページ上部にヘッダー、下部にフッターを配置し、サイドバーを固定幅（px）に、コンテンツ部分は可変幅（%）にする一般的な2カラムのレイアウトパターンです。

■ 2カラム仕様

コンテンツ幅	フルスクリーン型（上下左右に余白なし）
ヘッダー	幅100%で可変　高さ100px
メインコンテンツ	右カラム　ブラウザ幅に応じて、残りのスペースいっぱいで可変
サイドバー	左カラム　幅300pxで固定
フッター	幅100%で可変　高さ150px

■ 完成イメージ

CSSでレイアウトの指定をしよう

CSSでグリッドレイアウトを作成していきます。
グリッドレイアウトを作成するベーシックな手順は次のとおりです。

グリッドレイアウトの作成手順
1.　親要素に display: grid; を指定する。
2.　グリッドの列数・行数やサイズを決める。
3.　アイテムの表示位置や複数セルにまたがる指定をする。

今回作成するグリッドによる2カラムレイアウトの概念を右図で確認しましょう。
headerとfooterのアイテムが、横方向に2つのセルにまたがっていることに注目してください。

【図解】2カラムレイアウトの概念図

1. 親要素に display : grid ; を指定する

HTMLマークアップは以下の通りです。

<div class="container">
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</div>

HTML/CSS入門編サンプルコード12-5

グリッドで配置する要素はheader、main、aside、footerですから、それらの親要素であるdiv要素（class名：container）に display: grid;を指定し、グリッドを有効化します。

.container {
  display: grid;
}

HTML/CSS入門編サンプルコード12-6

■ ブラウザプレビュー

※この時点ではまだレイアウトに変化はありません。

2. グリッドの列数・行数やサイズを決める

display: grid;によりグリッドを有効化すると、親要素のdivはコンテナ、全ての子要素はアイテムとして扱われ、レイアウトの制御が可能となります。
次に、以下のプロパティを使い、コンテナに対して、行数（横方向のセルの数）とグリッドの列数（縦方向のセルの数）、そのサイズを指定します。

プロパティ名	用途
grid-template-rows	行の数とサイズの指定
grid-template-columns	列の数とサイズの指定

右の【図解】2カラムレイアウトの概念図を見ると、今回作成するレイアウトは3行2列のグリッドを使って作成することができると分かります。

【図解】2カラムレイアウトの概念図（再掲）

◾️行の数とサイズを指定する

行の指定はgrid-template-rowsを使って指定します。
1行目から順番に半角スペースで区切りながら各行の高さを指定していきます。
各行の高さの指定は以下の表のとおりに指定します。

行番号	高さの指定
1行目	100px（headerの高さ）
2行目	auto（asideとmainの高さは、中身のテキスト量などに応じて自動で伸縮する）
3行目	150px（footerの高さ）

CSSのコードは以下のようになります。
- 1行目の高さが100px、2行目の高さが自動で伸縮、3行目の高さが150pxという意味です。

grid-template-rows: 100px auto 150px;

HTML/CSS入門編サンプルコード12-7

◾️列の数とサイズを指定する

列の指定はgrid-template-columnsを使って指定します。
1列目から順番に半角スペースで区切りながら各列の幅を指定していきます。
各列の幅の指定は次のとおりに指定します。

列番号	幅の指定
1列目	300px（asideの幅）
2列目	asideの幅分を引いた残り全部（mainの幅）

CSSのコードは以下のようになります。
- 1列目の幅が300px、2列目の幅は空いているスペース全部という指定です。

grid-template-columns: 300px 1fr;

HTML/CSS入門編サンプルコード12-8

ここで初めて登場したfrという単位について解説をします。

frとは

frとはfraction（分数）の意味で、CSSのグリッドレイアウトで導入された単位です。
コンテナ内の空いているスペースを何分割するかを指定するときに使います。
- 残ったスペースを何対何で分けるかを柔軟に指定することができます。

■ 具体例1（比率による幅の指定）

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

HTML/CSS入門編サンプルコード12-9

この場合は、次のように解釈します。
- 2列のグリッドの幅が1:2の比率で可変（伸縮）する。

■ 具体例2（固定幅との併用）

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

HTML/CSS入門編サンプルコード12-10

この場合は次のように解釈します。
- 3列のグリッドの1列目は幅200pxで固定し、2列目と3列目のグリッドは残りのスペースを1:1の割合で均等に分ける。

ブラウザプレビュー

※この時点でプレビューしても、アイテムの表示位置などが未指定ですので、レイアウトは崩れた状態です。

3. アイテムの表示位置や複数セルにまたがる指定をする

次に、以下のプロパティを使い、各アイテムの表示位置と複数セルにまたがる指定をします。

プロパティ名	用途
grid-row	アイテムが何行目から何行目までのセルをまたぐかを指定する grid-row:開始ライン番号 / 終了ライン番号;の形式で指定する
grid-column	アイテムが何列目から何列目までのセルをまたぐかを指定する grid-column:開始ライン番号 / 終了ライン番号;の形式で指定する

この2つのプロパティを使い、各アイテムが縦方向・横方向にどこからどこまでのセルをまたぐかを指定することにより、配置を決めます。

右の【図解】2カラムレイアウトの概念図を見ると、header要素のアイテムは、横方向には1列目と2列目のセルにまたがっており、縦方向には1行目のみに位置しています。
このことをgrid-rowプロパティとgrid-columnプロパティを使って指定すると、次のようになります。

【図解】2カラムレイアウトの概念図（再々掲）

■header要素の表示位置の指定

header {
  grid-column: 1/3;
  grid-row: 1/2; /*grid-row:1;と省略することも可*/
  background-color: #ffffd8;
}

HTML/CSS入門編サンプルコード12-11

header要素の表示位置の指定の解説
アイテムの表示位置とまたぐセルは、ライン番号で指定します。

header要素のアイテムは、横方向にはライン番号のcolumn1からcolumn3まで、縦方向にはライン番号のrow1からrow2までを占めています。

grid-column: 1/3;は、【図解】2カラムレイアウトの概念図のcolumn1からcolumn3までという意味です。
grid-row: 1/2;は、row1からrow2までという意味です。

隣り合わせの（複数セルにまたがっていない）ラインを指定する場合は、grid-row: 1/2;をgrid-row: 1;と「/（スラッシュ）」の後を省略して記述することができます。

■main要素の表示位置の指定

main {
  grid-column: 2/3; /*grid-column:2;と省略することも可*/
  grid-row: 2/3; /*grid-row:2;と省略することも可*/
  background-color: #dac4ff;
}

HTML/CSS入門編サンプルコード12-12

main要素の表示位置の指定の解説
main要素のアイテムは、横方向にはライン番号のcolumn2からcolumn3まで、縦方向にはライン番号のrow2からrow3までを占めています。

grid-column: 2/3;は、【図解】2カラムレイアウトの概念図のcolumn2からcolumn3までという意味です。
grid-row: 2/3;は、row2からrow3までという意味です。

■aside要素の表示位置の指定

aside {
  grid-column: 1/2; /*grid-column:1;と省略することも可*/
  grid-row: 2/3; /*grid-row:2;と省略することも可*/
  background-color: #cbffcd;
}

HTML/CSS入門編サンプルコード12-13

aside要素の表示位置の指定の解説
aside要素のアイテムは、横方向にはライン番号のcolumn1からcolumn2まで、縦方向にはライン番号のrow2からrow3までを占めています。

grid-column: 1/2;は、【図解】2カラムレイアウトの概念図のcolumn1からcolumn2までという意味です。
grid-row: 2/3;は、row2からrow3までという意味です。

■footer要素の表示位置の指定

footer {
  grid-column: 1/3;
  grid-row: 3/4; /*grid-row:3;と省略することも可*/
  background-color: #dbdbdb;
}

HTML/CSS入門編サンプルコード12-14

footer要素の表示位置の指定の解説
footer要素のアイテムは、横方向にはライン番号のcolumn1からcolumn3まで、縦方向にはライン番号のrow3からrow4までを占めています。

grid-column: 1/3;は、【図解】2カラムレイアウトの概念図のcolumn1からcolumn3までという意味です。
grid-row: 3/4;は、row3からrow4までという意味です。

2カラムレイアウト完成

これで2カラムレイアウトの完成です。ブラウザプレビューしてみましょう。

.container {
  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: 300px 1fr;
}

header {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: #ffffd8;
}

main {
  grid-column: 2;
  grid-row: 2;
  background-color: #dac4ff;
  padding-bottom: 500px;
}

aside {
  grid-column: 1;
  grid-row: 2;
  background-color: #cbffcd;
}

footer {
  grid-column: 1/3;
  grid-row: 3;
  background-color: #dbdbdb;
}

HTML/CSS入門編サンプルコード12-15

※メインコンテンツにある程度の高さを持たせ、視認性を確保するため、main要素にpadding-bottom: 500px;を指定しています。

【画面収録】2カラムレイアウト完成

HTML/CSS 12-1

■ ブラウザプレビュー

今回作成した2カラムレイアウトは、「HTML/CSS入門編 11章カラムレイアウトの基本を学ぼう」で学んだFlexboxの手法で、全く同じ仕様のものを作成することも可能です。

Flexboxを使用して作成した場合

全く同じレイアウトをFlexboxを使用して作成する場合も、 HTMLのマークアップは全く同じです。

<div class="container">
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</div>

HTML/CSS入門編サンプルコード12-16

CSSはdiv要素にdisplay:flex;を指定し、子要素のサイズと表示順、折り返しの指定をすれば完成です。

.container {
  display: flex;
  flex-wrap: wrap; /*親要素の幅で子要素が折り返す*/
}

header {
  order: 1;
  width: 100%;
  height: 100px;
  background-color: #ffffd8;
}

main {
  order: 3;
  width: calc(100% - 300px);
  background-color: #dac4ff;
  padding-bottom: 500px;/*視認性を確保するためのpadding-bottom*/
}

aside {
  order: 2;
  width: 300px;
  background-color: #cbffcd;
}

footer {
  order: 4;
  width: 100%;
  height: 150px;
  background-color: #dbdbdb;
}

HTML/CSS入門編サンプルコード12-17

■ ブラウザプレビュー

Flexboxとグリッドレイアウトの使い分け方

今回のようなオーソドックスな2カラムレイアウトの場合は、Flexboxで作成しても、グリッドレイアウトで作成したものに比べてとくに劣る点はありません。
どちらでも同じレイアウトを作成できますので、好みや状況に応じて選べばOKです。
Flexboxとグリッドは似ていますので、どちらを使ってレイアウトの設定を行うかという判断が難しく感じるかもしれませんが、基本的には右の表を参考に決めてください。

■ Flexboxとグリッドレイアウトの使い分け方

	flex	grid
方向性	1方向（横 or 縦）に並べるのが得意	縦横2方向で配置するのが得意
配置制御の方法	子要素を並べて整列する	行・列を作成して子要素をレイアウトする
よく使う場面	ナビゲーション、アイコンの横並び、中央配置など	Webページの全体レイアウト、カード型レイアウトなど

【12-4】写真を縦・横に等間隔で並べるレイアウトを作成しよう

次に、写真を等間隔で縦・横に並べるレイアウトをグリッドレイアウトで作成してみましょう。
同じタイプのレイアウトは「HTML/CSS入門編 10章 Flexboxを学ぼう」でFlexboxを使った作成方法で学習しましたが、グリッドレイアウトを使うと、よりシンプルなコードで作成できます。

■ 縦・横に等間隔で並べるレイアウト完成

ここからの演習では、「gallery-layout-grid」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

index.htmlには必要最低限のHTMLタグが入力されています。
reset.cssとstyle.cssが関連付けされています。

■ index.html

写真が12枚リスト形式でマークアップされています。
そのうち4つのリスト項目（liタグ）がコメントアウトしてありますが、まずはそのままにして作業してください。

■ HTMLの構造図（世界観光Photoギャラリー）

■ start/index.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>世界観光Photoギャラリー</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1>世界観光Photoギャラリー</h1>
  </header>

  <main class="gallery-contents">
    <ul>
      <li><img src="images/photo-egypt.jpg" alt="エジプト"></li>
      <li><img src="images/photo-france.jpg" alt="フランス"></li>
      <li><img src="images/photo-india.jpg" alt="インド"></li>
      <li><img src="images/photo-italy.jpg" alt="イタリア"></li>
      <li><img src="images/photo-mexico.jpg" alt="メキシコ"></li>
      <li><img src="images/photo-netherlands.jpg" alt="オランダ"></li>
      <li><img src="images/photo-newyork.jpg" alt="アメリカ"></li>
      <li><img src="images/photo-peru.jpg" alt="ペルー"></li>
      <!--
      <li><img src="images/photo-southkorea.jpg" alt="韓国"></li>
      <li><img src="images/photo-morocco.jpg" alt="モロッコ"></li>
      <li><img src="images/photo-spain.jpg" alt="スペイン"></li>
      <li><img src="images/photo-thailand.jpg" alt="タイ"></li>
      -->
    </ul>
  </main>

  <footer>
    <p>
      Copyright &copy; World Travel Photo Gallery All Rights Reserved.
    </p>
  </footer>
</body>

</html>

HTML/CSS入門編サンプルコード12-18

■ style.css

h1要素とfooter内のp要素に対しては、簡単なCSSがあらかじめ適用されています。

h1 {
  font-size: 35px;
  text-align: center;
  margin: 40px 0;
}

footer p {
  text-align: center;
  margin: 50px 0 50px;
}

HTML/CSS入門編サンプルコード12-19

■ 演習ファイルのブラウザプレビュー

レイアウト仕様を確認しよう

今回は、次の設計方針に従い、Photoギャラリーをコーディングします。

世界観光Photoギャラリー設計方針1

ブラウザウィンドウの横幅に対してコンテンツ幅が90%の比率で可変する。
コンテンツの最大幅は1440px（これ以上広がらない）とする。
写真は4枚ずつ均等サイズで横並びにし、コンテンツ幅に応じてサイズは可変する。
写真の周囲には縦横15pxの余白をつける。
li要素が増減した結果行数が増減しても、このレイアウトを保持する。
写真の数が1行につき4枚に満たないときは左寄せにする。

■ 世界観光Photoギャラリーの設計図

display:grid;で写真を並べよう

グリッドレイアウトで写真を均等配置します。
今回の手順は非常にシンプルです。

グリッドレイアウトの作成手順
1.　親要素に display : grid ; を指定する。
2.　列を4等分する指定をする。（行の指定はしない）

【図解】世界観光Photoギャラリーの概念図

1. 親要素に display : grid ; を指定する

HTMLマークアップは以下の通りです。

<main class="gallery-contents">
    <ul>
      <li><img src="images/photo-egypt.jpg" alt="エジプト"></li>
      <li><img src="images/photo-france.jpg" alt="フランス"></li>
      <li><img src="images/photo-india.jpg" alt="インド"></li>
      <li><img src="images/photo-italy.jpg" alt="イタリア"></li>
      <li><img src="images/photo-mexico.jpg" alt="メキシコ"></li>
      <li><img src="images/photo-netherlands.jpg" alt="オランダ"></li>
      <li><img src="images/photo-newyork.jpg" alt="アメリカ"></li>
      <li><img src="images/photo-peru.jpg" alt="ペルー"></li>
      <!--       
      <li><img src="images/photo-southkorea.jpg" alt="韓国"></li>
      <li><img src="images/photo-morocco.jpg" alt="モロッコ"></li>
      <li><img src="images/photo-spain.jpg" alt="スペイン"></li>
      <li><img src="images/photo-thailand.jpg" alt="タイ"></li>
      -->
    </ul>
  </main>

HTML/CSS入門編サンプルコード12-20

グリッドで配置する要素は8個のli要素ですから、それらの親要素であるul要素に display : grid ;を指定し、グリッドを有効化します。main要素のclass名を使い、子孫セレクタでCSSを記述します。（ulタグに直接class名を付けて、classセレクタで指定しても構いません）
このとき、コンテンツ幅と最大幅、中央配置の指定も書いておきます。
ダミー背景色を使うと視覚的にレイアウトを確認しやすくなりますので、入れておきましょう。

.gallery-contents ul {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  background-color: #ffffcc;
}

HTML/CSS入門編サンプルコード12-21

【画面収録】コンテンツ幅の指定と中央配置

HTML/CSS 12-2

■ ブラウザプレビュー

※この時点ではまだギャラリーのレイアウトに変化はありません。

2. 列を4等分する指定をする

display: grid;によりグリッドを有効化すると、親要素（ul）のコンテナ、全ての子要素（li）はアイテムとして扱われ、レイアウトの制御が可能となります。
grid-template-columnsプロパティを使い、コンテナに対して、グリッドの列数（縦方向のセルの数）、そのサイズを指定します。
- 4列でアイテム幅が均等で可変の指定は以下のようになります。

grid-template-columns: 1fr 1fr 1fr 1fr;

HTML/CSS入門編サンプルコード12-22

行数（横方向のセルの数）は指定しません。grid-template-rowsによる行の指定をしなければ、子要素が増えた場合には同じ列数の行が自動的に追加され、子要素が減って行数も減った場合には、元々あった行のスペースも削除されます。
gapプロパティで子要素間の余白を指定します。

■ 列の指定方法

.gallery-contents ul {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*grid-template-columns:repeat(4,1fr);と書き換えが可能*/
  gap: 15px;
}

HTML/CSS入門編サンプルコード12-23

※レイアウトが確認できたらダミー背景色は消去します。

■ repeat関数

grid-template-columns: 1fr 1fr 1fr 1fr;は、repeat関数を使い、シンプルに書き換えることが可能です。

repeat関数の使い方

上記コードのgrid-template-columns: 1fr 1fr 1fr 1fr; は、列数が4つで、各列の幅は親要素（コンテナ）を4等分した幅という意味ですが、繰り返しが多く、やや冗長な記述です。
repeat関数を使うと、1fr 1fr 1fr 1fr を repeat(4 , 1fr); とシンプルに書き換えることが可能です。
- repeat(4 , 1fr); は、（1行につき）幅1frのアイテムを4つ繰り返すという意味です。

■ repeat関数の記述方法

repeat(繰り返す回数, アイテムの幅);

HTML/CSS入門編サンプルコード12-24

【画面収録】列を4等分する指定をする

HTML/CSS 12-3

■ ブラウザプレビュー

※写真画像（img要素）のサイズがブラウザ幅に応じて伸縮するのは、reset.cssにimg{max-width: 100%;}が記述されているからです。

■ 写真を増やしてみよう

このような写真ギャラリーを作成する際には、更新作業による写真の数の増減を見越したレイアウト仕様でコーディングを行うことが大切です。
グリッドレイアウトを使うと、アイテム（li要素）数が増減してもレイアウトが崩れることはありません。
コメントアウトされているli要素を追加してみましょう。

<main class="gallery-contents">
    <ul>
      <li><img src="images/photo-egypt.jpg" alt="エジプト"></li>
      <li><img src="images/photo-france.jpg" alt="フランス"></li>
      <li><img src="images/photo-india.jpg" alt="インド"></li>
      <li><img src="images/photo-italy.jpg" alt="イタリア"></li>
      <li><img src="images/photo-mexico.jpg" alt="メキシコ"></li>
      <li><img src="images/photo-netherlands.jpg" alt="オランダ"></li>
      <li><img src="images/photo-newyork.jpg" alt="アメリカ"></li>
      <li><img src="images/photo-peru.jpg" alt="ペルー"></li>  
      <li><img src="images/photo-southkorea.jpg" alt="韓国"></li>
      <li><img src="images/photo-morocco.jpg" alt="モロッコ"></li>
      <li><img src="images/photo-spain.jpg" alt="スペイン"></li>
      <li><img src="images/photo-thailand.jpg" alt="タイ"></li>
    </ul>

HTML/CSS入門編サンプルコード12-25

【動画収録】写真を増やしてみよう

HTML/CSS 12-4

■ ブラウザプレビュー

アイテムの折り返し指定をしよう

ここまでで完成したレイアウトを、以下の設計方針で仕様変更してみたいと思います。
まずは、右の動画とブラウザプレビューで完成サンプルを確認してください。
こちらの仕様は、スマートフォンに対してレイアウトを最適化する際によく使用されますので、ぜひ覚えておいてください。

世界観光Photoギャラリー設計方針2

ブラウザウィンドウの横幅に対してコンテンツ幅が90%の比率で可変する。
コンテンツの最大幅は1440px（これ以上広がらない）とする。
写真は最大で5枚ずつ均等サイズで横並びにし、最小幅は276pxとする。（最大で1440pxのコンテンツ幅の中に並ぶだけ並ぶ）
画像の最小サイズは以下の計算で割り出します。（5列の場合は15pxの余白が4箇所にあるので、その分を最大コンテナ幅から引いた後に5等分する計算）
- (1440-15×4)÷5=276
コンテンツ幅に応じて写真は均等サイズで可変するが、幅276px未満になる度に列数は5列→4列→3列→2列→1列と減っていく。
写真の周囲には縦横15pxの余白をつける。
写真の数が列数に満たないときは左寄せにする。

【動画収録】アイテムの折り返し指定をしよう　完成

HTML/CSS 12-5

■ ブラウザプレビュー

コンテナのサイズに応じてアイテムを繰り返す

■ コンテナのサイズに応じてアイテムを繰り返す指定

コンテナのサイズに応じてアイテムを繰り返す指定をするためには、repeat関数の値のauto-fillとauto-fitを使用します。

■ auto-fill、auto-fitの記述方法

repeat(auto-fillまたはauto-fit, アイテムの幅);

auto-fill、auto-fitの記述方法

auto-fillとauto-fitの違いは次のとおりです。
どちらも親要素の幅に応じて自動的に列を追加する機能を持ちますが、「余ったスペースの扱い」が異なります。

値	特徴
auto-fill	親要素の幅に応じて、可能な限り多くの列を配置する。アイテム数が足りない場合、空のグリッド（見えないセル）が保持され、余白が生じる。
auto-fit	列数よりもアイテム数が少ない場合、空のグリッドは折りたたまれ、余ったスペースが各アイテムに均等配分され、アイテムのサイズは拡大される。空のグリッドは作られず、列数は要素の数に応じて変動する。

※auto-fillとauto-fitの違いは、5列のグリッドでアイテム数を3つに減らした右の画面収録で比較するとよく分かると思います。

■ アイテムの最小サイズの指定方法

グリッドレイアウトを使うときのアイテムの最小サイズと最大サイズの指定には、minmax関数を使います。
この関数を使うと、コンテナサイズに応じて柔軟にアイテムサイズを変化させることができます。

minmax関数の記述方法

minmax(最小サイズ, 最大サイズ);

minmax関数の記述方法

以上の2つの指定方法を組み合わせて、今回の仕様を実現するためには、以下のコードを記述します。

.gallery-contents ul {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 15px;
}

HTML/CSS入門編サンプルコード12-26

【画面収録】auto-fillの場合

grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));

auto-fillの場合

HTML/CSS 12-6

【画面収録】auto-fitの場合

grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));

auto-fitの場合

HTML/CSS 12-7

【画面収録】コンテナのサイズに応じてアイテムを繰り返す　完成

HTML/CSS 12-8

【12-5】ランダムグリッドレイアウトを作成しよう

次に、ランダムグリッド（サイズが不規則なグリッド状のレイアウト）を作成してみましょう。
基本的な作成方法は、通常のグリッドレイアウトと変わりません。
- grid-rowとgrid-columnを使い、またがるセルを正確に指定すれば完成します。
演習を始めるにあたり、まずは演習素材をダウンロードしてください。

■ ランダムグリッドレイアウト完成

ここからの演習では、「gallery-random-grid」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

index.htmlには必要最低限のHTMLタグが入力されています。
reset.cssとstyle.cssが関連付けされています。

■ index.html

写真が8枚リスト形式でマークアップされています。
li要素を個別にスタイリングするために、各liタグにはclass名（item1〜item8）をつけてあります。
配置するli要素の表示順は、グリッドレイアウトでは自由に入れ替えが可能ですが、今回は以下の構造図のとおりに指定します。

■ HTMLの構造図（世界観光Photoギャラリー）

■ start/index.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>世界観光Photoギャラリー | ランダムグリッド</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1>世界観光Photoギャラリー | ランダムグリッド</h1>
  </header>

  <main class="gallery-contents">
    <ul>
      <li class="item1">
        <img src="images/photo-egypt.jpg" alt="エジプト">
      </li>
      <li class="item2">
        <img src="images/photo-france.jpg" alt="フランス">
      </li>
      <li class="item3">
        <img src="images/photo-india.jpg" alt="インド">
      </li>
      <li class="item4">
        <img src="images/photo-italy.jpg" alt="イタリア">
      </li>
      <li class="item5">
        <img src="images/photo-mexico.jpg" alt="メキシコ">
      </li>
      <li class="item6">
        <img src="images/photo-netherlands.jpg" alt="オランダ">
      </li>
      <li class="item7">
        <img src="images/photo-newyork.jpg" alt="アメリカ">
      </li>
      <li class="item8">
        <img src="images/photo-peru.jpg" alt="ペルー">
      </li>
    </ul>
  </main>


  <footer>
    <p>
      Copyright &copy; World Travel Photo Gallery All Rights Reserved.
    </p>
  </footer>
</body>

</html>

HTML/CSS入門編サンプルコード12-27

■ style.css

h1要素とfooter内のp要素に対しては、簡単なCSSがあらかじめ適用されています。

h1 {
  font-size: 35px;
  text-align: center;
  margin: 40px 0;
}

footer p {
  text-align: center;
  margin: 50px 0 50px;
}

HTML/CSS入門編サンプルコード12-28

■ 演習ファイルのブラウザプレビュー

レイアウト仕様を確認しよう

今回は、次の設計方針に従い、ランダムグリッドレイアウトをコーディングします。

ランダムグリッドレイアウト設計方針

ブラウザウィンドウの横幅に対してコンテンツ幅が90%の比率で可変する。
コンテンツの最大幅は1440px（これ以上広がらない）とする。
4行3列のグリッドをベースに作成する。
- 行の高さは165pxで固定する。
- 列の幅は2:1:1の比率で可変する。

写真サイズは、アイテム（li要素）の縦・横サイズいっぱいに広がり、収まりきらない部分はトリミングされる。

写真の周囲には縦横15pxの余白をつける。

■ ランダムグリッドレイアウトの設計図

ランダムグリッドを作成しよう

グリッドレイアウトで行・列を指定します。
今回の手順は以下のとおりです。

ランダムグリッドレイアウトの作成手順
1.　親要素（ul要素）に display : grid ; を指定する。
2.　グリッドの列数・行数とサイズを指定する。
3.　アイテム（li要素）の表示位置と複数セルにまたがる指定をする。
4.　画像（img要素）のトリミング範囲を指定する。

今回作成するランダムグリッドレイアウトの概念図を確認しましょう。
複数の行や列にまたがっているセルに注意してコーディングしていきます。

【図解】ランダムレイアウトの概念図

1. 親要素（ul要素）に display : grid ; を指定する

HTMLマークアップは以下の通りです。

<main class="gallery-contents">
    <ul>
      <li class="item1">
        <img src="images/photo-egypt.jpg" alt="エジプト">
      </li>
      <li class="item2">
        <img src="images/photo-france.jpg" alt="フランス">
      </li>
      <li class="item3">
        <img src="images/photo-india.jpg" alt="インド">
      </li>
      <li class="item4">
        <img src="images/photo-italy.jpg" alt="イタリア">
      </li>
      <li class="item5">
        <img src="images/photo-mexico.jpg" alt="メキシコ">
      </li>
      <li class="item6">
        <img src="images/photo-netherlands.jpg" alt="オランダ">
      </li>
      <li class="item7">
        <img src="images/photo-newyork.jpg" alt="アメリカ">
      </li>
      <li class="item8">
        <img src="images/photo-peru.jpg" alt="ペルー">
      </li>
    </ul>
  </main>

HTML/CSS入門編サンプルコード12-29

グリッドで配置する要素は8個のli要素ですから、それらの親要素であるul要素に display : grid ;を指定し、グリッドを有効化します。main要素のclass名を使い子孫セレクタでCSSを記述します。（自分でulタグにclass名をつけてclassセレクタでCSSを記述してもOKです）
このとき、コンテンツ幅と最大幅、中央配置の指定も書いておきます。
ダミー背景色を使うと視覚的にレイアウトを確認しやすくなりますので、入れておきましょう。

.gallery-contents ul {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  background-color: #ccffcc;
}

HTML/CSS入門編サンプルコード12-30

【画面収録】コンテンツ幅の指定と中央配置

HTML/CSS 12-9

■ ブラウザプレビュー

※この時点ではまだギャラリーのレイアウトに変化はありません。

2. グリッドの列数・行数とサイズを指定する

display: grid;でグリッドを有効化した後に、行と列の指定をします。
- 今回作成するランダムグリッドは、4行3列のグリッドを元に作成することができます。
  ※【図解】ランダムレイアウトの概念図を参照

■ 行の指定方法

行（横方向のセルの並び）の数とサイズを指定します。
- 4行で高さは1行あたり165pxに統一しますので、grid-template-rowsプロパティとrepeat関数を使い、次のコードを記述します。

grid-template-rows: repeat(4, 165px);

HTML/CSS入門編サンプルコード12-31

■ 列の指定方法

列（縦方向のセルの並び）の数とサイズも指定します。
- 3列で1列目、2列目、3列目を2:1:1の比率で可変する設定にしますので、grid-template-columnsプロパティを使い、次のコードを記述します。

grid-template-columns: 2fr 1fr 1fr;

HTML/CSS入門編サンプルコード12-32

gapプロパティで子要素間の余白（15px）を指定します。

■ グリッドの列数・行数とサイズを指定する

.gallery-contents ul {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(4, 165px);
  grid-template-columns: 2fr 1fr 1fr;
  gap: 15px;
  background-color: #ccffcc;
}

HTML/CSS入門編サンプルコード12-33

【画面収録】グリッドの列数・行数とサイズを指定する

HTML/CSS 12-10

ブラウザプレビュー

ランダムグリッドの元となる4行3列のグリッドが出来ました。
次の工程で各アイテムの表示位置と複数セルにまたがる指定をします。
※写真画像（img要素）のサイズがブラウザ幅に応じて伸縮するのは、reset.cssにimg{max-width: 100%;}が記述されているからです。

3. アイテム（li要素）の表示位置と複数セルにまたがる指定をする

次に、以下のプロパティを使い、各アイテムの表示位置と複数セルにまたがる指定をします。

プロパティ名	用途
grid-row	アイテムが何行目から何行目までのセルをまたぐかを指定する grid-row:開始ライン番号 / 終了ライン番号;の形式で指定する
grid-column	アイテムが何列目から何列目までのセルをまたぐかを指定する grid-column:開始ライン番号 / 終了ライン番号;の形式で指定する

この2つのプロパティを使い、各アイテムが縦方向・横方向にどこからどこまでのセルをまたぐかを指定することにより、配置を決めます。

上の【図解】ランダムレイアウトの概念図（再掲）を見ながら、各アイテムの表示位置と複数セルにまたがる指定をしていきます。
例えば、最初のアイテム（li.item1）は、行のライン番号1から3にかけてセル2つ分の位置を占め、列のライン番号1から2にかけてセル1つ分の位置を占めています。
- これをCSSで指定すると、次のようになります。

.item1 {
  grid-row: 1/3; /*行のライン番号1から3にかけてセル2つ分の位置を占める*/
  grid-column: 1; /*列のライン番号1から2にかけてセル1つ分の位置を占める。grid-column: 1/2;と記述してもOK*/
}

HTML/CSS入門編サンプルコード12-34

上記の方法で全てのアイテムの表示位置と複数セルにまたがる指定をすると、CSSのコードは以下のようになります。

.item1 {
  grid-row: 1/3;
  grid-column: 1;
}

.item2 {
  grid-row: 1;
  grid-column: 2;
}

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 2;
}

.item5 {
  grid-row: 2;
  grid-column: 3;
}

.item6 {
  grid-row: 3;
  grid-column: 1;
}

.item7 {
  grid-row: 3/5;
  grid-column: 2/4;
}

.item8 {
  grid-row: 4;
  grid-column: 1;
}

HTML/CSS入門編サンプルコード12-35

【図解】ランダムレイアウトの概念図（再掲）

■ ブラウザプレビュー

ランダムグリッドは完成しましたが、まだ画像のトリミング指定をしていないので、グリッドからはみ出してしまっている画像もあります。

4. 画像（img要素）のトリミング範囲を指定する（object-fitプロパティ）

最後に、画像（img要素）のトリミング指定をすれば完成です。
画像を指定したサイズでトリミングするためにはobject-fitプロパティをimg要素に指定します。
- object-fitプロパティは、画像（img要素）や動画（video要素）が、親要素のサイズに対してどのように表示されるかを指定するプロパティです。
- 設定できる値には、次のようなものがあります。

■ object-fitプロパティの値

値	説明
fill（デフォルト）	画像の縦横の比率を歪めてでも親要素内にぴったり収める。
contain	画像を縮小してすべて表示する（余白ができる）。
cover	親要素のサイズいっぱいに画像が広がり覆うが、はみ出す部分はトリミングされる。画像の縦横比は保持される。 ※サムネイル画像やカード型レイアウトでよく使われる。
none	元の画像サイズをそのまま表示する。
scale-down	noneとcontain のどちらか小さい方が適用される。 ※基本的にcontainと同じ。

img要素の親要素はグリッドアイテムであるli要素です。
このli要素のサイズいっぱいに画像が広がり、はみ出す部分をトリミングするには、object-fitプロパティをimg要素に対して次のように記述します。
- img要素にwidth、heightとobject-fit: cover;を指定すると、そのサイズに画像がトリミングされます。
- width、heightはpx指定もできますが、100%と指定することにより、親要素のサイズいっぱいに広がる指定になります。

.gallery-contents img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML/CSS入門編サンプルコード12-36

レイアウトの確認後、コンテナに指定したダミー背景色を削除すれば完成です。

■ style.css（全コード）

@charset "UTF-8";

h1 {
  font-size: 35px;
  text-align: center;
  margin: 40px 0;
}

.gallery-contents ul {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(4, 165px);
  grid-template-columns: 2fr 1fr 1fr;
  gap: 15px;
}

.gallery-contents img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item1 {
  grid-row: 1/3;
  grid-column: 1;
}

.item2 {
  grid-row: 1;
  grid-column: 2;
}

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 2;
}

.item5 {
  grid-row: 2;
  grid-column: 3;
}

.item6 {
  grid-row: 3;
  grid-column: 1;
}

.item7 {
  grid-row: 3/5;
  grid-column: 2/4;
}

.item8 {
  grid-row: 4;
  grid-column: 1;
}

footer p {
  text-align: center;
  margin: 50px 0 50px;
}

HTML/CSS入門編サンプルコード12-37

【画面収録】画像（img要素）のトリミング範囲を指定する

HTML/CSS 12-11

■ ブラウザプレビュー

これで「HTML/CSS入門編 12章グリッドレイアウトの基本を学ぼう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む