diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/css/css_grid_layout | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/css/css_grid_layout')
7 files changed, 3579 insertions, 0 deletions
diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..b6a71891c9 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,613 @@ +--- +title: CSS グリッドレイアウトでの自動配置 +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<p>CSS グリッドレイアウト仕様書には、作成したグリッド上にアイテムを正確に配置する機能に加えて、グリッドを作成したときに子アイテムの一部またはすべてを配置しなかった場合の動作を制御するルールが含まれています。一連のアイテムでグリッドを作成することで、最も簡単な方法で自動配置を確認することができます。アイテムに配置情報を与えない場合、アイテムはグリッド上の各セルに1つずつ配置されます。</p> + +<div id="placement_1"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> +</div> + +<h2 id="Default_rules_for_auto-placement" name="Default_rules_for_auto-placement">自動配置の既定のルール</h2> + +<p>上記の例でわかるように、グリッドを作成すると、すべての子アイテムが各グリッドセルに1つずつ配置されます。既定のフローでは、行ごとにアイテムを配置します。グリッドは、それぞれのアイテムを1行目のそれぞれのセルに配置します。 <code>grid-template-rows</code> プロパティを使用して追加の行を作成した場合は、グリッドはこれらの行にアイテムを配置し続けます。明示的なグリッドにすべてのアイテムを配置するのに十分な行がない場合は、新たに<em>暗黙の</em>行が作成されます。</p> + +<h3 id="Sizing_rows_in_the_implicit_grid" name="Sizing_rows_in_the_implicit_grid">暗黙のグリッド内での行の大きさ</h3> + +<p>暗黙のグリッドで自動的に作成される行の既定値は、大きさが自動になっています。これは、あふれることなく、それらに追加されたコンテンツを含むことを意味します。</p> + +<p>しかし、<code>grid-auto-rows</code>プロパティを使用することで、これらの行の大きさを制御することができます。例えば、全ての作成された行を100ピクセルの高さにするには、次のように使います:</p> + +<div id="placement_2"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> +</div> + +<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> + +<div id="placement_3"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four + <br>This cell + <br>Has extra + <br>content. + <br>Max is auto + <br>so the row expands. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> +</div> + +<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid.</p> + +<div id="placement_4"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> +</div> + +<h3 id="Auto-placement_by_column" name="Auto-placement_by_column">Auto-placement by column</h3> + +<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> + +<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> + +<div id="placement_5"> +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-rows: repeat(3, 200px); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> +</div> + +<h2 id="The_order_of_auto_placed_items" name="The_order_of_auto_placed_items">The order of auto placed items</h2> + +<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> + +<h3 id="Order_modified_document_order" name="Order_modified_document_order">Order modified document order</h3> + +<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> + +<h3 id="Items_with_placement_properties" name="Items_with_placement_properties">Items with placement properties</h3> + +<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> + +<div id="placement_6"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> +</div> + +<h3 id="Deal_with_items_that_span_tracks" name="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> + +<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> + +<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> + +<div id="placement_7"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> +</div> + +<h3 id="Filling_in_the_gaps" name="Filling_in_the_gaps">Filling in the gaps</h3> + +<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> + +<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> + +<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> + +<div id="placement_8"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> +</div> + +<h3 id="Anonymous_grid_items" name="Anonymous_grid_items">Anonymous grid items</h3> + +<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> + +<pre class="brush: css notranslate"><div class="grid"> + I am a string and will become an anonymous item + <div>A grid item</div> + <div>A grid item</div> +</div> +</pre> + +<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> + +<h3 id="Use_cases_for_auto-placement" name="Use_cases_for_auto-placement">Use cases for auto-placement</h3> + +<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> + +<div id="placement_9"> +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html notranslate"><ul class="wrapper"> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> +</div> + +<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> + +<div id="placement_10"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + </dl> +</div> +</pre> + +<pre class="brush: css notranslate">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; + } +</pre> + +<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> +</div> + +<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> + +<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> + +<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> + +<section class="Quick_links" 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><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> + <li data-default-state="open"><a href="#"><strong>ガイド</strong></a> + <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">グリッドレイアウトの自動配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</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/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a> + <ol> + <li><a href="/ja/docs/Web/CSS/grid">grid</a></li> + <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>用語集</strong></a> + <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> + </li> +</ol> +</section> diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..0037394932 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,734 @@ +--- +title: グリッドレイアウトの基本概念 +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide + - Layout +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>は、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェース要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。</p> + +<h2 id="What_is_a_grid" name="What_is_a_grid">グリッドとは何か？</h2> + +<p>グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。</p> + +<h3 id="Fixed_and_flexible_track_sizes" name="Fixed_and_flexible_track_sizes">固定と可変のトラックサイズ</h3> + +<p>例えばピクセル単位を使って固定トラックサイズのグリッドを作成することができます。これであるグリッドに所望のレイアウトに合うようなピクセルを設定できます。また、可変サイズのグリッドを作成する為にパーセントやこの目的で新たに制定された <code>fr</code> 単位を使用することができます。</p> + +<h3 id="Item_placement" name="Item_placement">アイテムの配置</h3> + +<p>グリッドの線の番号や名前を使ってグリッドのある位置を指定してアイテムを配置することができます。グリッドには、位置が明示されていないアイテムの配置を制御するアルゴリズムも含まれています。</p> + +<h3 id="Creation_of_additional_tracks_to_hold_content" name="Creation_of_additional_tracks_to_hold_content">コンテンツを保持する為の追加のトラックの作成</h3> + +<p>グリッドレイアウトでは、明快にグリッドを定義することができます。グリッドレイアウトの仕様では必要に応じて柔軟に行や列を追加できるようになっています。「コンテナーに収まるだけ多い数の列」を追加するような機能もあります。</p> + +<h3 id="Alignment_control" name="Alignment_control">整列の制御</h3> + +<p>グリッドには整列機能が含まれており、あるグリッドエリア内でアイテムがどのように整列するのかと、グリッド全体がどのように整列するかを制御できます。</p> + +<h3 id="Control_of_overlapping_content" name="Control_of_overlapping_content">オーバーラップコンテンツの制御</h3> + +<p>グリッドセルやグリッドエリア内には複数のアイテムも配置でき、それらはお互いに部分的にオーバーラップできます。この階層化は、 {{cssxref("z-index")}} プロパティで制御できます。</p> + +<p>グリッドは強力な仕様であり、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>など CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成できます。これはすべて、<strong>グリッドコンテナー</strong>にグリッドを作成することから始まります。</p> + +<h2 id="The_Grid_container" name="The_Grid_container">グリッドコンテナー</h2> + +<p><em>グリッドコンテナー</em>を作成するには、要素に対して <code>display: grid</code> か <code>display: inline-grid</code> を指定します。グリッドコンテナーを作成すると、すべての<em>直接の</em>子要素が<em>グリッドアイテム</em>へと変わります。</p> + +<p>この例では、 wrapper クラスの div を親要素として、その内部には 5 個の子要素が含まれます。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p><code>.wrapper</code> をグリッドコンテナー化します。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p> + +<p>すべての直接の子要素がグリッド要素になりました。それらの要素をグリッドにする前とウェブブラウザー上での見た目に変化は無いでしょう。グリッドには単一列のグリッドが作成されただけだからです。この時点で、 Firefox の開発者ツールの一つである <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> 機能が便利であることを確認できます。上記の例を Firefox で表示してグリッドを調査すると、<code>grid</code> 値の隣に小さなアイコンが表示されているでしょう。これをクリックすると、その要素上のグリッドがブラウザーウィンドウ内にオーバーレイ表示されます。</p> + +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>CSS グリッドレイアウトについて学び、使っていく中で、このツールは、グリッドに何が起こっているかを視覚的に理解する助けになるでしょう。</p> + +<p>この例をさらにグリッドらしくする為には、列トラックを追加する必要があります。</p> + +<h2 id="Grid_Tracks" name="Grid_Tracks">グリッドトラック</h2> + +<p>ここでは、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} プロパティを使用してグリッド上に行と列を定義します。これらはグリッドトラックを定義します。<em>グリッドトラック</em>は、グリッド上の任意の2本の線の間にあるスペースです。下の画像で、グリッド内の最初の行トラックががハイライトされているのを確認できるでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>先述の例に対して <code>grid-template-columns</code> プロパティを追加すると、列トラックのサイズが定義できます。</p> + +<p>3本の200ピクセル幅の列トラックを持つグリッドを作成しましょう。子要素はこのグリッドの各グリッドセルに 1 個ずつ配置されます。</p> + +<div id="grid_first"> +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="The_fr_Unit" name="The_fr_Unit">fr 単位</h3> + +<p>トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい <code>fr</code> 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成します。</p> + +<div id="fr_unit_ls"> +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +</pre> +</div> + +<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> +</div> + +<p>この次の例では、1 つの <code>2fr</code> トラックと 2 つの <code>1fr</code> トラックの定義を作成します。利用可能な空間は、4 つに分割されます。そのうち 2 つが最初のトラックに与えられ、残りはそれぞれ次の 2 トラックに与えられます。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>最後の例では、絶対サイズのトラックを分数単位と混ぜて使用します。最初のトラックは 500px なので、この固定幅は利用可能な空間から除外されます。残りの領域は 3 つに分割され、比率に応じて 2 つの変動幅のトラックに割り当てられます。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Track_listings_with_repeat_notation" name="Track_listings_with_repeat_notation">repeat() 記法によるトラック列挙</h3> + +<p>多くのトラックを持つ大きなグリッドのため、<code>repeat()</code> 記法を使用して、トラック列挙のすべてまたは一部を繰り返すことができます。例えば、以下のグリッド定義は:</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>次のように書くこともできます。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>繰り返し記法は、トラック列挙の一部にも使えます。この次の例では、はじめに 20px のトラックを持ち、続けて 6 つの <code>1fr</code> トラックのセクション、最後に 20px のトラックを持つグリッドを作成します。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>繰り返し記法はトラック列挙も取るので、トラック列挙の繰り返しパターンの作成にも利用できます。この次の例で、グリッドは10 のトラックで構成されており、それは<code>1fr</code> トラックに <code>2fr</code> トラックが続くパターンを5回繰り返したものです。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="The_implicit_and_explicit_grid" name="The_implicit_and_explicit_grid">暗黙的と明示的なグリッド</h3> + +<p>上でグリッドの例を作成した時、私達は列トラックを {{cssxref("grid-template-columns")}} プロパティで具体的に定義しましたが、グリッドは勝手に行も作っていました。これらの行は暗黙的のグリッドの一部です。一方、明示的なグリッドは、{{cssxref("grid-template-columns")}} または {{cssxref("grid-template-rows")}} で定義された行と列から構成されます。</p> + +<p>定義されたグリッドの外側に何かを配置した場合（またはコンテンツの量のために、より多くのグリッドトラックが必要な場合）、グリッドは暗黙的なグリッドに行と列を作成します。これらのトラックは、デフォルトで自動サイズ調整されるため、サイズはトラック内のコンテンツに基づいて決まります。</p> + +<p>{{cssxref("grid-auto-rows")}} と {{cssxref("grid-auto-columns")}} プロパティで、暗黙的なグリッドに作成されたトラックのセットサイズを定義することもできます。</p> + +<p>下の例では、<code>grid-auto-rows</code> を使用して、暗黙的なグリッド内に作成されたトラックが 200px の高さになることを保証しています。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p> + +<h3 id="Track_sizing_and_minmax" name="Track_sizing_and_minmax">トラックのサイズ指定と minmax()</h3> + +<p>明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加されたコンテンツに合わせて広げられるようにしたいでしょう。例えば、行を 100 px より小さくしたくないが、コンテンツの高さが 300 px に引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。</p> + +<p>グリッドでは、それを {{cssxref("minmax", "minmax()")}} 関数で解決できます。この次の例では、{{cssxref("grid-auto-rows")}} の値に <code>minmax()</code> を使用しています。自動生成された行の高さの最小値は 100px、最大値は <code>auto</code> になります。値に <code>auto</code> を使うと、この行のセルがコンテンツのサイズに応じて空間が引き伸ばされ、その高さに合わせられます。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two + <p>I have some more content in.</p> + <p>This makes me taller than 100 pixels.</p> + </div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Track_sizing_and_minmax', '240', '470') }}</p> + +<h2 id="Grid_lines" name="Grid_lines">グリッド線</h2> + +<p>私たちがグリッドを定義する時、グリッドトラックを定義するのであり、グリッド線ではないことに注意しなければなりません。グリッドには、アイテムの配置時に使用する番号の付いた線が与えられます。3 列 2 行のグリッドには、4 本の縦線があります。</p> + +<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>グリッド線の番号は、ドキュメントの書字方向に従って付けられます。左から右 (left-to-right) に書く言語では、線 1 はグリッドの左手側にあり、右から左 (right-to-left) に書く言語では、グリッドの右手側にあります。グリッド線には名前を付けることもできます。この方法については後のガイドで解説します。</p> + +<h3 id="Positioning_items_against_lines" name="Positioning_items_against_lines">グリッド線に対するアイテムの配置</h3> + +<p>グリッド線を基にした配置の詳細は、後の記事で解説します。次の例は、その簡単な方法のデモンストレーションです。アイテムの配置する時、私たちはトラックではなくグリッド線を対象にします。</p> + +<p>以下の例では、最初の 2 つのアイテムを、{{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} および {{cssxref("grid-row-end")}} の各プロパティを使用して 3 列トラックのグリッド上に配置します。左から右へ向かって、最初のアイテムは列の線 1 から列の線 4 に対して、右端のグリッド線まで配置されます。また、行の線 1 から始まり、行の線 3 で終わる 2 行のトラックに及びます。</p> + +<p>2 番目のアイテムは、グリッド列の線 1 から始まり、1 トラックの幅になります。これはデフォルトであるため、終わりの線を指定する必要がありません。また、行の線 3 から 5 まで、2 行トラックに及びます。他のアイテムは、それぞれグリッド上の空スペースに配置されます。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p> + +<p>Firefox の開発者ツールで <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。</p> + +<h2 id="Grid_cells" name="Grid_cells">グリッドセル</h2> + +<p><em>グリッドセル</em> は、グリッド上の最も小さな単位です。コンセプトとしては、表のセルのようなものです。先述の例で、親要素のグリッドが定義されると、子アイテムが定義されたグリッドの各セルにレイアウトされる様を見てきました。下の画像では、グリッドの最初のセルをハイライトしています。</p> + +<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="Grid_areas" name="Grid_areas">グリッドエリア</h2> + +<p>アイテムは、行と列の複数のセルにまたがって配置でき、<em>グリッドエリア</em> を作ることができます。グリッドエリアは四角形でなければなりません。例えば L 字型の領域は作れません。ハイライトされた領域は、2 行と 2 列にまたがるトラックです。</p> + +<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="Gutters" name="Gutters">セル間隔</h2> + +<p>グリッドセル間の <em>溝</em> (Gutters) または <em>小路</em> (alleys) は、 {{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティを使用するか、短縮プロパティの {{cssxref("gap")}} で作成できます。下の例では、列間 10px、行間 <code>1em</code> の溝を作っています。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 10px; + row-gap: 1em; +} +</pre> + +<div class="note"> +<p><strong>メモ:</strong> グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に <code>grid-</code> の接頭辞がつき、それぞれ {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}} のようになっていました。</p> + +<p>ブラウザーは接頭辞を外すよう更新されつつありますが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。</p> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + column-gap: 10px; + row-gap: 1em; + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Gutters') }}</p> + +<p>領域の前に占める溝による空間は、柔軟な長さの <code>fr</code> トラックに割り当てられ、通常のグリッドトラックのようにサイズ設定のために用いられます。しかしながら、溝の内側に何かを配置することはできません。グリッド線を基準にした配置では、溝は太線のように扱われます。</p> + +<h2 id="Nesting_grids" name="Nesting_grids">入れ子状のグリッド</h2> + +<p>グリッドアイテムはグリッドコンテナーにもなります。次の例は以前作成したもので、2 個のアイテムが配置指定された 3 列のグリッドです。この例では、最初のアイテムにサブアイテムが含まれています。これらのアイテムはグリッドの直接の子ではないので、グリッドレイアウトに関係しない通常のドキュメントフローで表示されています。</p> + +<div id="nesting"> +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>この <code>box1</code> に <code>display: grid</code> を設定すると、トラック定義を与えてグリッドにすることができます。これらは新しいグリッド上にレイアウトされます。</p> + +<pre class="brush: css notranslate">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.box1 { + grid-column: 1 / 4; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> + +<p>この場合の入れ子状のグリッドは、親グリッドと関係しません。例で表示されているように、親グリッドの {{cssxref("grid-gap")}} を継承せず、入れ子状のグリッド内の線は親グリッドの線に沿いません。</p> + +<h3 id="Subgrid" name="Subgrid">サブグリッド</h3> + +<p>Level 2 のグリッド仕様書の草稿では、<ruby>サブグリッド<rp> (</rp><rt>subgrid</rt><rp>) </rp></ruby>と呼ばれる機能があり、親グリッドのトラック定義を利用した入れ子状のグリッドを作成できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: この機能は Firefox 71 で初めて搭載され、これがサブグリッドを実装している唯一のブラウザーです。</p> +</div> + +<p>現在の仕様書では、入れ子上のグリッドの例を編集して、 <code>grid-template-columns: repeat(3, 1fr)</code> のトラック定義を <code>grid-template-columns: subgrid</code> へ変更します。入れ子状のグリッドは親グリッドのトラックを利用してアイテムをレイアウトします。</p> + +<pre class="brush: css notranslate">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: subgrid; +} +</pre> + +<h2 id="Layering_items_with_z-index" name="Layering_items_with_z-index"><code>z-index</code> による項目のレイヤー化</h2> + +<p>グリッドアイテムは、同じセルを占有できます。行番号によるアイテム配置の例に戻り、2 個のアイテムがオーバーラップするように変更しましょう。</p> + +<div id="l_ex"> +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +} +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> + +<p>アイテム <code>box2</code> が <code>box1</code> に重なり、ソースコードに書かれた順に、後のものが先のものの上に表示されます。</p> + +<h3 id="Controlling_the_order" name="Controlling_the_order">順序の制御</h3> + +<p>アイテムを上に積む順序は、配置が指定されたアイテムと同様に、<code>z-index</code> プロパティを使用して制御できます。<code>box2</code> に <code>box1</code> より下位の <code>z-index</code> 値を与えると、<code>box1</code> の奥に表示されるようになります。</p> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p> + +<h2 id="Next_Steps" name="Next_Steps">次のステップへ</h2> + +<p>この記事では、グリッドレイアウト仕様の要点だけを見てきました。コードの例を試してみてから、 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">CSS グリッドレイアウトの詳細を掘り下げることの本当のスタートである、このガイドの次のステップへ</a>進んでください。</p> + +<h2 id="Subnav">Subnav</h2> + +<section class="Quick_links" 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/Realizing_common_layouts_using_CSS_Grid_Layout">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> + </ol> + </details> + </li> + <li class="toggle"> + <details open><summary>プロパティ</summary> + <ol> + <li><code><a href="/ja/docs/Web/CSS/align-tracks">align-tracks</a></code>{{Experimental_Inline}}</li> + <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/justify-tracks">justify-tracks</a></code>{{Experimental_Inline}}</li> + <li><code><a href="/ja/docs/Web/CSS/masonry-auto-flow">masonry-auto-flow</a></code>{{Experimental_Inline}}</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> diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..2ca01d4bc6 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,713 @@ +--- +title: CSS グリッドレイアウトのボックス配置 +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +tags: + - CSS グリッド +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +<p>CSS グリッドレイアウトは <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a> 仕様を実装します。これはそのフレックスコンテナの中でアイテム配置のために使う <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox (ブレックスボックス)</a> と同じ仕様です。この仕様には、異なるレイアウトメソッドすべての配置方法の詳細があります。レイアウトメソッドは、可能なら仕様に準拠し、その違い（機能と制約）に基づいて個々の振る舞いを実装します。現在、仕様書にはすべてのレイアウトメソッドの詳細がありますが、ブラウザーの実装は完全ではありません。しかしながら、CSS グリッドレイアウトメソッドは広く実装されています。</p> + +<p><span class="seoSummary">このガイドでは、グリッドレイアウトにおけるボックス配置がどのように機能するのか説明します。フレックスボックスのプロパティと値の機能と多くの類似点があります。</span>しかし、グリッドは二次元、フレックスボックスは一次元であるため、いくつか小さな違いがあることに気をつけてください。それではグリッド内のものを配置するときに使う 2 つの軸について見ていきましょう。</p> + +<h2 id="グリッドレイアウトの_2_つの軸">グリッドレイアウトの 2 つの軸</h2> + +<p>グリッドレイアウトでは、<em>ブロック軸</em>と<em>インライン軸</em>という 2 つの軸を利用できます。ブロック軸は、ブロックレイアウトでブロックが配置される軸です。ページ内に 2 つのパラグラフがある場合、上から下に向かって並べられますので、この方向がブロック軸となります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15963/Block_Axis.png" style="height: 306px; width: 940px;"></p> + +<p><em>インライン軸</em>はブロック軸に交差する軸です。通常、テキストはインライン方向に向かって並べられます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> + +<p>中身はグリッドエリアの中に並べることができ、グリッドトラック自体が 2 つの軸の上にあります。</p> + +<h2 id="ブロック軸上でのアイテムの配置">ブロック軸上でのアイテムの配置</h2> + +<p>{{cssxref("align-self")}} と {{cssxref("align-items")}} プロパティは、ブロック軸上の配置をコントロールします。これらはグリッドエリアの中のアイテムの配置を変更します。</p> + +<p>以下の例には、4 つのグリッドエリアがあります。グリッドコンテナ上で {{cssxref("align-items")}} プロパティと次の値の一つを使い、アイテムを配置しています。</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<div id="alignment_1"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; + align-items: start; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p> +</div> + +<p><code>align-self: start</code> を設定すると、それぞれの子 <code><div></code> の高さは <code><div> </code>の中身によって決定されることを覚えておいてください。対照的に、<code><a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-self">align-items</a></code> を完全に省略すると、それぞれの子 <code><div></code> の高さはグリッドエリアを満たすように広がります。</p> + +<p>{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で <code>align-self</code> を使えばプロパティを個別に設定できるということです。</p> + +<p>次の例では、<code>align-self</code> プロパティを使い、様々な配置の値を実験します。最初のエリアで見られるのは <code>align-self</code> のデフォルトの振る舞いで、引き伸ばされています。2 つ目のアイテムは <code>align-self</code> が <code>start</code> 値を持っており、3 つ目は <code>end</code> 、4 つ目は <code>center</code> です。</p> + +<div id="alignment_2"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + align-self: start; +} +.item3 { + grid-area: c; + align-self: end; +} +.item4 { + grid-area: d; + align-self: center; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p> +</div> + +<h3 id="固有のアスペクト比を持つアイテム">固有のアスペクト比を持つアイテム</h3> + +<p>デフォルトでは、{{cssxref("align-self")}} の振る舞いはアイテムを広げます。しかし、固有のアスペクト比を持つアイテムの振る舞いは <code>start</code> になります。固有のアスペクト比を持つアイテムにデフォルトで <code>stretch</code> を設定するとアイテムを歪めるからです。</p> + +<p>この振る舞いは現在、仕様で明確になっていますが、ブラウザーへの実装はまだ途上です。それまでの間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を <code>start</code> に設定することによって、グリッドの直接の子である画像などのアイテムが、デフォルトで広がらないことを保証できます。これは正しい動作を模倣します。</p> + +<h2 id="インライン軸上のアイテムの位置揃え">インライン軸上のアイテムの位置揃え</h2> + +<p>{{cssxref("align-items")}} と {{cssxref("align-self")}} がブロック軸上でアイテムの配置を処理するように、{{cssxref("justify-items")}} と {{cssxref("justify-self")}} は、インライン軸上で同じ動作をします。選べる値は <code>align-self</code> と同じです。</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>以下では、{{cssxref("align-items")}} と同様の例を見ることができます。今回は {{cssxref("justify-self")}} を適用しています。</p> + +<p>ここでもデフォルトは、固有のアスペクト比を持つアイテム以外、<code>stretch</code> です。配置の設定を変更しない場合、グリッドアイテムはグリッドエリアをカバーします。例の最初のアイテムはデフォルトの配置を表しています。</p> + +<div id="alignment_3"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + justify-self: start; +} +.item3 { + grid-area: c; + justify-self: end; +} +.item4 { + grid-area: d; + justify-self: center; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p> +</div> + +<p>{{cssxref("align-self")}} と {{cssxref("align-items")}} と同様に、グリッドコンテナに {{cssxref("justify-items")}} を適用することで、すべてのアイテムに {{cssxref("justify-self")}} の値を設定できます。</p> + +<p>{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティは<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>に実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを両端揃えすることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。</p> + +<h3 id="ショートハンドプロパティ">ショートハンドプロパティ</h3> + +<p>{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-self")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。</p> + +<h2 id="エリア内のアイテムを中央に揃える">エリア内のアイテムを中央に揃える</h2> + +<p>align プロパティと justify プロパティを組み合わせると、グリッドエリアの中でアイテムを簡単に中央揃えすることができます。</p> + +<div id="alignment_4"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + grid-auto-rows: 200px; + grid-template-areas: + ". a a ." + ". a a ."; +} +.item1 { + grid-area: a; + align-self: center; + justify-self: center; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p> +</div> + +<h2 id="ブロック軸上のグリッドトラックの配置">ブロック軸上のグリッドトラックの配置</h2> + +<p>グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸上のトラックを配置し、{{cssxref("justify-content")}} はインライン軸上の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。</p> + +<ul> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも空間があることを意味します。</p> + +<p><code>align-content</code> プロパティはグリッド全体のグリッドコンテナに適用されます。グリッドレイアウトでのデフォルトの振る舞いは <code>start</code> で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドラインの始まりに対して整列しています。</p> + +<div id="alignment_5"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + height: 500px; + width: 500px; + gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p> + +<p>コンテナに <code>align-content</code> を追加し、値を <code>end</code> に設定すると、トラックは、すべてブロック方向の中でグリッドコンテナが終わるラインに移動します。</p> +</div> + +<div id="alignment_6"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + height: 500px; + width: 500px; + gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: end; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p> +</div> + +<p>フレックスボックスのようにスペース配分する値、<code>space-between</code> 、<code>space-around</code> 、<code>space-evenly</code> を使うこともできます。{{cssxref("align-content")}} を <code>space-between</code> に更新すると、グリッド上の要素がどう配置されるかを確認できます。</p> + +<div id="alignment_7"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + height: 500px; + width: 500px; + gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p> +</div> + +<p>スペース配分の値を使用すると、グリッド上のアイテムが大きくなる可能性があることに注意してください。アイテムが複数のグリッドトラックにまたがる場合、トラック間にさらにスペースを追加すると、アイテムはその分大きくなる必要があります。グリッドは常に厳密です。したがって、これらの値を使用する場合は、トラックの内容が追加のスペースに対応できるようにするか、整列プロパティを使用して引き伸ばさず始点に置くようにします。</p> + +<p>下の図では、<code>align-content</code> と <code>start</code> で配置したグリッドの隣に、<code>align-content</code> を <code>space-between</code> に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。</p> + +<p><img alt="space-between を使用したときアイテムがどのように大きくなるかのデモ。" src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> + +<h2 id="インライン軸上のグリッドトラックの位置揃え">インライン軸上のグリッドトラックの位置揃え</h2> + +<p>ブロック軸で {{cssxref("align-content")}} を使うのと同様に、インライン軸では {{cssxref("justify-content")}} を使うことができます。</p> + +<p>同じ例を使って、{{cssxref("justify-content")}} に <code>space-around</code> を設定してみましょう。やはり、1 つ以上の列トラックにまたがるトラックが余分なスペースを得ることになります。</p> + +<div id="alignment_8"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + height: 500px; + width: 500px; + gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; + justify-content: space-around; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p> +</div> + +<h2 id="配置と自動マージン">配置と自動マージン</h2> + +<p>エリアの中でアイテムを配置する別の方法は、自動マージンを使用することです。コンテナブロックの左右のマージンを <code>auto</code> に設定すると、ビューポート内でレイアウトを中央に配置できます。既に知っているように、自動マージンは空きスペースのすべてを吸収します。両側のマージンを <code>auto</code> に設定すると、両マージンはスペースのすべてを取るよう試みるため、ブロックは中央に押し込まれます。</p> + +<p>次の例では、Item 1 に <code>auto</code> の左マージンを与えます。自動マージンは、そのアイテムのコンテンツ用の空間が割り当てられた後に残りのスペースを取るため、コンテンツがエリアの右側に押し出されます。どのように押し出されるか見てみましょう。</p> + +<div id="alignment_9"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + height: 500px; + width: 500px; + gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; + margin-left: auto; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p> +</div> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> を使って、どのようにアイテムが整列されるか見てみましょう。</p> + +<p><img alt="Grid Highlighter を使って自動マージンを見ている画像。" src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p> + +<h2 id="整列と書字方向">整列と書字方向</h2> + +<p>ここまでのすべての例は英語を使ったものであり、これは左から右へ書く言語です。物理方向で考えるとき、行の始点はグリッドの左上になります。</p> + +<p>CSS グリッドレイアウトとボックス配置の仕様は、CSS の書字方向と共に機能するようデザインされています。アラビア語などの右から左へ書く言語で作業する場合、グリッドの始点は右上になり、<code>justify-content: start</code> のデフォルトはグリッドトラックがグリッドの右手側から始まるようになるでしょう。</p> + +<p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p> + +<section class="Quick_links" 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><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> + <li data-default-state="open"><a href="#"><strong>ガイド</strong></a> + <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">グリッドレイアウトの自動配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</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/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">Masonry layout</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a> + <ol> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/align-tracks">align-tracks</a></code>{{Experimental_Inline}}</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/column-gap">column-gap</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/gap">gap</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid">grid</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-area">grid-area</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-column">grid-column</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-row">grid-row</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template">grid-template</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/justify-tracks">justify-tracks</a></code>{{Experimental_Inline}}</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/masonry-auto-flow">masonry-auto-flow</a></code>{{Experimental_Inline}}</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/row-gap">row-gap</a></code></li> + <li></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>用語集</strong></a> + <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> + </li> +</ol> +</section> diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..77237096cf --- /dev/null +++ b/files/ja/web/css/css_grid_layout/index.html @@ -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 +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS グリッドレイアウト</strong>は、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。</p> + +<p>表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。</p> + +<h2 id="Basic_example" name="Basic_example">基本的な例</h2> + +<p>次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</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> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.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; +} +</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 class="Quick_links" 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> diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..6358de6b22 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,495 @@ +--- +title: 名前付きグリッド線を使用したレイアウト +slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +<p>前のガイドでは、グリッドトラックを定義することによって作られた線に沿ってアイテムを配置する様子と、名前の付いたテンプレート領域を使用してアイテムを配置する方法を見てきました。このガイドでは、名前付きの線を使用したときにこれら2つが共にどのように動作するかを見てみます。線に名前をつけるととても便利ですが、名前とトラックの寸法の組み合わせではもっと難解なグリッドの構文になります。いくつかの例を使ってみることで、動作がより明確かつ易しくなるでしょう。</p> + +<h2 id="Naming_lines_when_defining_a_grid" name="Naming_lines_when_defining_a_grid">グリッドを定義した場合の線の名前付け</h2> + +<p>You can assign some or all of the lines in your grid a name when you define your grid with the <code>grid-template-rows</code> and <code>grid-template-columns</code> properties. To demonstrate I’ll use the simple layout created in the guide on line-based placement. This time I’ll create the grid using named lines.</p> + +<div id="example_named_lines"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the centre block of the grid as <code>content-start</code> and <code>content-end</code> again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; + grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; +} +</pre> + +<p>Once the lines have names, we can use the name to place the item rather than the line number.</p> + +<pre class="brush: css">.box1 { + grid-column-start: main-start; + grid-row-start: main-start; + grid-row-end: main-end; +} + +.box2 { + grid-column-start: content-end; + grid-row-start: main-start; + grid-row-end: content-end; +} + +.box3 { + grid-column-start: content-start; + grid-row-start: main-start; +} + +.box4 { + grid-column-start: content-start; + grid-column-end: main-end; + grid-row-start: content-end; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p> +</div> + +<p>Everything else about line-based placement still works in the same way and you can mix named lines and line numbers. Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.</p> + +<h3 id="Giving_lines_multiple_names" name="Giving_lines_multiple_names">線に複数の名前を付ける</h3> + +<p>You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them <code>[sidebar-end main-start]</code>. You can then refer to that line by either of the names.</p> + +<h2 id="Implicit_grid_areas_from_named_lines" name="Implicit_grid_areas_from_named_lines">名前付きの行の暗黙的なグリッド領域</h2> + +<p>When naming the lines, I mentioned that you can name these anything you like. The name is a <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a>, an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as <code>span</code>. Idents are not quoted.</p> + +<p>While you can choose any name, if you append <code>-start</code> and <code>-end</code> to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have <code>content-start</code> and <code>content-end</code> both for rows and for columns. This means I get a grid area named <code>content</code>, and could place something in that area should I wish to.</p> + +<div id="implicit_areas_from_lines"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>I’m using the same grid definitions as above, however this time I am going to place a single item into the named area <code>content</code>.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; + grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; +} +.thing { + grid-area: content; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="thing">I am placed in an area named content.</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p> +</div> + +<p>We don’t need to define where our areas are with <code>grid-template-areas</code> as our named lines have created an area for us.</p> + +<h2 id="Implicit_Grid_lines_from_named_areas" name="Implicit_Grid_lines_from_named_areas">名前付き領域からの暗黙のグリッド線</h2> + +<p>We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works.</p> + +<p>In this example I have added an extra div with a class of <code>overlay</code>. We have named areas created using the <code>grid-area</code> property, then a layout created in <code>grid-template-areas</code>. The area names are:</p> + +<ul> + <li><code>hd</code></li> + <li><code>ft</code></li> + <li><code>main</code></li> + <li><code>sd</code></li> +</ul> + +<p>This gives us column and row lines:</p> + +<ul> + <li><code>hd-start</code></li> + <li><code>hd-end</code></li> + <li><code>sd-start</code></li> + <li><code>sd-end</code></li> + <li><code>main-start</code></li> + <li><code>main-end</code></li> + <li><code>ft-start</code></li> + <li><code>ft-end</code></li> +</ul> + +<p>You can see the named lines in the image, note that some lines have two names - for example <code>sd-end</code> and <code>main-start</code> refer to the same column line.</p> + +<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p> + +<p>To position <code>overlay</code> using these implicit named lines is the same as positioning an item using lines that we have named.</p> + +<div id="implicit_lines_from_area"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "ft ft ft ft ft ft ft ft ft"; +} + +.header { + grid-area: hd; +} + +.footer { + grid-area: ft; +} + +.content { + grid-area: main; +} + +.sidebar { + grid-area: sd; +} + +.wrapper > div.overlay { + z-index: 10; + grid-column: main-start / main-end; + grid-row: hd-start / ft-end; + border: 4px solid rgb(92,148,13); + background-color: rgba(92,148,13,.4); + color: rgb(92,148,13); + font-size: 150%; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> + <div class="overlay">Overlay</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p> +</div> + +<p>Given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. By selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily.</p> + +<h2 id="Multiple_lines_with_the_same_name_with_repeat" name="Multiple_lines_with_the_same_name_with_repeat">repeat() による同じ名前を持つ複数の線</h2> + +<p>If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.</p> + +<p>In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of <code>[col-start]</code>. This means that we will end up with a grid that has 12 column lines all named <code>col-start</code> before a <code>1fr</code> width column.</p> + +<div id="multiple_lines_same_name"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); +}</pre> + +<p>Once you have created the grid you can place items onto it. As we have multiple lines named <code>col-start</code> if you place an item to start after line <code>col-start</code> grid uses the first line named <code>col-start</code>, in our case that will be the far left line. To address another line use the name, plus the number for that line. To place our item from the first line named col-start to the 5th, we can use:</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / col-start 5 +} +</pre> + +<p>You can also use the <code>span</code> keyword here. My next item will be placed from the 7th line named <code>col-start</code> and span 3 lines.</p> + +<pre class="brush: css">.item2 { + grid-column: col-start 7 / span 3; +} +</pre> + +<p class="brush: html"></p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">I am placed from col-start line 1 to col-start 5</div> + <div class="item2">I am placed from col-start line 7 spanning 3 lines</div> +</div></pre> + +<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p> +</div> + +<p>If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines.</p> + +<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> + +<p>The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower <code>1fr</code> width column named <code>col1-start</code> followed by a wider <code>3fr</code> column named <code>col2-start</code>.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); +} +</pre> + +<p>If your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition. The following definition, creates four <code>1fr</code> tracks, which each have a start and end line.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); +} +</pre> + +<p>If we write this definition out without using repeat notation it would look like this.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; +} +</pre> + +<p>If you have used a track list then you can use the <code>span</code> keyword not just to span a number of lines but also to span a number of lines of a certain name.</p> + +<div id="span_line_number"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr); +} + +.item1 { + grid-column: col1-start / col2-start 2 +} + +.item2 { + grid-row: 2; + grid-column: col1-start 2 / span 2 col1-start; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div> + <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p> +</div> + +<p>Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don’t need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.</p> + +<p>If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid “framework” is:</p> + +<div class="three_column"> +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(12, [col-start] 1fr); +} +</pre> + +<p>We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > * { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-header">I am the header</header> + <aside class="side1">I am sidebar 1</aside> + <article class="content">I am the main article</article> + <aside class="side2">I am sidebar 2</aside> + <footer class="main-footer">I am the footer</footer> +</div> +</pre> + +<p>I could then place this on my grid layout framework like this.</p> + +<pre class="brush: css">.main-header, +.main-footer { + grid-column: col-start / span 12; +} + +.side1 { + grid-column: col-start / span 3; + grid-row: 2; +} + +.content { + grid-column: col-start 4 / span 6; + grid-row: 2; +} + +.side2 { + grid-column: col-start 10 / span 3; + grid-row: 2; +} +</pre> + +<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p> + +<p>Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.</p> + +<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> +</div> + +<p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p> + +<section class="Quick_links" 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><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> + <li data-default-state="open"><a href="#"><strong>ガイド</strong></a> + <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">グリッドレイアウトの自動配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</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/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a> + <ol> + <li><a href="/ja/docs/Web/CSS/grid">grid</a></li> + <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>用語集</strong></a> + <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> + </li> +</ol> +</section> diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..2650339665 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,633 @@ +--- +title: グリッドレイアウトと他のレイアウト方法との関係 +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<p>CSS グリッドレイアウトはレイアウトを行うための完全なシステムの一部として、 CSS の他の機能と一緒に動作するよう設計されました。このガイドでは、既に使われている他の技術と、どうのようにグリッドが適合するかを説明します。</p> + +<h2 id="Grid_and_flexbox" name="Grid_and_flexbox">グリッドとフレックスボックス</h2> + +<p>CSS グリッドレイアウトと<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a>の基本的な違いは、フレックスボックスは一次元 - 一列<em>又は</em>一行 - のレイアウトのために設計されたという点です。グリッドは二次元 - 行と列が同時 - のレイアウトのために設計されました。しかし、２つの仕様書はいくつかの共通の機能を共有しており、すでにフレックスボックスの使い方を学んでいるのであれば、類似性がグリッドの手がかりを助けるでしょう。</p> + +<h3 id="One-dimensional_vs._two-dimensional_layout" name="One-dimensional_vs._two-dimensional_layout">一次元 vs. ニ次元レイアウト</h3> + +<p>一次元と二次元のレイアウトの違いを示すことができる単純な例です。</p> + +<p>最初の例では、一連のボックスを配置するためにフレックスボックスを使用しています。コンテナーの中には五つの子項目があり、 flex プロパティ値を与えて150ピクセルの flex-basis から伸縮できるようにしています。</p> + +<p>{{cssxref("flex-wrap")}} プロパティを <code>wrap</code> に設定して、コンテナーの大きさが細くなりすぎて flex basis を維持することができなくなったら、項目が次の行へ折り返されるようにしています。</p> + +<div id="onedtwod"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + width: 500px; + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 150px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p>図では、2つの項目が新しい行へ折り返されているのがわかると思います。これらの項目は利用可能なスペースを共有していますが、上記の項目の下には整列してはいません。フレックスアイテムが折り返しをした時、新しい行（もしくは列として機能している時は列）のそれぞれがフレックスコンテナーになるからです。スペースの配分は行をまたがって起こります。</p> + +<p>よくある質問はそれらのアイテムをどのようにして並べるかです。2次元レイアウトメソッドが必要な場所では、行またはカラムによるアラインメントのコントロールが必要で、グリッドが得意な場面です。</p> + +<h3 id="The_same_layout_with_CSS_grids" name="The_same_layout_with_CSS_grids">CSS グリッドによる同様のレイアウト</h3> + +<p>次の例では、グリッドを使って同様のレイアウトを構築します。今回は3つの <code>1fr</code> 列トラックを持ちます。項目自体には何もセットする必要はりません。構築されたグリッドのセルそれぞれに項目を一つずつ配置していきます。厳格なグリッドに項目が配置されているため、行と列は整列しています。5つの項目があるので、二つ目の行にある終わりには隙間があります。</p> + +<div id="Two_Dimensional_With_Grid"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p>グリッドとフレックスボックスのどちらを使うかを決めるシンプルな質問です。</p> + +<ul> + <li>行<u>又は</u>列のみによってレイアウトを制御する必要がありますか。 – フレックスボックスを使いましょう</li> + <li>行<u>及び</u>列によりレイアウトを制御する必要がありますか。 - グリッドを使いましょう</li> +</ul> + +<h3 id="Content_out_or_layout_in" name="Content_out_or_layout_in">コンテンツ外かレイアウト内か？</h3> + +<p>1次元 vs 2次元の区別に加えて、レイアウトのためにフレックスボックス又はグリッドを使わなければならないかどうかを決める別の方法があります。フレックスボックスはコンテンツ外から機能します。フレックスボックスの理想的な使用例は、コンテナー内で項目に等しくスペースを設定したいような場合です。コンテンツのサイズはそれぞれの項目がどのくらい個々のスペースを占めるかにより決定されます。もし項目が新しい行へ折り返されたら、行のサイズと利用可能なスペースをもとに項目の間隔が算出されます。</p> + +<p>グリッドはレイアウトの外から機能します。 CSS グリッドレイアウトを使ってレイアウトを作った際、自動配置ルールでアイテムを厳格なグリッドによるセルへ配置させることができます。それらはコンテンツのサイズに応じたトラックを作ることができます。しかしながら、全体のトラックも変わるでしょう。</p> + +<p>もしフレックスボックスを使っていていくつかの柔軟性が欠けていたら、おそらく CSS グリッドレイアウトを使う必要性を感じるでしょう。例えばフレックスアイテムの幅をパーセンテージで設定し、ある行へその他の項目とともに整列させていたら、その場合にはグリッドはより良い選択肢になるでしょう。</p> + +<h3 id="Box_alignment" name="Box_alignment">ボックス配置</h3> + +<p>フレックスボックスの最も素晴らしい特徴は、我々に適切な配置制御を与えてくれる最初のものということでした。これによりページの真ん中にボックスを置くことが簡単になりました。フレックス要素はフレックスコンテナーの高さに引き伸ばすことができ、これはつまり、同じ高さの列が可能ということです。これらは私たちが長い間求めてきたもので、少なくとも視覚効果を実現するためのさまざまな種類のハックが考え出されてきました。</p> + +<p>フレックスボックスの仕様による配置プロパティは <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a> と呼ばれる新しい仕様に追加されました。これはつまり、グリッドレイアウトを含む他の仕様でも使用できるということです。将来的には、他のレイアウト手法にも適用できるようになるでしょう。</p> + +<p>この一連のガイドの後、ボックス配置と、それがグリッドレイアウトの中でどのように動作するのかを見ていきます。今回の場合、フレックスボックスと grid の簡単な比較例を挙げます。</p> + +<p>一つ目のフレックスボックスを利用する例では、３つの要素を持つコンテナがあります。コンテナである<code>wrapper</code>には{{cssxref("min-height")}}が設定され、これはフレックスコンテナーの高さを決めています。コンテナには {{cssxref("align-items")}} を <code>flex-end</code> に設定してコンテナの終端に要素が並ぶようにしました。また、<code>box1</code>の{{cssxref("align-self")}}プロパティをcontainerの高さに合わせるよう<code>streach</code>へ上書きし、<code>box2</code>もコンテナの始まりから整列するにように上書きしています。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p> + +<h3 id="CSSグリッド上でのアラインメント">CSSグリッド上でのアラインメント</h3> + +<p>二つ目の例ではグリッドを使って同じレイアウトを作りましょう。今回はグリッドレイアウトを使うため、ボックスアラインメントプロパティを使います。従って、<code>flex-start</code>と<code>flex-end</code>ではなく<code>start</code>と<code>end</code>を使ってアラインメントします。グリッドレイアウトのケースでは、グリッド領域の中にアイテムをアラインメントしていきます。今回のケースでは単一のグリッドセルを作成していますが、これは複数のグリッドセルで構成された領域にもなることが可能です。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p> + +<h3 id="The_fr_unit_and_flex-basis" name="The_fr_unit_and_flex-basis"><code>fr</code> 単位と <code>flex-basis</code></h3> + +<p>We have already seen how the <code>fr</code> unit works to assign a proportion of available space in the grid container to our grid tracks. The <code>fr</code> unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the <code>flex</code> properties in flexbox while still enabling the creation of a layout in two dimensions.</p> + +<p>If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.</p> + +<p>In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.</p> + +<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4> + +<p>We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the <code>auto-fill</code> and <code>auto-fit</code> properties.</p> + +<p>In this next example, I have used the <code>auto-fill</code> keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> + +<h3 id="A_flexible_number_of_tracks" name="A_flexible_number_of_tracks">柔軟なトラック数</h3> + +<p>This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining <code>auto-fit</code> and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with <code>minmax</code>. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be <code>1fr</code>. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the <code>1fr</code> maximum as an instruction to share out the remaining space between the items.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} +</pre> + +<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> + +<p>We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.</p> + +<h2 id="Grid_and_absolutely_positioned_elements" name="Grid_and_absolutely_positioned_elements">グリッドと絶対位置指定された要素</h2> + +<p>Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.</p> + +<h3 id="A_grid_container_as_containing_block" name="A_grid_container_as_containing_block">含有ブロックとしてのグリッドコンテナ</h3> + +<p>To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item <code>position: absolute</code> it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.</p> + +<p>In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has <code>position: relative</code> and so becomes the positioning context of this item.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3"> + This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into. + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p> + +<p>You can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usual for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.</p> + +<p>If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p> + +<h3 id="A_grid_container_as_parent" name="A_grid_container_as_parent">親としてのグリッドコンテナ</h3> + +<p>If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p> + +<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p>Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p> + +<h3 id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3> + +<p>If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside <code>.box3</code> of the grid.</p> + +<p>I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three + <div class="abspos"> + This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area. + </div> + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p> + +<h2 id="Grid_and_display_contents" name="Grid_and_display_contents">グリッドと <code>display: contents</code></h2> + +<p>A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p> + +<blockquote> +<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p> +</blockquote> + +<p>If you set an item to <code>display:</code> <code>contents</code> the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.</p> + +<div id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p>If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p> + +<div id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p>This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p> + +<p>As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックスガイド</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li> +</ul> + +<section class="Quick_links" 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><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> + <li data-default-state="open"><a href="#"><strong>ガイド</strong></a> + <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/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a> + <ol> + <li><a href="/ja/docs/Web/CSS/grid">grid</a></li> + <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>用語集</strong></a> + <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> + </li> +</ol> +</section> diff --git a/files/ja/web/css/css_grid_layout/subgrid/index.html b/files/ja/web/css/css_grid_layout/subgrid/index.html new file mode 100644 index 0000000000..386ce3ca83 --- /dev/null +++ b/files/ja/web/css/css_grid_layout/subgrid/index.html @@ -0,0 +1,120 @@ +--- +title: Subgrid +slug: Web/CSS/CSS_Grid_Layout/Subgrid +tags: + - CSS + - CSS Display + - CSS Grid + - Guide + - subgrid +translation_of: Web/CSS/CSS_Grid_Layout/Subgrid +--- +<p>{{CSSRef}}</p> + +<p>CSS Grid Layout の Level 2 は、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} に <code>subgrid</code> 値を含みます。このガイドでは、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述します。</p> + +<div class="blockIndicator warning"> +<p><strong>重要</strong>: この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装する唯一のブラウザーです。</p> +</div> + +<h2 id="Introduction_to_subgrid" name="Introduction_to_subgrid">サブグリッドの導入</h2> + +<p>グリッドコンテナーに <code>display: grid</code> を追加する場合、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。</p> + +<p>グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にできます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。</p> + +<p><code>grid-template-columns</code> および <code>grid-template-rows</code> の両方またはどちらかに <code>subgrid</code> 値を設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。</p> + +<p>例えば、<code>grid-template-columns: subgrid</code> を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる {{cssxref("gap")}} 値で上書きすることもできます。ライン名は親からサブグリッドへ渡されますが、サブグリッドが独自のライン名を定義することもできます。</p> + +<h2 id="Subgrid_for_columns" name="Subgrid_for_columns">列のサブグリッド</h2> + +<p>以下の例では、幅 <code>1fr</code> の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。</p> + +<p>このグリッドの 2 から 7 番の列ライン、2 から 4 番の行ラインに <code>.item</code> を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に <code>.subitem</code> を置きます。</p> + +<p>この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p> + +<p>サブグリッド内のライン番号は再び 1 番から始まるので注意してください。サブグリッド内の列ライン 1 番は、サブグリッドの最初のラインです。サブグリッド化された要素は親グリッドのライン番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上のライン番号が常に同じであることが分かります。</p> + +<h2 id="Subgrid_for_rows" name="Subgrid_for_rows">行のサブグリッド</h2> + +<p>次の例は、上記と同じ設定で、<code>grid-template-rows</code> の値に <code>subgrid</code> を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p> + +<h2 id="A_subgrid_in_both_dimensions" name="A_subgrid_in_both_dimensions">列と行のサブグリッド</h2> + +<p>もちろん、以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p> + +<h3 id="No_implicit_grid_in_a_subgridded_dimension" name="No_implicit_grid_in_a_subgridded_dimension">サブグリッド化された範囲に暗黙のグリッドはありません</h3> + +<p>アイテムを自動配置する必要があり、そのアイテムが何個になるか分からないときは、サブグリッドの作成時に、それらのアイテムを保持する追加の行が作成されないように注意してください。</p> + +<p>次の例を見てください。これは上記の例と同様に、同じ親グリッドと子グリッドを使用していますが、サブグリッド内の 10 個のグリッドセルに 12 個のアイテムを自動配置しようとしています。このサブグリッドには行と列どちらにも追加の 2 個のアイテムを置く場所がないため、仕様で定義されている通りに、これらはグリッドの最後のトラック内に置かれることになります。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p> + +<p><code>grid-template-rows</code> の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p> + +<h2 id="The_gap_properties_and_subgrid" name="The_gap_properties_and_subgrid">gap プロパティとサブグリッド</h2> + +<p>親グリッドに {{cssxref("gap")}} または {{cssxref("column-gap")}}, {{cssxref("row-gap")}} が指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに <code>gap-*</code> プロパティを使用することにより達成できます。</p> + +<p>これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは <code>row-gap</code> の値に <code>0</code> を設定しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p> + +<p>これを Firefox のグリッドインスペクターで調査すると、グリッドのラインが gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでのスペースが与えられます。</p> + +<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p> + +<h2 id="Named_grid_lines" name="Named_grid_lines">名付けられたグリッドライン</h2> + +<p>CSS のグリッドを利用する時、そのグリッドのラインに名前を付けて、ライン番号ではなく、これらの名前でアイテムを配置できます。親グリッドのライン名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親のラインに <code>col-start</code> および <code>col-end</code> という名前を付けました。これらはサブアイテムの配置に使用されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p> + +<p>また、サブグリッドにもライン名を指定できます。<code>subgrid</code> キーワードの後のラインのリストに、角括弧で囲まれたライン名を追加します。サブグリッドに 4 本のラインがある場合、次の構文ですべてのラインに名前を付けられます: <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code></p> + +<p>サブグリッドに指定されたラインは親で指定された任意のラインに追加されるため、そのライン名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親ラインを利用して配置し、もう一つはサブグリッドのラインを利用しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p> + +<h2 id="Using_subgrids" name="Using_subgrids">サブグリッドの利用</h2> + +<p>サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。</p> + +<p>subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、<code>grid-template-rows</code> の <code>subgrid</code> 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために <code>grid-auto-rows</code> に値を与えることだけです。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<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> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>Mozilla Developer YouTube チャンネル上の動画、<a href="https://www.youtube.com/watch?v=gmQlK3kRft4">Laying out forms using subgrid</a> と <a href="https://www.youtube.com/watch?v=lLnFtK1LNu4">Don't Wait To Use Subgrid For Better Card Layouts</a> をご覧ください。</li> + <li>CSSConf.eu でのプレゼンテーション <a href="https://noti.st/rachelandrew/i6gUcF/hello-subgrid">Hello Subgrid!</a></li> +</ul> |