diff options
Diffstat (limited to 'files/ja')
| -rw-r--r-- | files/ja/learn/css/css_layout/grids/index.html | 2 | ||||
| -rw-r--r-- | files/ja/web/css/css_grid_layout/index.md | 335 |
2 files changed, 118 insertions, 219 deletions
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 { <h2 id="See_Also" name="See_Also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS グリッドのガイド</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout#ガイド">CSS グリッドのガイド</a></li> <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS グリッドインスペクター: グリッドレイアウトを調査する</a></li> </ul> 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong>CSS グリッドレイアウト</strong>は、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。</p> +**CSS グリッドレイアウト**は、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。 -<p>表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。</p> +表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。 -<h2 id="Basic_example" name="Basic_example">基本的な例</h2> +<h2 id="Basic_example">基本的な例</h2> -<p>次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。</p> +次の例では、最小値 100 ピクセル、最大値 auto で作成された列を含む、3 つの行を表示します。要素は線ベースの配置に従ってグリッド上に配置されます。 -<div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +```css hidden +* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } -.wrapper > div { +.wrapper > div { border: 2px solid rgb(233,171,88); border-radius: 5px; background-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; -}</pre> +} +``` + +### HTML + +```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> +``` -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><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></pre> +### CSS -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">.wrapper { +```css +.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; + gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { @@ -80,192 +83,88 @@ translation_of: Web/CSS/CSS_Grid_Layout grid-column: 3; grid-row: 4; } -</pre> - -<p>{{EmbedLiveSample("Basic_example", "100%", "440")}}</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("grid-template-columns")}}</li> - <li>{{CSSxRef("grid-template-rows")}}</li> - <li>{{CSSxRef("grid-template-areas")}}</li> - <li>{{CSSxRef("grid-template")}}</li> - <li>{{CSSxRef("grid-auto-columns")}}</li> - <li>{{CSSxRef("grid-auto-rows")}}</li> - <li>{{CSSxRef("grid-auto-flow")}}</li> - <li>{{CSSxRef("grid")}}</li> - <li>{{CSSxRef("grid-row-start")}}</li> - <li>{{CSSxRef("grid-column-start")}}</li> - <li>{{CSSxRef("grid-row-end")}}</li> - <li>{{CSSxRef("grid-column-end")}}</li> - <li>{{CSSxRef("grid-row")}}</li> - <li>{{CSSxRef("grid-column")}}</li> - <li>{{CSSxRef("grid-area")}}</li> - <li>{{CSSxRef("row-gap")}}</li> - <li>{{CSSxRef("column-gap")}}</li> - <li>{{CSSxRef("gap")}}</li> - <li>{{CSSxRef("masonry-auto-flow")}}</li> - <li>{{CSSxRef("align-tracks")}}</li> - <li>{{CSSxRef("justify-tracks")}}</li> -</ul> -</div> - -<h3 id="CSS_functions" name="CSS_functions">CSS 関数</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("repeat", "repeat()")}}</li> - <li>{{CSSxRef("minmax", "minmax()")}}</li> - <li>{{CSSxRef("fit-content", "fit-content()")}}</li> -</ul> -</div> - -<h3 id="CSS_data_types" name="CSS_data_types">CSS データ型</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("<flex>")}}</li> -</ul> -</div> - -<h3 id="Glossary_entries" name="Glossary_entries">用語集</h3> - -<div class="index"> -<ul> - <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li> - <li><a href="/ja/docs/Glossary/Grid_Lines">グリッド線</a></li> - <li><a href="/ja/docs/Glossary/Grid_Tracks">グリッドトラック</a></li> - <li><a href="/ja/docs/Glossary/Grid_Cell">グリッドセル</a></li> - <li><a href="/ja/docs/Glossary/Grid_Areas">グリッド領域</a></li> - <li><a href="/ja/docs/Glossary/Gutters">溝</a></li> - <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li> - <li><a href="/ja/docs/Glossary/Grid_Rows">グリッド行</a></li> - <li><a href="/ja/docs/Glossary/Grid_Column">グリッド列</a></li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<div class="index"> -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置を使用したレイアウト</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドと進歩的な拡張</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">サブグリッド</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">メーソンリーレイアウト</a></li> -</ul> -</div> - -<h2 id="External_resources" name="External_resources">外部リソース</h2> - -<ul> - <li><a href="http://tomrothe.de/posts/css_grid_and_ie11.html">CSS Grid and IE11</a> (<a href="https://github.com/motine/css_grid_annotator">polyfill</a>)</li> - <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> - <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> - <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> - <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> - <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Grid 2")}}</td> - <td>{{Spec2("CSS Grid 2")}}</td> - <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">サブグリッド</a>の追加</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Grid")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Subnav">Subnav</h2> - -<section id="Quick_links"> -<ol> - <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> - <li><strong><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></strong></li> - <li class="toggle"> - <details open><summary>ガイド</summary> - <ol> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li> - </ol> - </details> - </li> - <li class="toggle"> - <details open><summary>プロパティ</summary> - <ol> - <li><code><a href="/ja/docs/Web/CSS/column-gap">column-gap</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/gap">gap</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid">grid</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></code></li> - <li><code><a href="/ja/docs/Web/CSS/row-gap">row-gap</a></code></li> - </ol> - </details> - </li> - <li class="toggle"> - <details open><summary>用語集</summary> - <ol> - <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li> - <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li> - <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li> - <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li> - <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li> - <li><a href="/ja/docs/Glossary/Gutters">溝</a></li> - <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li> - <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li> - <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li> - </ol> - </details> - </li> -</ol> -</section> +``` + +{{EmbedLiveSample("Basic_example", "100%", "460")}} + +## リファレンス + +### CSS プロパティ + +- {{CSSxRef("grid-template-columns")}} +- {{CSSxRef("grid-template-rows")}} +- {{CSSxRef("grid-template-areas")}} +- {{CSSxRef("grid-template")}} +- {{CSSxRef("grid-auto-columns")}} +- {{CSSxRef("grid-auto-rows")}} +- {{CSSxRef("grid-auto-flow")}} +- {{CSSxRef("grid")}} +- {{CSSxRef("grid-row-start")}} +- {{CSSxRef("grid-column-start")}} +- {{CSSxRef("grid-row-end")}} +- {{CSSxRef("grid-column-end")}} +- {{CSSxRef("grid-row")}} +- {{CSSxRef("grid-column")}} +- {{CSSxRef("grid-area")}} +- {{CSSxRef("row-gap")}} +- {{CSSxRef("column-gap")}} +- {{CSSxRef("gap")}} +- {{CSSxRef("masonry-auto-flow")}}{{Experimental_Inline}} +- {{CSSxRef("align-tracks")}}{{Experimental_Inline}} +- {{CSSxRef("justify-tracks")}}{{Experimental_Inline}} + +### CSS 関数 + +- {{CSSxRef("repeat()", "repeat()")}} +- {{CSSxRef("minmax()", "minmax()")}} +- {{CSSxRef("fit-content()", "fit-content()")}} + +### CSS データ型 + +- {{CSSxRef("<flex>")}} + +### 用語集 + +- [グリッド](/ja/docs/Glossary/Grid) +- [グリッド線](/ja/docs/Glossary/Grid_Lines) +- [グリッドトラック](/ja/docs/Glossary/Grid_Tracks) +- [グリッドセル](/ja/docs/Glossary/Grid_Cell) +- [グリッド領域](/ja/docs/Glossary/Grid_Areas) +- [溝](/ja/docs/Glossary/Gutters) +- [グリッド軸](/ja/docs/Glossary/Grid_Axis) +- [グリッド行](/ja/docs/Glossary/Grid_Rows) +- [グリッド列](/ja/docs/Glossary/Grid_Column) + +## ガイド + +- [グリッドレイアウトの基本概念](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) +- [他のレイアウト方法との関係](/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout) +- [線ベースの配置を使用したレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- [グリッドテンプレート領域](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) +- [名前付きグリッド線を使用したレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) +- [CSS グリッドレイアウトにおける自動配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) +- [CSS グリッドレイアウトにおけるボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) +- [CSS グリッド、論理値、書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes) +- [CSS グリッドレイアウトとアクセシビリティ](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) +- [CSS グリッドとプログレッシブエンハンスメント](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [CSS グリッドを利用したよくあるレイアウトの実現](/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_) +- [サブグリッド](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid) +- [メーソンリーレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) + +## 外部リソース + +- [CSS Grid and IE11](http://tomrothe.de/posts/css_grid_and_ie11.html) ([polyfill](https://github.com/motine/css_grid_annotator)) +- [Examples from Jen Simmons](http://labs.jensimmons.com/) +- [Grid by Example - a collection of usage examples and video tutorials](http://gridbyexample.com/) +- [Codrops Grid Reference](https://tympanus.net/codrops/css_reference/grid/) +- [Firefox DevTools CSS Grid Inspector](/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) +- [CSS Grid Playground](https://mozilladevelopers.github.io/playground/) +- [Grid Garden](http://cssgridgarden.com) - A game for learning CSS grid + +## 仕様書 + +| 仕様書 | 状態 | Comment備考 | +| ------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------- | +| {{SpecName("CSS Grid 3")}} | {{Spec2("CSS Grid 3")}} | [組積](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)の追加 | +| {{SpecName("CSS Grid 2")}} | {{Spec2("CSS Grid 2")}} | [サブグリッド](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#subgrid)の追加 | +| {{SpecName("CSS3 Grid")}} | {{Spec2("CSS3 Grid")}} | 初回定義 | |