From d1fa9e8afa695d043c5bec2bff99354cdfcf71e9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 2 Dec 2021 02:03:11 +0900 Subject: 2021/11/30 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/grid-template-areas/index.md | 189 +++++++++----------------- 1 file changed, 63 insertions(+), 126 deletions(-) (limited to 'files/ja/web/css/grid-template-areas/index.md') diff --git a/files/ja/web/css/grid-template-areas/index.md b/files/ja/web/css/grid-template-areas/index.md index f753d8596d..e7c42ad7f1 100644 --- a/files/ja/web/css/grid-template-areas/index.md +++ b/files/ja/web/css/grid-template-areas/index.md @@ -3,25 +3,28 @@ title: grid-template-areas slug: Web/CSS/grid-template-areas tags: - CSS - - CSS Grid - - CSS Property - - Reference + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-template-areas translation_of: Web/CSS/grid-template-areas --- -

grid-template-areas CSS プロパティは、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+**`grid-template-areas`** は CSS のプロパティで、グリッド内でセルを確立し、名前を割り当てることにより、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。 - +{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}} -

これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} およびそれらの短縮プロパティ {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, {{cssxref("grid-area")}} から参照できます。

+これらの領域は、特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} およびそれらの一括指定プロパティ {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, {{cssxref("grid-area")}} で参照することができます。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 grid-template-areas: none;
 
-/* <string> 値 */
+/*  値 */
 grid-template-areas: "a b";
 grid-template-areas: "a b b"
                      "a c d";
@@ -29,35 +32,44 @@ grid-template-areas: "a b b"
 /* グローバル値 */
 grid-template-areas: inherit;
 grid-template-areas: initial;
+grid-template-areas: revert;
 grid-template-areas: unset;
-
+``` -

値

+### 値 -
-
none
-
グリッドコンテナーは名前付きのグリッド領域を定義しません。
-
{{cssxref("<string>")}}+
-
リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。
+- `none` + - : グリッドコンテナーは名前付きのグリッド領域を定義しません。 +- `{{cssxref("<string>")}}+` + - : リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行の中や行をまたがって複数の名前付きセルトークンがあると、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。 -

正式な構文

+## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### 名前付きグリッド領域の指定 -

HTML

+#### HTML -
<section id="page">
-  <header>Header</header>
-  <nav>Navigation</nav>
-  <main>Main area</main>
-  <footer>Footer</footer>
-</section>
+```html +
+
ヘッダー
+ +
メイン領域
+
フッター
+
+``` -

CSS

+#### CSS -
#page {
+```css
+#page {
   display: grid;
   width: 100%;
   height: 250px;
@@ -68,116 +80,41 @@ grid-template-areas: unset;
   grid-template-columns: 150px 1fr;
 }
 
-#page > header {
+#page > header {
   grid-area: head;
   background-color: #8ca0ff;
 }
 
-#page > nav {
+#page > nav {
   grid-area: nav;
   background-color: #ffa08c;
 }
 
-#page > main {
+#page > main {
   grid-area: main;
   background-color: #ffff64;
 }
 
-#page > footer {
+#page > footer {
   grid-area: foot;
   background-color: #8cffa0;
 }
-
- -

描画結果

- -

{{EmbedLiveSample("Example", "100%", "250px")}}

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}初期定義。
- -

{{cssinfo}}

- -

ブラウザーの実装状況

- -

{{Compat("css.properties.grid-template-areas")}}

- -

関連情報

- - - -
+``` + +#### 結果 + +{{EmbedLiveSample("Specifying_named_grid_areas", "100%", "250px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}} +- グリッドレイアウトガイド: [グリッドテンプレート領域](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) +- 動画チュートリアル: [Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/) -- cgit v1.2.3-54-g00ecf