From 26515e5d3f6165edd20c39d2708fdbc232c21ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Nov 2021 00:44:09 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/learn/css/css_layout/grids/index.html | 2 +- files/ja/web/css/css_grid_layout/index.md | 335 +++++++++---------------- 2 files changed, 118 insertions(+), 219 deletions(-) (limited to 'files/ja') diff --git a/files/ja/learn/css/css_layout/grids/index.html b/files/ja/learn/css/css_layout/grids/index.html index d7ca3601c3..c9414fea96 100644 --- a/files/ja/learn/css/css_layout/grids/index.html +++ b/files/ja/learn/css/css_layout/grids/index.html @@ -698,7 +698,7 @@ aside {

関連情報

diff --git a/files/ja/web/css/css_grid_layout/index.md b/files/ja/web/css/css_grid_layout/index.md index 59e1592ef5..54c233ab03 100644 --- a/files/ja/web/css/css_grid_layout/index.md +++ b/files/ja/web/css/css_grid_layout/index.md @@ -3,57 +3,60 @@ 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}}
+{{CSSRef}} -

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

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

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

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

基本的な例

+

基本的な例

-

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

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