From 3771d6eaf3496ec23d228ad8dc1d210f242493d0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Nov 2021 00:43:01 +0900 Subject: CSS グリッドレイアウトのトップページの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_grid_layout/index.html | 271 ---------------------------- files/ja/web/css/css_grid_layout/index.md | 271 ++++++++++++++++++++++++++++ 2 files changed, 271 insertions(+), 271 deletions(-) delete mode 100644 files/ja/web/css/css_grid_layout/index.html create mode 100644 files/ja/web/css/css_grid_layout/index.md diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html deleted file mode 100644 index 59e1592ef5..0000000000 --- a/files/ja/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: CSS グリッドレイアウト -slug: Web/CSS/CSS_Grid_Layout -tags: - - CSS - - Grid Layout - - Grids - - Guide - - Layout - - Overview - - Reference -translation_of: Web/CSS/CSS_Grid_Layout ---- -
{{CSSRef}}
- -

CSS グリッドレイアウトは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

- -

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

- -

基本的な例

- -

次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。

- - - -

HTML

- -
<div class="wrapper">
-  <div class="one">One</div>
-  <div class="two">Two</div>
-  <div class="three">Three</div>
-  <div class="four">Four</div>
-  <div class="five">Five</div>
-  <div class="six">Six</div>
-</div>
- -

CSS

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-.one {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-.two {
-  grid-column: 2 / 4;
-  grid-row: 1 / 3;
-}
-.three {
-  grid-column: 1;
-  grid-row: 2 / 5;
-}
-.four {
-  grid-column: 3;
-  grid-row: 3;
-}
-.five {
-  grid-column: 2;
-  grid-row: 4;
-}
-.six {
-  grid-column: 3;
-  grid-row: 4;
-}
-
- -

{{EmbedLiveSample("Basic_example", "100%", "440")}}

- -

リファレンス

- -

CSS プロパティ

- -
- -
- -

CSS 関数

- -
- -
- -

CSS データ型

- -
- -
- -

用語集

- -
- -
- -

ガイド

- -
- -
- -

外部リソース

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}サブグリッドの追加
{{SpecName("CSS3 Grid")}}{{Spec2("CSS3 Grid")}}初回定義
- - - - diff --git a/files/ja/web/css/css_grid_layout/index.md b/files/ja/web/css/css_grid_layout/index.md new file mode 100644 index 0000000000..59e1592ef5 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/index.md @@ -0,0 +1,271 @@ +--- +title: CSS グリッドレイアウト +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Guide + - Layout + - Overview + - Reference +translation_of: Web/CSS/CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

CSS グリッドレイアウトは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

+ +

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

+ +

基本的な例

+ +

次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。

+ + + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", "440")}}

+ +

リファレンス

+ +

CSS プロパティ

+ +
+ +
+ +

CSS 関数

+ +
+ +
+ +

CSS データ型

+ +
+ +
+ +

用語集

+ +
+ +
+ +

ガイド

+ +
+ +
+ +

外部リソース

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}サブグリッドの追加
{{SpecName("CSS3 Grid")}}{{Spec2("CSS3 Grid")}}初回定義
+ + + + -- cgit v1.2.3-54-g00ecf