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/index.md | 207 +++++++++++--------------------- 1 file changed, 71 insertions(+), 136 deletions(-) (limited to 'files/ja/web/css/grid-template/index.md') diff --git a/files/ja/web/css/grid-template/index.md b/files/ja/web/css/grid-template/index.md index c80fd2a006..24e000a2cb 100644 --- a/files/ja/web/css/grid-template/index.md +++ b/files/ja/web/css/grid-template/index.md @@ -3,25 +3,31 @@ title: grid-template slug: Web/CSS/grid-template tags: - CSS - - CSS Grid - - CSS Property - - Reference + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.grid-template translation_of: Web/CSS/grid-template --- -

grid-template CSS プロパティは、{{glossary("grid column", "grid columns")}} および {{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義するための 短縮 プロパティです。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-template.html")}}
+**`grid-template`** は CSS のプロパティで、[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティとして {{glossary("grid column", "grid columns")}}、{{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義します。 +{{EmbedInteractiveExample("pages/css/grid-template.html")}} +## 構成要素のプロパティ +このプロパティは以下の CSS プロパティの一括指定です。 +- [`grid-template-areas`](/ja/docs/Web/CSS/grid-template-areas) +- [`grid-template-columns`](/ja/docs/Web/CSS/grid-template-columns) +- [`grid-template-rows`](/ja/docs/Web/CSS/grid-template-rows) -

作者は、次の個別のプロパティの値で設定することもできます: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}

+## 構文 -

構文

- - -
/* キーワード値 */
+```css
+/* キーワード値 */
 grid-template: none;
 
 /* grid-template-rows / grid-template-columns の値 */
@@ -42,34 +48,41 @@ grid-template: [header-top] "a a a"     [header-bottom]
 /* グローバル値 */
 grid-template: inherit;
 grid-template: initial;
+grid-template: revert;
 grid-template: unset;
-
+``` + +### 値 -

値

+- `none` + - : 3 個すべてのプロパティの値に `none` を設定するキーワードで、こ明示的なグリッドがないことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。 +- `<'grid-template-rows'> / <'grid-template-columns'>` + - : {{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に `none` を設定します。 +- `[ ? ? ? ]+ [ / ]?` -
-
none
-
3 個すべてのプロパティの値に none を設定します。これは明示的なグリッドが無いことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。
-
<'grid-template-rows'> / <'grid-template-columns'>
-
{{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に none を設定します。
-
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
-
{{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には auto が設定されます)。さらに、各サイズの前後で定義された名前付きラインをつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は none が設定されます)。
+ - : {{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。 -

注記: これらのトラックリストに {{cssxref("repeat")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。

+ > **Note:** これらのトラックリストに {{cssxref("repeat()")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。
-
-

注記: {{cssxref("grid")}} 短縮プロパティは同じ構文を受け入れますが、暗黙的な grid プロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(grid-template とは対照的に、) grid を使用してください。

+> **Note:** {{cssxref("grid")}} 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(`grid-template` ではなく) `grid` を使用してください。 + +## 公式定義 + +{{cssinfo}} -

正式な構文

+## 形式文法 {{csssyntax}} -

例

+## 例 -

CSS

+### グリッドテンプレートの定義 -
#page {
+#### CSS
+
+```css
+#page {
   display: grid;
   width: 100%;
   height: 200px;
@@ -96,114 +109,36 @@ main {
 
 footer {
   background-color: red;
-  grid-column: foot;
-}
- -

HTML

- -
<section id="page">
-  <header>Header</header>
-  <nav>Navigation</nav>
-  <main>Main area</main>
-  <footer>Footer</footer>
-</section>
- -

描画結果

- -

{{EmbedLiveSample("Examples", "100%", "200px")}}

- -

仕様

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

{{cssinfo}}

- -

ブラウザーの実装状況

- -

- - - -

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

- -

- -

関連情報

- - - -