【CSS】Grid Layout を使いこなす – その6 まとめ

その1 基本

基本的な考え方

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

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

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

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

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

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

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

minmax() 関数

repeat() 関数

repeat(auto-fit | auto-fill)

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

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

span を利用して自動配置

負のライン番号

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

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

その4 ショートハンド

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 に分ける。

その5 IE 対応

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

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

【CSS】Grid Layout を使いこなす – その5 IE 対応

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

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド
⇒ その5 IE 対応(今回)
⇒ その6 まとめ

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

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

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

CSS Grid Layout (level 1) IE ベンダープレフィックス 対応メモ
display: grid diplay: -ms-grid
grid-template-rows -ms-grid-rows
grid-template-columns -ms-grid-columns
grid-template-areas
grid-template -ms-grid-rows, -ms-grid-columns で対応
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid -ms-grid-rows, -ms-grid-columns で対応
grid-row-start -ms-grid-row
grid-column-start -ms-grid-column
grid-row-end -ms-grid-row-span で対応
grid-column-end -ms-grid-column-span で対応
grid-row -ms-grid-row, -ms-grid-row-span で対応
grid-column -ms-grid-column, -ms-grid-column-span で対応
grid-area
grid-row-gap 空のトラックを挟むことで対応
grid-column-gap
grid-gap
-ms-grid-row-span grid-row-end の代わり
-ms-grid-column-span grid-column-end の代わり

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 では、自動的にそれに合うように変更されません。そのようなものを使わないか、手書きで調整することになります。

Gulp などで実装する場合は、grid-template-areas など対応する互換性のあるコードに変換してくれる機能もあります。

<ブラウザの指定方法例>

ブラウザ指定 詳細
IE 11 IE 11 のみ
Edge >= 10 Edge 10 以上
iOS < 10 iOS 10 未満
last 4 versions 主要ブラウザの直近4バージョンのブラウザ
last 2 Firefox versions Firefox 直近2バージョン
> 1% シェア率1%以上のブラウザ
> 1%, last 2 versions シェア率1%以上で、直近2バージョンのブラウザ

【CSS】Grid Layout を使いこなす – その4 ショートハンド

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

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド(今回)
⇒ その5 IE 対応
⇒ その6 まとめ

ショートハンド一覧

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

ショートハンド 含まれるプロパティ
grid-template grid-template-rows, grid-template-coloums, grid-template-areas
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid-gap grid-row-gap, grid-column-gap
grid-row grid-row-start, grid-row-end
grid-column grid-column-start, grid-column-end

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 を単一の宣言で設定します。

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

<方法 ① 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;   /* 列の領域の終了するライン番号 */

【CSS】Grid Layout を使いこなす – その3 基本以外のプロパティ

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

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ(今回)
⇒ その4 ショートハンド
⇒ その5 IE 対応
⇒ その6 まとめ

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

プロパティ 役割
display: grid 親要素(コンテナ)で、コンテナの作成を指示
grid-template-rows 親要素(コンテナ)で、各行トラックの高さを指定
grid-template-columns 親要素(コンテナ)で、各列トラックの幅を指定
grid-row 子要素(アイテム)で、そのアイテムの行の領域を指定
grid-column 子要素(アイテム)で、そのアイテムの列の領域を指定

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: アイテムに指定。並ぶ順番
値: 整数

【CSS】Grid Layout を使いこなす – その2 トラック、領域の値

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

⇒ その1 基本
⇒ その2 トラック、領域の値(今回)
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド
⇒ その5 IE 対応
⇒ その6 まとめ

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

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; と同じことを意味します。

【CSS】Grid Layout を使いこなす – その1 基本

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

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

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

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

⇒ その1 基本(今回)
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド
⇒ その5 IE 対応
⇒ その6 まとめ

Grid Layout について

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

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

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

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

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

プロパティ 役割
display: grid 親要素(コンテナ)で、コンテナの作成を指示
grid-template-rows 親要素(コンテナ)で、各行トラックの高さを指定
grid-template-columns 親要素(コンテナ)で、各列トラックの幅を指定
grid-row 子要素(アイテム)で、そのアイテムの行の領域を指定
grid-column 子要素(アイテム)で、そのアイテムの列の領域を指定

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 を使いこなす – その2 トラック、領域の値

【雑談】どうして Hello, World なの?

何かしらのプログラミング言語を勉強したことのある人なら、文字列を表示させるもっともシンプルな構文のテスト文言として “Hello, World” というのを目にしたことがあると思うんですが、どうして “Hello, World” なんでしょう?

ずっと前から疑問に思っていたんですが、まわりの人に聞いても、分からない、とか、特に意味はないんじゃない?、とか、たまたまじゃない?、というような感じなんですよね。

どうしてか、というのははっきりしないけど、いつから使われているのかという起源ならはっきりとしています。テスト文言として “Hello, World” を使う習慣はブライアン・カーニハンとデニス・リッチーによる著書「プログラミング言語C」(1978年)からです。

だったらカーニハンかリッチーに聞けば分かりそうな感じだけど、本人たちがそんなことにあまり言及していなかったみたいですね。たくさんの人が疑問に思ってネットでも質問しています。

でも、どこかしらになにか書かれているだろうと思って、IT系のブログや記事を散々読み漁っていたら、アメリカのITニュース配信サイト「SLATE」で、こんなの見つけました。
Why the first code a programmer writes is “Hello, World.”
NewYork Times にも寄稿しているクライブ・トンプソン氏の記事です。

抜粋です。
「Kernighan had recently seen “some cartoon of a chick coming out of an egg, and it says Hello, World,” as he told me when I called him up to ask about it. It tickled his fancy, so he used that. 」

和訳(変だったらごめんなさい)
「(どうして Hello, World なのか)質問したところ、カーニハンは、最近、こう言っていました。”卵からヒヨコが出てくる漫画があるんだけど、それが Hello, World なんだよ。” それに空想が刺激されて、彼はそれを使うことにしたのです。」

2019年10月16日の記事だったので、最近、このようにおっしゃったのでしょうか。

プログラミングの世界の入り口に立つ者が、これから広がる世界に対して「Hello, World」と1行目を書き込む、広大な世界へ歩き出したばかりのひよっこですものね。
AI だろうが、ロボットのプログラミングだろうが、この一行から始まっているんですよ。

なぜ別の言葉じゃなく、よりによって Hello, World なのか、ようやく納得できて、長年の疑問が解けてうれしくなりました。
明日から自慢げに言いふらしてしまいそうです。(自分の周りにどれぐらいこれを知りたい人がいるのかが疑問ですけど・・・ 笑)

【WordPress】本文中に PHP を利用する方法

WordPress の投稿ページにしろ、固定ページにしろ、直接 PHP を書き込むことは出来ません。不便ですよねーーー。WordPress そのものを作っているプログラミング言語が PHP であるので、PHP をコンテンツに直接書き込むとセキュリティを落とすため、書き込みができなくなっているそうです。

WordPress の本文中に PHP を利用する場合は、ショートコードを作成して利用します。
(プラグインもあるようなのですが、セキュリティ上問題があるようですね。)

ショートコードとは

別個に作ったプロブラムファイルを、本文の中に埋め込むための仕組みです。
WordPress 側ですでに用意されているショートコードもたくさんありますね。
Available shortcodes
これを自分で作るのですが、既存のコードと同じ名前にならないようにしなくてはいけません。
functions.php において、コードとプログラムを関係づけます。

ショートコード作成・利用の流れ

① 組み込みたい内容の PHP ファイルを作成。
② functions.php で、① で作成した PHP ファイルを読み込むための関数を記述。その関数を呼び出すショートコードを作成。
③ WordPress 投稿・固定ページに、②で作成したショートコードを記述。

* functions.php に、投稿・固定ページに書き込みたい PHP のコマンドを、直接記述することもできます。短ければそれでもいいのでしょうが、複数ある、長い、となることを想定して、別の PHP ファイルを作成する前提としました。

それぞれのファイルの関係はこのようになります。

① 組み込みたい内容の PHP ファイルを作成

おなじみ “Hello, World!” という文字列を表示させるプログラムです。
これを投稿ページに埋め込みます。

ex.php

<?php 
echo 'Hello, World!';
?>

このファイルは、子テーマにアップロードします。(子テーマがなければ、テーマの中ですが、子テーマは用意しておいた方がいいです。)

② functions.php で、PHP ファイルを読み込むための関数を記述 + ショートコードを作成

子テーマの中の functions.php に記述します。(子テーマがなければテーマの中の)

functions.php

<?php

// 投稿ページのショートコードで指定された PHP ファイルを読み込む関数
function sc_php($atts = array()) {
  shortcode_atts(array(   /* shortcode_atts でショートコードの属性名を指定 */
    'file' => 'default'   /* 属性名とデフォルトの値 */
  ), $atts);   /* 属性を格納する変数 */
  ob_start();   /* バッファリング */
  include(STYLESHEETPATH . "/$atts[file].php");  /* CSSのあるパス = 子テーマのパスを指定 */
  return ob_get_clean();  /* バッファの内容取得、出力バッファを削除 */
}

// ショートコード作成(sc というショートコードは、sc_php()という関数を呼び出すという意味)
add_shortcode('sc', 'sc_php');
?>

何をやっているのか、一行一行コメントアウトしてみました。(ちょっと鬱陶しいかも 笑)

9行目の include(STYLESHEETPATH . “/$atts[file].php”);
ですが、STYLESHEETPATH は、CSS のあるディレクトリへのパスということです。
CSS は子テーマに入っているので、作成した PHP ファイルも、同じ子テーマに入っているという前提で記述しています。もし、子テーマでなく、別の場所に PHP ファイルがある場合は、そのパスを記述します。

③ WordPress 投稿・固定ページに、ショートコードを記述

PHP を埋め込みたい投稿または固定ページに、ショートコードを記述します。
ショートコードは、[ショートコード名 属性] という形になります。今回は、属性に呼び出したいファイル名を記述します。file という属性は、functions.php で規定しましたね。

[sc file='ex.php']

これでブラウザには、ex.php の中身、
Hello, World!
と表示されます。

【.htaccess】Options ディレクティブ / DirectoryIndex ディレクティブ

Options ディレクティブ

クライアントがディレクトリ名の最後に / を指定して、そのディレクトリの中に、index.html ファイルがなかった場合、このようにディレクトリの中のファイルの一覧が表示されます。

内容を見せたくない場合、好ましくありませんね。

Options ディレクティブでは、ディレクトリに対してどの機能が使用可能かを制御することができます。

ディレクトリ内の一覧を見せないようにする構文例です。

Options -Indexes

“Option” に続いて、機能の値を記述します。

  • 複数の機能を指定する場合は、半角スペースで区切って指定します。
  • + や – を機能の値の前に付けることでディレクトリ毎の設定を変更できます。上位のディレクトリの設定に対して、追加、削除、していくことになります。
  • ↓ Options ディレクティブに指定可能な値一覧
    説明
    All MultiViews を除いた全ての機能が有効化。(デフォルト)
    ExecCGI mod_cgi による CGI スクリプトの実行可能化。
    FollowSymLinks シンボリックリンクを有効化。
    Includes mod_include が提供する SSI を有効化。
    IncludesNOEXEC SSI ⇒ 有効化。#exec コマンド / #exec CGI ⇒ 無効化。
    Indexes DirectoryIndex ディレクティブ(↓ で詳細記述)で指定したファイル (例えば index.html) がなければ、ディレクトリ一覧を表示許可。
    MultiViews リソースが複数の表現 (例えば、日本語や英語など) で利用できる場合、適切な言語や MIMEタイプ(Content-Type) を優先的に要求するコンテンツネゴシエーションを許可。
    SymLinksIfOwnerMatch シンボリック先のファイルやディレクトリが、シンボリックリンクの所有者と同じ権限である場合、シンボリックリンクを許可。
    None すべてのオプションを無効。

上記の構文の例では、オプションの値を “-Indexes” と指定し、ディレクトリの一覧の表示を許可する機能を、削除しています。

ブラウザで一覧は表示されなくなり、代わりに、403 Forbidden(アクセス権限がないエラー)が表示されます。

DirectoryIndex ディレクティブ

↑ で、クライアントがディレクトリ名の最後に / を指定し、index.html ファイルがなかった場合、ディレクトリの中のファイルの一覧が表示されることについて触れましたが、DirectoryIndex ディレクティブでは、ディレクトリインデックスを、index.html 以外に設定することができます。複数のディレクトリインデックスを指定している場合は、最初に見つかったものを返します。

DirectoryIndex index.html index.php top.html

上記の例では、index.html がなければ index.php、index.php がなければ top.html を呼び出します。

さらに、index.html も index.php も top.html も見つからない場合、
Options Indexes で一覧表示が許可されている場合 ⇒ ディレクトリのファイル一覧表示
Options Indexes で一覧表示が許可されていない場合 ⇒ 403 Forbidden

【.htaccess】ErrorDocument ディレクティブ

問題やエラーが発生したとき、ブラウザでこのように表示されることがありますね。これは、Chrome の存在しないページのリクエストに応答する 404 ページです。
こうなってしまうと、ユーザは別のサイトへ移動してしまったりするので、ユーザをサイト内の有益なコンテンツへ導けるように、独自にエラー表示を設定する方がいいですよね。

ErrorDocument ディレクティブは、問題やエラーが発生したときの動作を指定できます。

ErrorDocument の基本構文

Redirect ディレクティブで、URL を自動転送する基本的な構文です。

ErrorDocument error-code document
  • ErrorDocument
  • エラードキュメントの表示方法の設定の宣言です。

  • error-code
  • エラーのステイタスコードを指定します。↓ 主なコードの一覧

    コード エラー内容 意味
    401 Unauthorized ユーザー認証が必要なページで認証に失敗
    403 Forbidden 権限がない(ディレクトリにアクセスしようとしたなど)
    404 Not Found 指定したファイルが存在しない
    500 Internal Server Error サーバがリクエスト実行できない(PHP などのバグ、.htaccess の設定ミス)
    501 Not Implemented リクエストを処理できる機能がサーバにない
    503 Service Unavailable サービス利用不可
  • document
  • 表示するテキストまたはファイルへのパスを指定します。

    ErrorDocument ディレクティブは、問題やエラーが発生したとき、指定できる動作は、4 つがあります。

    ① Apache 標準のエラーメッセージを表示(デフォルト。↑ の Chrome の画面のような表示)
    ② 自分で指定した任意のメッセージを表示
    ③ 内部サーバの別の URL-path にリダイレクト
    ④ 外部サーバの別の URL にリダイレクト

    以下、②~③まで、例を一つずつ見ていきます。
    (①はデフォルトなので、特に設定の必要はありません。)

<document ⇒ 自分で指定した任意のメッセージを表示>

ErrorDocument 404 "Sorry... The file not found"

エラーコードの後に、メッセージをダブルクォート(”)で囲んで記述します。

<document ⇒ 内部サーバの別の URL-path にリダイレクト>

ErrorDocument 404 /error/404.html

“/” で始まるドキュメントルートからの相対パスを指定します。この例ですと、.htaccess ファイルの置かれたディレクトリ内、error というディレクトリの中にある 404.html へリダイレクトされます。

(401: 認証失敗、404: 未検出の場合、次で説明する「外部サーバーへのリダイレクト」ではなく、こちらの「内部サーバへのリダイレクト」を利用します。↓の理由参照)

<document ⇒ 外部サーバの別の URL にリダイレクト>

ErrorDocument 404 http://example.com/404.html

http などから始まる完全な URL を指定します。

注意しなくてはいけないのは、完全な URL を指定するリダイレクトにすると、例え内部サーバであっても、クライアントには、「エラーステイタスコード」ではなく、「リダイレクトステイタスコード」を通知します。
404 エラー(未検出)であるのに、有効なファイルかと、スクローラーなどのロボットは、混乱する可能性があります。
また、401 エラー(認証失敗)で外部 URL へリダイレクト指定する場合、クライアントは 401 のステータスコードを受け取らないため、パスワードをユーザに入力要求しなければならないことが分かりません。

そのため、401、404 エラーの場合は、相対パスを指定する「内部サーバへのリダイレクト」を記述します。

有益な 404 ページを作成

自分のサイトに合わせた 404 ページをカスタマイズすることで、クライアントに有益な情報を提供することができます。
有益な 404 ページを作るためのポイントは、Google のウェブマスターのページによると以下の通りです。

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
  • 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
  • 404 ページが Google や他の検索エンジンのインデックスに登録されないようにするため、存在しないページがリクエストされたときにウェブサーバーが実際の 404 HTTP ステータス コードを返すことを確認します。

.htaccess ファイルは、一番最後に空行が必要です。忘れずに・・・。