VIDEO LESSON

CSSのgrid-template-areasの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 8:04動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、グリッド・テンプレート・エリアズです。
0:08グリッドで作った行と列の上に、ヘッドやメインといった名前を付けて、レイアウト全体の配置図を文字で描くプロパティです。
0:17線の番号で位置を指定する方法と違い、見た目の形そのものをコードに表せるのが大きな特徴です。
0:24たとえば一番上は見出しが横いっぱい、その下は左に補足、右に本文、といったよくあるページ構成を、
0:29そのまま読み取れる形で書けます。
0:35まずは全体像をつかんでいきましょう。
0:37番号で指定する方法に慣れた方ほど、この見やすさに驚くはずです。
0:42まず基本の書き方です。
0:44対象のセレクターに、プロパティ名、コロン、値、セミコロンを書く形はほかのプロパティと同じです。
0:52スライドの例では、クラス名デモを持つ要素に、グリッド・テンプレート・エリアズと指定し、
0:57引用符で囲んだ文字列を二つ並べています。
1:02引用符一つが一行分を表し、中の単語がその行の各列に入る領域名です。
1:07この例では、一行目はヘッドが二列分、二行目は左がサイド、右がメインという配置になります。
1:15大切なのは、並べる親の方へ書く点です。
1:18まずはこの基本形を覚えてください。
1:20引用符は半角で書き、文字列同士は空白で区切る点も確認しておきましょう。
1:26指定できる値の読み方を整理します。
1:29引用符の中では、空白で区切った単語が左から右へ列の順に並びます。
1:34同じ名前を横に並べると、その領域は複数の列にまたがって広がります。
1:40また、ドットを書くと、そのマスは空き領域になります。
1:44何も置きたくない場所や、形を整えたいときに使います。
1:49文字列の数が行の数、単語の数が列の数に対応する、と覚えると読みやすくなります。
1:56コードを見ただけで完成形のレイアウトが頭に浮かぶのが、この書き方の強みです。
2:02名前は自分で決められますが、役割が伝わる言葉を選ぶのがおすすめです。
2:08行ごとに引用符を分けることで、改行した見た目と実際の行が対応し、読み間違いを防げます。
2:15次に、子要素との連携です。
2:18親に配置図を描いただけでは項目は自動では入りません。
2:22各子要素にグリッド・エリアというプロパティで、地図に書いた名前を指定します。
2:29たとえば見出しの要素にはヘッド、補足にはサイド、本文にはメインと書くと、
2:34それぞれ名前が一致する領域へ配置されます。
2:38親の地図と子の名前はセットで初めて意味を持つ、と考えてください。
2:44片方だけ書いても配置は完成しません。
2:47この二段構えを理解しておくと、後で出てくる効かない原因の多くも自然に説明できるようになります。
2:55名前は半角の英数字とハイフンなどで書き、親と子でまったく同じつづりにそろえることが大切です。
3:03初期値と継承を確認します。
3:05初期値はノーンで、名前付きの領域は定義されていない状態です。
3:10そして通常の継承はしません。
3:12親要素に書いた配置図が、子要素へ自動で伝わることはありません。
3:16あくまでグリッドの親に書くことで、その直下の子がグリッド・エリアで参照できるようになる仕組みです。
3:24仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点も、
3:28あわせて押さえておきましょう。
3:32インヘリットやイニシャルなどの共通キーワードの意味も、ほかのプロパティと同様です。
3:38共通キーワードを使う場面は多くありませんが、初期値がノーンであることはしっかり覚えておきましょう。
3:45実例を見ていきます。
3:47まずエイチティーエムエルの用意です。
3:50ステージという土台の箱の中にデモがあり、その中に見出し、補足、本文の三つの項目を入れます。
3:57それぞれアイテムという共通クラスに加えて、ヘディング、サイド、メインという個別のクラスを持っています。
4:04頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
4:10親と子の構造そのものが例の一部です。
4:13グリッドの親はデモ、配置される子は三つの項目、という役割分担を意識してください。
4:19項目が三つだけなので、配置図を変えたときの変化をはっきり観察できます。
4:24個別クラスがあるおかげで、シーエスエス側から三つの項目を区別して名前を割り当てられます。
4:31次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:36ステージと項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
4:42デモにはディスプレイ、グリッドを指定し、列は一対二の比率の二列、隙間はれい点ごレムとします。
4:49子にはそれぞれグリッド・エリアで名前を指定し、最後にデモへグリッド・テンプレート・エリアズ、
4:55ヘッド、ヘッド、サイド、メインを加えます。
5:00すると見出しが上段を横いっぱいに使い、下段は左に補足、右に本文が並びます。
5:06主役は最後のこの一行です。
5:08土台の指定は共通なので、最後の配置図だけに注目して変化を追うことができます。
5:14値を変えて比べてみましょう。
5:16最後のグリッド・テンプレート・エリアズの値だけを、ヘッド、サイド、メイン、
5:20メインへ置き換えます。
5:23ファイルを保存してブラウザーを再読み込みすると、今度は上段が左に見出し、
5:27右に補足、下段は本文が横いっぱいという配置に変わります。
5:31エイチティーエムエルも、子のグリッド・エリアも一切変えていないのに、地図の描き替えだけで全体の並びが入れ替わる点に注目してください。
5:40比較のコツは、変えるのはこの値ひとつだけにすることです。
5:44レイアウト変更に強い書き方だと実感できます。
5:47このように配置図だけを差し替える方法は、画面幅ごとに別の地図を用意するときにも応用できます。
5:53間違えやすい点を整理します。
5:55最も重要なルールは、同じ名前の領域は長方形を作らなければならないことです。
6:00エル字型や飛び地のような形は作れません。
6:03もう一つは、各行の列数をそろえることです。
6:05一行目が二列、二行目が三列のように数が違う定義は不正となり、グリッド・テンプレート・エリアズ全体が無効になります。
6:13一部だけ効く、ではなく丸ごと効かなくなる点が落とし穴です。
6:17また、子のグリッド・エリアの名前と、親の地図の名前が一文字でも違うと配置されません。
6:22つづりの一致もあわせて確認しましょう。
6:25定義が無効になった場合は、ほかの行まで含めて全体を見直すことが解決への近道になります。
6:31効かないときの確認手順です。
6:33まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
6:40次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見てください。
6:47スタイルズで宣言が無効扱いになっていないかも重要です。
6:52特にこのプロパティは、長方形でない形や列数の不一致があると宣言自体が無効になります。
6:58コンピューテッドで最終的な値を確認し、親の表示方式がグリッドになっているかも調べましょう。
7:06三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。
7:13順番に切り分けて調べることで、地図の形の問題か、名前の対応の問題かを特定しやすくなります。
7:20最後に互換性とまとめです。
7:22二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、
7:27ファイアフォックスは五十二以降、サファリは十点一以降で対応しています。
7:32アンドロイド版クロームは五十七以降、アイオーエス版サファリは十点三以降です。
7:38練習は、まず二つの配置の違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
7:45まとめます。
7:46グリッド・テンプレート・エリアズは親に名前の地図を描く指定で、初期値はノーン、
7:49継承はしません。
7:53関連するグリッド・テンプレート・カラムズ、グリッド・テンプレート・ロウズ、
7:58グリッド・エリアもあわせて確認すると理解が深まります。
8:02お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

grid-template-areasの役割と主な指定値を解説。見出し、補足、本文の配置が領域名の組み合わせで変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのgrid-template-areasの使い方：指定値・実例・効かない原因とブラウザー互換性 →