名前付きラインと名前付きグリッドエリア
グリッドのラインとエリアに名前を付け、より読みやすく保守しやすいグリッド配置を実現します。
「名前付きラインと名前付きグリッドエリア」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
グリッド線に名前を付ける
grid-template-columns と grid-template-rows の中で角括弧を使うと、グリッド線に名前を付けられます。名前付きの線を使うと、番号だけを使うより配置コードが読みやすくなります。
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>名前付きの線で項目を配置する
読みやすく配置するには、grid-column と grid-row で名前付きの線を使用します。
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>-start と -end を使った線の名前
grid-template-areas で名前付き領域を定義すると、CSS によって -start と -end の接尾辞を持つ名前付きの線が自動的に作成され、それらを参照できるようになります。
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>名前付きの線を繰り返す
repeat() を使用する場合、繰り返すパターン内に名前を含めることができます。線には区別するための番号付き接尾辞が付加されます。
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>名前付きの線をまたいで配置する
名前付きの線と span を使うと、指定した数の名前付きトラックをまたいで配置できます。
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>名前付き領域のまとめ
項目の配置には、名前付き領域（grid-template-areas を使用）が最も読みやすい方法です。
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>複雑なレイアウトで名前付きの線を使う
名前付きの線は、複数の要素がまたがる複雑なエディトリアルレイアウトで特に役立ちます。
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>名前と番号の組み合わせ
同じグリッド内で、名前付きの線と線番号を自由に組み合わせられます。
<div class="layout"><div class="item">Item</div></div>1 本の線に複数の名前を付ける
1 本の線に複数の名前を付けることができます。1 つの領域の終端と別の領域の始端を兼ねる線などで便利です。
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>領域から暗黙的に作成される名前付きの線
「main」という名前付き領域を定義すると、main-start（列と行）と main-end の線が自動的に作成されます。これらを重なり合う項目に使用できます。
DevTools で名前付きの線をデバッグする
Chrome と Firefox の DevTools では、オーバーレイ上のラベルとして名前付きグリッド線を表示できます。Layout パネルで線のラベルを有効にし、名前が正しいことを確認します。
確認問題
grid-template-areas で「sidebar」という名前付きグリッド領域を定義すると、どの線の名前が自動的に作成されますか。
まとめ
読みやすく配置するには、トラック定義内の角括弧でグリッド線に名前を付けます。名前付き領域を定義すると、-start と -end の線名が自動的に生成されます。1 本の線には複数の名前を付けられます。名前付きの線は span や番号と自由に組み合わせられます。DevTools を使って、名前付きの線をオーバーレイとして視覚化しましょう。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「名前付きラインと名前付きグリッドエリア」レッスンは無料ですか？
はい。「名前付きラインと名前付きグリッドエリア」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「名前付きラインと名前付きグリッドエリア」で何を学びますか？
グリッドのラインとエリアに名前を付け、より読みやすく保守しやすいグリッド配置を実現します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「名前付きラインと名前付きグリッドエリア」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 名前付きラインと名前付きグリッドエリア
- minmaxによるauto-fitとauto-fill
- 暗黙的グリッドとGrid-Auto-Flow
- 整列した入れ子コンテンツのためのSubgrid