カテゴリー: CSS

同じ要素に複数のスタイルがかけられ、競合してしまうことありますよね。
そういう場合、どのスタイルが優先されるかという決まりを、「カスケード」といいます。

「カスケード処理」は以下の順番で行われます。

1. CSS 提供元による優先順位
2. 詳細度による優先順位
3. 記述順位による優先順位

各内容を順番にまとめます。

1. CSS 提供元による優先順位

スタイルシート は Web 制作者が用意するもの以外にも、ユーザ側が用意するもの、ブラウザのデフォルトのものがあり、それらが組み合わさって表示されます。スタイルシートの提供元による優先順位は以下の通りです。

1. Web ページ制作者が用意した 制作者 スタイルシート
2. 閲覧するユーザが用意した ユーザ スタイルシート
3. ブラウザがデフォルトで適用する ブラウザ スタイルシート

ですが、「!important 宣言」がついたものがある場合、提供元による優先順位が入れ替わります。

1. !important 宣言付き ユーザ スタイルシート
2. !important 宣言付き 制作者 スタイルシート
3. 制作者 スタイルシート
4. ユーザ スタイルシート
5. ブラウザ スタイルシート

2. 詳細度による優先順位

セレクタの詳細度（重み）を計算して、高得点のものほど優先されます。
⇒ セレクタの種類について

＜点数＞

＜計算例＞

3. 記述順位による優先順位

詳細度が同じものは、単純に後にあるものが優先されます。

CSS でスタイルを指定しているのに反映されない場合、優先順位が問題になってることが多いようです。一度見直しが必要ですね。

⇒ その１　基本セレクタ
⇒ その２　グループ化 / 結合子
⇒ その３　疑似クラス / 疑似要素（今回）

疑似クラスと疑似要素の違いは以下の通りです。

疑似クラス ⇒ 「:link」のようにコロン1つ
要素が特定の状態である場合にスタイルを適用させる

a:link { スタイルプロパティ }
/* リンク先が未訪問の <a> 要素のスタイルを指定 */

疑似要素 ⇒ 「::first-line」のようにコロン2つ
要素の一部に対してスタイルを適用させる

p::first-line { スタイルプロパティ }
/* <p> 要素の1行目のスタイルを指定 */

以下、疑似クラスの機能ごと、及び疑似要素を表にまとめましたが、基本的に CSS レベル 1 ～ 3 のみです。
（:read-only と :read-write はレベル 4 ですが、IE 以外のメジャーの最新のブラウザで実装されているので含めました。）

疑似クラス

リンク関連

兄弟要素の位置関連

フォーム関連

その他

疑似要素

⇒ その１　基本セレクタ
⇒ その２　グループ化 / 結合子（今回）
⇒ その３　疑似クラス / 疑似要素

グループ化

CSS で複数のセレクタに同じスタイルを指定することと、HTML 側で複数のセレクタが適応される場合を考えてみます。

• セレクタリスト
• HTML で複数のスタイル適用

セレクタリスト

コンマ (,) で区切り複数のセレクタをグループ化し、同じスタイルを指定します。

セレクタ, セレクタ, セレクタ { スタイルプロパティ }

＜ 利用例 – 01 ＞
同種のセレクタをグループ化する例。
<h1> 要素と <h2> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>h1 は適用される</h1>
<h2>h2 は適用される</h2>
<h3>h3 は適用されない</h3>

/* CSS */
h1, h2 {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02 ＞
異なる種類のセレクタをグループ化する例。
id=”main”（ID セレクタ）、class=”content”（クラスセレクタ）、<article> 要素（要素型セレクタ）に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="main">ID が指定されている</p>
<p class="content">クラスが指定されている</p>
<p>ID、クラスが指定されていない</p>
<article>タグが article</article>

/* CSS */
#main, .content, article {
 font-weight: 20px;
 color: lime;
}

HTML で複数のスタイル適用

HTML タグにクラスセレクタを複数適用する場合は、クラス名の間にスペースを挟んで記述します。

<要素名 class="クラス名 クラス名 クラス名"> ～ </要素名>

ID セレクタとクラスセレクタを同時に適用することもできます。

<要素名 id="ID値" class="クラス名"> ～ </要素名>

＜ スタイルが競合した場合の優先順位 ＞
詳細度が高いものが優先されます。

1. id セレクタ
2. クラスセレクタ
3. 属性セレクタ
4. 要素セレクタ
5. 全称セレクタ

同種のセレクタ（二つのクラスを持つなど）間で競合した場合は、後に書かれたものが優先となります。
さらに細かな優先順位の決まりがあるのですが、こちらにまとめました。
⇒ カスケード（スタイルの優先順位）

結合子

セレクタを組み合わせる結合子は4種類です。

• 子孫結合子
• 子結合子
• 一般兄弟結合子
• 隣接兄弟結合子

子孫結合子

セレクタを半角スペースで区切ることで、一つ目のセレクタ（親）に含まれる二つ目のセレクタ（子孫）に対してスタイルを適用させます。
（子、孫、ひ孫と、親に含まれるすべての階層に適用されます。）

セレクタ1 セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
親である<li> 要素のマーカーの種類を線の丸で黄緑色、子孫である<li> 要素のマーカーの種類を四角で橙色にする。

<!-- html -->
<ul>
  <li>リスト項目（親） 1
    <ul>
      <li>リスト項目（子） A</li>
      <li>リスト項目（子） B
        <ul>
          <li>リスト項目（孫） a</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>リスト項目（親） 2</li>
</ul>

/* CSS */
li {
  list-style-type: circle;
　color: lime;
}
li li {
  list-style-type: square;
　color: orange;
}

子結合子

セレクタを「 > 」で区切ることで、一つ目の親であるセレクタの直接の子になる二つ目のセレクタに対してスタイルを適用させます。
（子のみ。孫、ひ孫など、さらに下の階層は適用されません。）

セレクタ1 > セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
親要素の<article>の直接の子要素<div> に、フォントサイズ 20px、黄緑色を適用。
（孫要素の<div> には適用されない。）

<!-- html -->
<article>適用されない（親）
  <div>適用される（子）
    <div>適用されない（孫）</div>
  </div>
</article>

/* CSS */
article > div {
 font-weight: 20px;
 color: lime;
}

一般兄弟結合子

兄弟関係にある二つのセレクタを「 ~ 」で区切ることで、一つ目のセレクタの後に来る二つ目のセレクタに対してスタイルを適用させます。
（直後である必要はありません。）

セレクタ1 ~ セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
<article>の後にある<div> に、フォントサイズ 20px、黄緑色を適用。
（<div> は<article>より後にあればよく、直後である必要はない。）

<!-- html -->
<div>適用されない</div>
<article>適用されない</article>
<div>適用される</div>
<p>適用されない</p>
<div>適用される</div>

/* CSS */
article ~ div {
 font-weight: 20px;
 color: lime;
}

隣接兄弟結合子

兄弟関係にある二つのセレクタを「 + 」で区切ることで、一つ目のセレクタの直後に来る二つ目のセレクタに対してスタイルを適用させます。
（直後のみ。兄弟関係であっても離れていると適用されません。）

セレクタ1 + セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
<article>の直後にある<div> に、フォントサイズ 20px、黄緑色を適用。
（<div> は、<article>の後でも、離れていると適用されない。）

<!-- html -->
<div>適用されない</div>
<article>適用されない</article>
<div>適用される</div>
<p>適用されない</p>
<div>適用されない</div>

/* CSS */
article + div {
 font-weight: 20px;
 color: lime;
}

CSS のセレクタって種類多いですよね。しっかり使いこなせるように、まとめます。

⇒ その１　基本セレクタ（今回）
⇒ その２　グループ化 / 結合子
⇒ その３　疑似クラス / 疑似要素

基本セレクタ

基本セレクタは5種類あります。

• 要素型セレクタ
• 全称セレクタ
• ID セレクタ
• クラスセレクタ
• 属性セレクタ

要素型セレクタ

指定した要素名の要素に対してスタイルを適用させます。

要素名 { スタイルプロパティ }

＜ 利用例 ＞
すべての <a> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<a>適用される</a>
<p>こちらは適用されない</p>

/* CSS */
a {
 font-weight: 20px;
 color: lime;
}

全称セレクタ　「 * 」

すべての要素に対してスタイルを適用させます。

* { スタイルプロパティ }

＜ 利用例 – 01 ＞
すべての要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>これは例です</h1>
<p>これは例です</p>

/* CSS */
* {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02 ＞
.example の後に来る兄弟要素に、フォントサイズ 20px、黄緑色を適用。
（⇒ 隣接兄弟結合子参照）

<!-- html -->
<p class="example">こちらは適用されない</p>
<p>適用される</p>

/* CSS */
.example + * {
 font-weight: 20px;
 color: lime;
}

ID セレクタ

指定したid 属性の値を持つものに対してスタイルを適用させます。
id 属性の値は、同じ Web ページ内でが重複して指定できません。（次に説明するクラス属性は複数指定できます。）

#ID値 { スタイルプロパティ }

＜ 利用例 ＞
id=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="example">ID が指定されている</p>
<p>ID が指定されていない</p>

/* CSS */
#example {
 font-weight: 20px;
 color: lime;
}

クラスセレクタ

指定したクラス属性の値を持つものに対してスタイルを適用させます。
クラス属性は、同じ Web ページ内で複数指定できます。（id 属性は重複不可。）

.クラス名 { スタイルプロパティ }

＜ 利用例 – 01＞
class=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p class="example">クラスが指定されている</p>
<p>クラスが指定されていない</p>

/* CSS */
.example {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02＞
class=”example” を指定した <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
「 li.example 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li>クラスが指定されていない</li>
   <li class="example">クラスが指定されている</li>
</ul>
<p class="example">適用されない</p>

/* CSS */
li.example {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 03＞
class=”example” および “demo” の両方をクラスリストに含む <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
（⇒ HTMLでクラスを複数適用参照）
「 li.example.demo 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li class="example">適用されない</li>
   <li class="demo">適用されない</li>
   <li class="example demo">これだけ適用される</li>
</ul>
<p class="example demo">適用されない</p>

<!-- CSS -->
li.example.demo {
 font-weight: 20px;
 color: lime;
}

属性セレクタ

指定された属性を持つ要素に対してスタイルを適用させます。

/* 指定した属性名の属性を持つ要素に適用 */
要素名[属性名] { スタイルプロパティ }

/* 指定した属性名の値全体が一致する属性を持つ要素に適用 */
要素名[属性名="値"] { スタイルプロパティ }

/* 指定した属性名の値が、スペースで区切られた複数の値の中の一つと一致する属性を持つ要素に適用　*/
要素名[属性名~="値"] { スタイルプロパティ }

/* 指定した属性名の値が、ハイフン (-) で区切られた先頭の語と一致する属性を持つ要素に適用　*/
要素名[属性名|="値"]  スタイルプロパティ }

/* 指定した属性名の値で始まる属性を持つ要素に適用　*/
要素名[属性名^="値"] { スタイルプロパティ }

/* 指定した属性名の値で終わる属性を持つ要素に適用　*/
要素名[属性名$="値"] { スタイルプロパティ }

/* 指定した属性名の値を文字列中に含む属性を持つ要素に適用　*/
要素名[属性名*="値"] { スタイルプロパティ }

＜ 利用例 – 01＞
lang の値が ja である <div> 要素に対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<div lang="ja">日本語だけ適用される</div>
<div lang="en">Not applicated</div>

/* CSS */
div[lang="ja"] {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02＞
href の値が http で始まる <a> 要素に対して、フォントサイズ 20px、黄緑色を適用。
（外部リンクのみ適用。）

<!-- html -->
<a href="/example.html">内部リンクは適用されない</a>
<a href="http://demo.com">外部リンクは適用される</a>
<a href="https://demo.com">SSLも適用される</a>

/* CSS */
a[href^="http"] {
 font-weight: 20px;
 color: lime;
}

その１ 基本

基本的な考え方

grid:display
コンテナに指定。Grid Layout モジュール利用に必須。

grid-template-rows
コンテナに指定。各行トラックの高さを指定。

grid-template-columns
コンテナに指定。各列トラックの幅を指定。

grid-row
アイテムに指定。そのアイテムの行の領域を指定。

grid-column
アイテムに指定。そのアイテムの列の領域を指定。

その２ トラック、領域の値

＜トラックの値の指定に利用できる関数＞

minmax() 関数

repeat() 関数

repeat(auto-fit | auto-fill)

repeat(auto-fit | auto=fill, minmax())

＜アイテムの領域の値の指定に利用できる記述法＞

span を利用して自動配置

負のライン番号

その３ 基本以外のプロパティ

gap プロパティ
コンテナに指定。トラック間の隙間を指定。

grid-template-areas と grid-area の組み合わせ
grid-template-areas はコンテナ、 grid-area はアイテムに指定。名前付きの領域を指定。

grid-auto-row, grid-auto-column
コンテナに指定。拡張したトラックの大きさを指定。

grid-auto-flow
コンテナに指定。アイテムを配置する方向を指定。

＜Grid Layout モジュール以外のプロパティ＞

justify-content
align-content
justify-item
align-item
justify-self
align-self
order

その４ ショートハンド

grid-template でまとめる
grid-template-rows, grid-template-coloums, grid-template-areas のショートハンド。

grid でまとめる
コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンド。

grid-gap でまとめる
grid-row-gap, grid-column-gap のショートハンド。

grid-row, grid-column 開始と終了を分けて記述
grid-row-start, grid-row-end または grid-column-start, grid-column-end に分ける。

その５ IE 対応

Grid Layout IE ベンダープレフィックス対応表

Autoprefixer
ベンダープレフィックスを自動に書き込むツール

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド
⇒　その５ IE 対応（今回）
⇒　その６ まとめ

とても便利な Grid Layout ですが、IE10-11 、Edge 10-15 では、古い仕様（W3C Working Draft 7 April 2011）が実装されていて、そのままではレイアウトが反映されません。古いブラウザといっても、わずかながらシェアがあり、マイクロソフトのサポートも続いているわけで、無視できませんよね。

ベンダープレフィックスの記述が必要となりますが、利用できるプロパティに制限があり、どちらかにしかないプロパティもあります。そういった点を踏まえて記述する必要があります。

Grid Layout IE ベンダープレフィックス対応表

grid-template-areas に対応するベンダープレフィックスはありませんので、
コンテナ：-ms-grid-rows, -ms-grid-columns,
アイテム：-ms-grid-row, -ms-grid-row-span, -ms-grid-column, -ms-grid-column-span
で記述する方法となります。

また、grid-auto-flow で並ぶ方向を指定するというのにも対応するものがないので、値に column または dense を指定している場合は、アイテムごとに領域を指定しなくてはいけないようです。

Autoprefixer

上の対応表を見ながら、一つずつベンダープレフィックスを書き込んでいく・・・というと、地獄のような作業ですが、Autoprefixer というツールを利用するとこれを自動的に行ってくれます！
Gulp のプラグインなどで使うのが普通のようですが、Gulp のダウンロードも含めて、それは別の機会にまとめます。
Autoprefixer は、手軽に Web でも利用できます。今回はこちらを利用します。

Autoprefixer CSS online

左の欄に CSS を書き込み、下の枠に対象となるブラウザを指定し、「Apply」をクリックします。
そうすると、右の欄に、ベンダープレフィックスの含まれた CSS が表示されます。
便利ですねー！

ですが、grid-template-areas や、grid-gap など、ベンダープレフィックスに対応するプロパティがないものは、web の Autoprefixer では、自動的にそれに合うように変更されません。そのようなものを使わないか、手書きで調整することになります。

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド（今回）
⇒　その５ IE 対応
⇒　その６ まとめ

ショートハンド一覧

Grid Layout プロパティのショートハンドです。

grid-template でまとめる

トラックの大きさを指定する grid-template-rows、grid-template-coloums、名前付きの領域を定義する grid-template-areas をまとめて指定ショートハンドです。
コンテナ（親要素）に指定。

指定の方法は2通りあります。
この図のレイアウトを指定する例です。

＜方法 ① grid-template-rows / grid-template-columns をまとめる＞

grid-template: 200px 1fr  / 300px 1fr;  /* 各行トラック高さ / 各列トラック幅 */

行と列の間には、スラッシュを挟みます。

＊ この方法では、grid-template-areas は初期化されます。grid-template-areas を合わせて指定したい場合は、grid-template の後に、grid-template-areas を指定します。

＜方法 ② grid-template-areas　grid-template-rows / grid-template-columns をまとめる＞

grid-template: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
               "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
              / 300px 1fr         /* / 各列トラック幅 */

実際のレイアウトと近い配置に指示が書かれるので、CSS 上でも視覚化されるような指定方法ですね。
行、列の大きさは省略可。

grid でまとめる

コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンドです。
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow を単一の宣言で設定します。

指定の方法は３通りあります。

＜方法 ① grid-template-area　grid-template-rows / grid-template-columns をまとめる＞
grid-template の方法 ① 、または方法 ② と同じです。
（ですが、grid-template とは異なり、grid では、ほかの grid のサブプロパティはすべて、初期値に初期化されます。）

grid: 200px 1fr / 300px 1fr;  /* 各行トラック / 各列トラック */

grid: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
      "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
     / 300px 1fr         /* / 各列トラック幅 */

＜方法 ② grid-auto-flow: row と grid-template-columns をまとめる＞
grid-auto-flow: row を指定するので、アイテムは1行目から順に右から左へ埋められていきます。
行トラック数 ⇒ 可変。全てのアイテムが埋まるまで行は加算されます。
列トラック数 ⇒ 固定。このプロパティで指定した数。

grid: auto-flow 100px / 1fr 1fr 1fr;   /* 行に auto-flow、行トラックの高さ / 各列トラックの幅 */

スラッシュ前：行を定義しています。auto-flow で、アイテムの並び方（grid-auto-flow: row）と行数可変を指定し、続いて 100px と行の高さを指定しています。
スラッシュ後：列を定義しています。1fr の幅で 3 列になります。

＜方法 ③ grid-template-rows と grid-auto-flow: column をまとめる＞
grid-auto-flow: column を指定するので、アイテムは1列目から順に上から下へ埋められていきます。
行トラック数 ⇒ 固定。このプロパティで指定した数。
列トラック数 ⇒ 可変。全てのアイテムが埋まるまで列は加算されます。

grid: 1fr 1fr 1fr / auto-flow 100px;  /* 各行トラックの高さ / 列に auto-flow、列トラックの幅 */

スラッシュ前：行を定義しています。1fr の高さで 3 行になります。
スラッシュ後：列を定義しています。auto-flow で、アイテムの並び方（grid-auto-flow: column）と列数可変を指定し、続いて 100px と列の幅を指定しています。

grid-gap でまとめる

トラック間の隙間を指定する grid-row-gap と grid-column-gap をまとめて指定するショートハンドです。
コンテナ（親要素）に指定。

grid-gap: 10px;  /* 行列ともトラック間の隙間 10px */

grid-gap: 3% 5%;  /* 行トラック間の隙間 3%　列トラック間の隙間 5% */

grid-gap は、値が1つの場合は、行、列とも一括指定、スペースを挟んで二つの場合は、1つ目が行、2つ目が列の値になります。

grid-row, grid-column 開始と終了を分けて記述

アイテムの領域を指定する grid-row と grid-column は、開始と終了のライン番号をまとめて記述しているショートハンドです。
これを、開始と終了を分けて指定することができます。
アイテム（子要素）に指定。

grid-row-start: 1; /* 行の領域の開始するライン番号 */
grid-row-end: 2;   /* 行の領域の終了するライン番号 */

grid-column-start: 2; /* 列の領域の開始するライン番号 */
grid-column-end: 3;   /* 列の領域の終了するライン番号 */

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ（今回）
⇒　その４ ショートハンド
⇒　その５ IE 対応
⇒　その６ まとめ

これまで触れてきた基本となる5つのプロパティ一覧です。

Grid Layout モジュールに含まれる、これ以外のプロパティをまとめます。

gap プロパティ

トラック間の隙間を定義するプロパティで、親要素（コンテナ）で指定します。

grid-row-gap　⇒ 　行の間の隙間を指定
grid-column-gap ⇒ 列の間の隙間を指定

grid-row-gap: 3%;

grid-column-gap: 20px;

値には、px、em、%、normal（ブラウザに依存）などが指定できます。

grid プロパティには、calc() 関数も利用できます。

grid-row-gap: cal(20px + 10%);

＊ CSS の仕様書を読むと、当初は grid-gap プロパティで定義されていましたが、今は、この接頭辞なしの、gap に置き換えられています。
grid-row-gap ⇒ gap-row
grid-colomn-gap ⇒ gap-colomn
ですが、grid-gap を実装していて、gap を実装していないブラウザがあるため、接頭辞付きのプロパティを使用した方がいいようです。

grid-template-areas と grid-area の組み合わせ

grid-template-areas は、各アイテムに対して、名前付きの領域を定義するプロパティで、親要素（コンテナ）で指定します。

grid-area を使って、アイテムと領域の名前を関係づけます。

この図のレイアウトを例にして、領域を指定する場合を見ていきます。

まず、コンテナの方で、各領域を指定します。（それぞれのアイテムに grid-column、grid-row で領域を指定する代わりとなります。）

.wrapper {
display: grid;
grid-template-areas: "head head" /* 1行目の1列目　1行目の2列目 */
                     "nav  main" /* 2行目の1列目　2行目の2列目 */
grid-template-rows: 200px 1fr;
grid-template-columns: 300px 1fr;
}

grid-area を使って、grid-template-areas で定義した領域の名前を、各アイテムと関連付けるクラスを作ります。

.head {
grid-area: head;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}

grid-auto-row, grid-auto-column

拡張したトラックの大きさを指定するプロパティです。
トラックの大きさは、grid-template-rows / grid-template-columns で指定しますが、アイテムがそこに収まらない場合も考えられます。例えば、セルに対して、アイテムの方が多すぎる、なんていう場合です。
また、コンテナにそもそも grid-template-rows / grid-template-columns を指定していない場合、行数、列数、大きさが不明ということもあります。
こういった場合に、grid-auto-rows / grid-auto-columns で、トラックの幅を指定します。コンテナに指定します。

grid-auto-row: minmax(20% 1fr);

grid-auto-column: 20px;

値には、長さの単位、%、fr、max-content、min-content、minmax()関数、auto（初期値）が指定できます。

grid-auto-flow

アイテムを配置する方向を指定するプロパティです。
アイテムに grid-row、 grid-column、grid-area を特に指定しない場合、アイテムは、1行目の左から右へ、2行目の左から右へ・・・と埋まっていきます。
これはデフォルトで、grid-auto-flow: row となっているからです。

《 アイテムの配置される順番（grid-row、 grid-column、grid-areaで指定がない場合）》
grid-auto-flow: row ⇒ 1行目の左から右へ、2行目の左から右へ・・・
grid-auto-flow: column ⇒ 1列目の上から下へ、2列目の上から下へ・・・
grid-auto-flow: dense ⇒ 空いているスペースをなるべく埋める
grid-auto-flow: row dense ⇒ 1行目の左から右へ、2行目の左から右へ・・・空いているスペースをなるべく埋める
grid-auto-flow: column dense ⇒ 1列目の上から下へ、2列目の上から下へ・・・空いているスペースをなるべく埋める

Grid Layout モジュール以外のプロパティ

Grid Layout モジュール以外のプロパティで、配置の指定によく利用するものをまとめます。

justify-content： コンテナに指定。グリッドの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）

align-content： コンテナに指定。グリッドの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）

justify-item： コンテナに指定。全アイテムの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）

align-item：コンテナに指定。グリッドの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）

justify-self： アイテムに指定。そのアイテムの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）

align-self：アイテムに指定。そのアイテムの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）

order： アイテムに指定。並ぶ順番
値： 整数

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値（今回）
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド
⇒　その５ IE 対応
⇒　その６ まとめ

各トラックの値の指定の方法

grid-template-columns と grid-template-rows、この二つのプロパティを利用して、トラックの値を指定することについて、前回の基本で触れました。

grid-template-coloums : 1列目幅 2列目の幅 ・・・;
grid-template-rows: 1行目の高さ 2行目の高さ・・・;

トラックの値には、px や fr など以外にも、CSS 関数を利用することもできます。
（以下、grid-template-columns を利用する例を記述しますが、grid-template-rows も同じように値を指定できます。）

minmax()

CSS の minmax() 関数が利用できます。

grid-template-columns: minmax(200px, 1fr) 300px;

minmax(最小値, 最大値);

上記の例の場合、1トラック目は、最低 200px でフレキシブルに広がり、2トラック目は 300px となります。

repeat()

CSS の repeat() 関数が利用できます。

grid-template-columns: repeat(3, 200px);

repeat(繰り返し回数, 各トラックの値);

上記の例の場合、200px を3回繰り返す、つまり
grid-template-columns: 200px 200px 200px;
と同じです。

repeat(auto-fit | auto-fill)

例えば、200px のトラックを、何個でもできるだけ詰めたいという場合に、repeat() 関数の中で、auto-fit または auto-fill が利用できます。

grid-template-columns: repeat(auto-fit, 200px);

grid-template-columns: repeat(auto-fill, 200px);

表示領域の大きさに合わせて、自動的にアイテムが並べられます。

auto-fit も auto-fill も自動的に並べられるということに関しては同じ動きをしますが、左側の余白の扱われ方が違います。

auto-fit では、全てのアイテムを並べて、右側にスペースがあるとき、それはただの余白として扱われます。

auto-fill では、全てのアイテムを並べて、右側にスペースがあるとき、空のアイテムを並べるように、そのトラック幅が確保されます。

左揃えに並べている分には、auto-fit も auto-fill も違いがないのですが、justify-content: center; で中央揃えにすると、auto-fill では、この空のアイテムの幅もアイテムとして扱われるので、思うように中央に揃わないということもあります。

また、次の項で説明する repeat()、minmax()、auto-fit または auto-fill を組み合わせて利用する場合など、特徴の違いがよく分かるかと思います。

repeat(auto-fit | auto-fill, minmax())

repeat()、minmax()、auto-fit または auto-fill を組み合わせて利用することで、トラックの幅がフレキシブルに変化し、また自動的に折り返し配置されるレイアウトが実現できます。こちらの GIF アニメのような動きになります。

auto-fit では、各トラックは最小幅以上で、常に右側に空白ができないように伸縮します。
auto-fill では、全てのアイテムが一列に並ぶまでは、auto-fit と同じく右側に空白ができないように伸縮しますが、さらに表示スペースが広がると、空のアイテムのトラック幅が確保されていきます。

CSS はこのようになります。

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

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

アイテムの領域の値の指定の方法

grid-column と grid-row、この二つのプロパティを利用して、アイテムの領域の値を指定することについて、前回の基本で触れました。

grid-column: 列の領域の開始するライン番号 / 列の領域の終了するライン番号;
grid-row: 行の領域の開始するライン番号 / 行の領域の終了するライン番号;

アイテム領域の値を指定する特殊な方法をまとめます。
（以下、grid-column を利用する例を記述しますが、grid-row も同じように値を指定できます。）

span を利用して自動配置

始まりと終わりのライン番号を指定するのではなく、隣接するセルをいくつ結合して領域とするかを指示します。

grid-column: span 2;

この例の場合、このアイテムの列の領域は2トラック分となります。領域の開始位置は、前のアイテムの終了位置となります。

grid-column: 3 / span 2;

span の前に、整数とスラッシュがある場合、それは領域の開始位置を指定しています。この場合、領域はライン番号 3 から始まり、2トラック分となります。

grid-column: span 2 / 5;

span の後に、スラッシュと整数がある場合、それは領域の終了位置を指定しています。この場合、領域は2トラック分で、ライン番号 5 で終わります。

負のライン番号

アイテムの領域を指定するライン番号が、負の値で記述されることがあります。これは、図のように、逆方向にラインを読むこともできるからです。
左から右 / 上から下： 正の値
右から左 / 下から上： 負の値

この正の値と負の値を混ぜて記述することもできます。

（ややこしいですね　汗）

grid-column: 2 -1;

この例の場合、上の図に当てはめると、-1 は 4 に相当します。
grid-column: 2 -1; は、grid-coloumn: 2 4; と同じことを意味します。

Grid Layout は、ウェブサイトのレイアウトを構築するための CSS モジュールです。格子状の表のようなセルを構成し、それらを組み合わせたり、順番を入れ替えたりすることで、様々なレイアウトが可能になります。

割合簡単で自由度が高いのでとても便利なのですが、残念なことにIE11 などの古いブラウザは新しい仕様に対応していません。（ベンダープレフィックスでの記述など調整が必要になります。「Grid Layout を使いこなす – その５」 で方法をまとめます。）

今回は Grid Layout の基本的な考え方、利用の仕方についてまとめます。

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本（今回）
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド
⇒　その５ IE 対応
⇒　その６ まとめ

Grid Layout について

このようなシンプルな HTML をレイアウトすることを考えていきます。

<div>
  <div>ヘッダー</div>
  <div>ナビ</div>
  <div>コンテンツ A</div>
  <div>コンテンツ B</div>
</div>

↓ の左の図のように、特にレイアウトをかけないと、それぞれの要素は縦方向に順に並びます。
右の図のように CSS でレイアウトするには、Flexbox や、Float を利用することでも実現できますが、今回は Grid Layout で実現します。

Grid Layout の基本的な考え方です。
↓の左の図を見てください。表を描くように、線を引いて、格子状にマス目を作ります。それぞれの線には番号が振られます。列（横方向）は左から右へ、行は（縦方向）は上から下へ。この線をライン、マス目をセル、列や行をトラックと呼びます。
右の図を見てください。このセルに合わせる形で、アイテム（それぞれの子要素）の領域を決めていきます。全てのアイテムを、コンテナ（親要素）で包みます。

Grid Layout の基本となるプロパティ

Grid Layout 手順 ① レイアウトを決める

表を作るように、各トラックの値を決めます。
セルを埋めるように、アイテムの領域を決めます。
トラックの値には、px などの長さを表す単位や % が使えるほか、残りのスペースをフレックスに指定する fr も利用できます。

＜fr の使い方＞
例えば、この図の場合、行を見てみると、1トラック目は 200px で、2トラック目、3トラック目は残りを均等に割与えています。その部分は、どちらも 1fr を指定します。
仮に、2トラック目が3トラック目の倍の高さに指定する場合、2行目は 2fr、3行目は 1fr となります。
この図の列は、1トラック目が300px、2トラック目は 1fr なので、2トラック目は残り全部となります。

Grid Layout 手順 ② CSS を記述する

CSS 親要素（コンテナ）

.wrapper {
  display: grid;                      /* コンテナ作成 */
  grid-template-rows: 200px 1fr 1fr;  /* 各行トラック高さ */
  grid-template-columns: 300px 1fr;   /* 各列トラック幅   */
}

grid-template-rows: 1トラック目 2トラック目・・・;
grid-template-coloums: 1トラック目 2トラック目 ・・・;

という具合に記述します。それぞれの値の間には半角スペースを挟みます。

CSS 子要素（アイテム）

.header {               /* ヘッダークラス */
  grid-row: 1 / 2;      /* 行の領域 */
  grid-column: 1 / 3;   /* 列の領域 */
}

.navi {                 /* ナビクラス */
  grid-row: 2 / 4;      /* 行の領域 */
  grid-column: 1 / 2;   /* 列の領域 */
}

.content-a {            /* コンテンツAクラス */
  grid-row: 2 / 3;      /* 行の領域 */
  grid-column: 2 / 3;   /* 列の領域 */
}

.content-b {            /* コンテンツBクラス */
  grid-row: 3 / 4;      /*  行の領域 */ 
  grid-column: 2 / 3;   /*  列の領域 */
}

アイテムごとに、クラスを作り、領域を指定します。

レイアウト図のライン番号に注目してください。

grid-row: 行の領域の開始するライン番号 / 行の領域の終了するライン番号;
grid-column: 列の領域の開始するライン番号 / 列の領域の終了するライン番号;

というように記述します。
開始ライン番号と終了ライン番号の間には / （スラッシュ）を挟みます。

終了ライン番号を省略した場合、領域は1トラックとみなされます。

Grid Layout 手順 ③ HTML にクラスを指定

あとは、CSS で作成したクラスを、HTMLのそれぞれの要素に指定します。

<div class="wrapper">
  <div class="header">ヘッダー</div>
  <div class="navi">ナビ</div>
  <div class="content-a">コンテンツ A</div>
  <div class="content-b">コンテンツ B</div>
</div>

サンプルページ
grid-layout.html

基本は以上ですが、次回、Grid Layout のより細かな設定の仕方をまとめたいと思います。
⇒　Grid Layout を使いこなす – その２ トラック、領域の値