CSSでグリッドテンプレートエリアを使用する方法-CSSチュートリアル-php.cn

グリッドコンテナ内の名前の領域を定義します

グリッドアイテムをエリアに割り当てます

重要なルールとヒント

グリッドテンプレートエリアを使用したレスポンシブレイアウト

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでグリッドテンプレートエリアを使用する方法

Thomas Edward Brown

Aug 22, 2025 am 07:56 AM

css

Grid-Template-Areasプロパティにより、開発者は名前付きグリッド領域を定義することにより、直感的で読みやすいレイアウトを作成できます。各文字列は行を表し、各単語は列セルを表します。これは、完全な幅ヘッダーの「ヘッダーヘッダーヘッダー」など、テンプレートのヘッダーヘッダーに一致する子要素のグリッドエリア名を持つ列セルを表します。

CSSでグリッドテンプレートエリアを使用する方法

CSSのgrid-template-areasプロパティは、名前付きエリアを使用してグリッドコンテナのレイアウト構造を定義する強力で直感的な方法です。グリッドのさまざまなセクションに人間の読み取り可能な名前を割り当てることにより、複雑なレイアウトを視覚化および管理しやすくなります。

grid-template-areasを効果的に使用する方法は次のとおりです。

グリッドコンテナ内の名前の領域を定義します

最初に、 grid-areaプロパティを使用してグリッドアイテムに名前を割り当て、次に、 grid-template-areasを使用して、親コンテナのレイアウトをマップします。プロパティ内の各文字列は行を表し、各単語は列セルを表します。

 。容器 {
  ディスプレイ：グリッド;
  Grid-Template-Areas：
    「ヘッダーヘッダーヘッダー」
    「サイドバーメインメイン」
    「フッターフッターフッター」;
  グリッドテンプレート列：60px 1fr 40px;
  Grid-Template-Columns：200px 1fr 1fr;
}

この例では：

header 3つの列に及びます。
sidebar 、2行目の最初の列を取ります。
mainエリアは、2行目の2番目と3列目を取ります。
footer 、最後の行の3つの列すべてに及びます。

グリッドアイテムをエリアに割り当てます

レイアウトに参加する必要がある各直接子要素にはgrid-template-areasで使用される名前の1つに一致するgrid-area名が必要です。

 .header {grid-area：header; }
.sidebar {grid-area：sidebar; }
.main {grid-area：main; }
.footer {grid-area：footer; }

対応するHTML：

 <div class = "container">
  <div class = "header"> header </div>
  <div class = "sidebar"> sidebar </div>
  <div class = "main">メインコンテンツ</div>
  <div class = "footer">フッター</div>
</div>

重要なルールとヒント

空のセルにドットを使用します。レイアウトに空のスペースが必要な場合は、期間（ . ）を使用します。
```
 Grid-Template-Areas：
  「ヘッダーヘッダー」
  "。 主要"
  「フッターフッター」;
```
名前は正確に一致する必要があります。 grid-areaの名前は、ケースやスペルを含むgrid-template-areasの名前と正確に一致する必要があります。
各エリアは単一の長方形である必要があります。名前のあるエリアを2つの別々のパーツに分割することはできません。たとえば、連続していない限り、1列目と3列目の両方に表示されるsidebarを持つことはできません。

Whitespaceは問題ではありません。文字列を読みやすくフォーマットできます。

 Grid-Template-Areas：
  「ヘッダーヘッダーヘッダー」
  「サイドバーメインメイン」
  「フッターフッターフッター」;

行と列が推測されます：文字列の数は行数を定義します。各文字列の単語の数（スペースで区切られている）は、列の数を定義します。

グリッドテンプレートエリアを使用したレスポンシブレイアウト

メディアクエリでgrid-template-areas変更することにより、さまざまなブレークポイントでレイアウトを再定義できます。

 @media（max-width：600px）{
  。容器 {
    Grid-Template-Areas：
      "ヘッダ"
      "主要"
      「サイドバー」
      「フッター」;
    Grid-Template-Columns：1fr;
  }
}

これにより、小さな画面でレイアウトが垂直にスタックされ、モバイルの使いやすさが向上します。

基本的に、 grid-template-areas CSSのレイアウトの視覚的な青写真を提供します。構造が読みやすく、変更しやすいため、複雑なデザインやチームコラボレーションに特に役立ちます。アイテムに一貫して名前を付けて、グリッド構造を長方形に保つことを忘れないでください。

以上がCSSでグリッドテンプレートエリアを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

PHP チュートリアル

1673

276

NYTの接続はヒントと回答です

303

836

Setting up and using Magic Mouse in Windows

Related knowledge

CSSでテキストを垂直に整列させる方法 Aug 28, 2025 am 08:10 AM

themostreliablewwaytovertivally aligntextincssissisingflexboxwithalign-items：centerは、cssgridwithplace-items：centerofridsimilarbinefutgridlayouts、cssgridwithplace-items：cssgridwithplace-itemsを使用して、

CSSでリンクをスタイリングする方法 Sep 02, 2025 am 07:16 AM

リンクのスタイルは、正しい効果を確保するために、擬似クラスを介して順番に定義する必要があります。 1。a：リンクを使用して、visibleリンクスタイルを設定します。 2。A：訪問して訪問されたリンクを設定します。 3。a：ホバーを使用してホバー状態を設定します。 4。A：フォーカスを使用して、キーボードのアクセシビリティを確保します。 5。A：アクティブにクリック時間スタイルを設定します。同時に、色、テキストの装飾、マージン、背景などのCSS属性を使用して外観を強化し、十分なコントラストを確保し、リンクを区別してアクセシビリティを改善するためにフォーカスアウトラインを保持またはカスタマイズし、最終的に視覚と使用可能性の両方を考慮したリンクスタイルを実現します。

CSSで背景パターンを作成する方法 Aug 31, 2025 am 04:36 AM

CSSを使用してバックグラウンドパターンの作成は、勾配、擬似要素、または多層背景を通じて達成できる軽量で柔軟な方法です。まず、繰り返し線形勾配（）を介してストライプまたは複雑な勾配を作成し、マルチバックグラウンドオーバーレイを使用してポルカドットまたはチェッカーボードエフェクトを実現し、擬似エレメントにノイズテクスチャオーバーレイを追加できます。最後に、CSSを使用して写真なしで高解像度パターンを生成できるように、高性能と読みやすさを確保するために、応答性とアクセシビリティを考慮する必要があります。

CSSで好まれたモーションメディアクエリを使用する方法 Sep 03, 2025 am 04:32 AM

還元運動を好むと、ユーザーがシステム内のアニメーションを削減するかどうかを検出することにより、アクセシビリティが向上します。削減の値が低下した場合、ユーザーの不快感を避けるためにアニメーションを無効または簡素化する必要があります。 @media（還元運動を好む：削減）を使用して、デフォルトのアニメーションをオーバーライドし、アニメーションを設定したり、有害なモーション効果を排除したりしますが、色の変化などのわずかなアニメーション効果を保持します。同時に、テストは、コアエクスペリエンスに影響を与えることなく、より安全で快適なブラウジング環境をユーザーに提供するために、完全な機能を確保する必要があります。

CSSのTextareaでサイズ変更プロパティを使用する方法 Sep 04, 2025 am 09:09 AM

Textareaのスケーリング動作を制御するには、CSSのサイズ変更属性を使用する必要があります。 1.水平スケーリングと垂直スケーリング（デフォルト）の両方にサイズを設定します。 2。幅の調整のみを許可するように水平に設定します。 3.高さの調整のみを許可するように垂直に設定します。 4.スケーリングを完全に禁止するように設定しません。 5.ブロックとインラインは、それぞれブロックレベルとインラインの方向に対応します。 Min-Height、Max-Widthなどのプロパティと組み合わせることで、スケーリング範囲は制限され、この属性は最新のブラウザで広くサポートされており、オーバーフローが見えないブロックレベルの要素に適しています。

CSSを使用してTextareaをスタイリングする方法 Sep 16, 2025 am 07:00 AM

まず、幅、高さ、マージン、境界、フォント、色などの基本的なスタイルを設定します。 2。インタラクティブなフィードバックを強化して：Hoverおよび：フォーカス状態。 3。サイズ属性を使用して、サイズの動作を制御します。 4。::プレースホルダーの擬似要素を使用して、プレースホルダーテキストをスタイリングします。 5.レスポンシブデザインを使用して、デバイス間の可用性を確保します。 6.相関ラベル、色のコントラスト、フォーカスの概要に注意を払って、アクセシビリティを確保し、最終的に美しく機能的なテキストレアスタイルを実現します。

CSSで擬似クラスの使用方法 Sep 07, 2025 am 06:59 AM

pseudo-classesincssarekeywordsthatsyleements basedonstate、position、orattributes、interactivity and rudeducingthened forextrahtmlclasses; thealeapliedusingaColon（:) Syntaxlikeselector：pseudo-class、enablingdyfeffecfectschchasa：

CSSでポインターイベントプロパティを使用する方法 Sep 17, 2025 am 07:30 AM

pointer-events-eventsporpertyincssconstrolswhethernelementcanbetheTarget ofpointerevents.1.usepointer-events：nonetodisable interactionsionsionsionsionslikeclicksoversoverseepingtheelementはviseallyvisible.2.applyittooclaallowcliclowcliclavioturtuntowontuntuntointuentointyonelemenmen

See all articles

CSSでグリッドテンプレートエリアを使用する方法

グリッドコンテナ内の名前の領域を定義します

グリッドアイテムをエリアに割り当てます

重要なルールとヒント

グリッドテンプレートエリアを使用したレスポンシブレイアウト

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック