blob: 4d49e35c4da04fa3f1b5da4654dc959b115a1e2d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
---
title: グリッドラッパー
slug: Web/CSS/Layout_cookbook/Grid_wrapper
tags:
- CSS
- Guide
- Layout
- cookbook
- recipes
translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
---
<div>{{CSSRef}}</div>
<p class="summary"><span class="seoSummary">このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。</span></p>
<h2 id="Requirements" name="Requirements">要件</h2>
<p>グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。</p>
<h2 id="Recipe" name="Recipe">レシピ</h2>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
<div class="note">
<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">この例をダウンロードする</a></p>
</div>
<h2 id="Choices_made" name="Choices_made">行った選択</h2>
<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う6つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。</p>
<p dir="ltr">外側の2つの列の最大サイズは <code>1fr</code> です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。</p>
<h2 id="Useful_fallbacks_or_alternative_methods" name="Useful_fallbacks_or_alternative_methods">便利な代替方法</h2>
<p>このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の <code>auto</code> の {{cssxref("margin")}} とともに <code>max-width</code> を設定すると便利です。</p>
<pre class="brush: css">.grid {
max-width: 1200px;
margin: 0 auto; // コンテナを水平方向に中央揃え
}
/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
@supports (display: grid) {
.grid {
display: grid;
/* 他のグリッドのコードはここへ */
max-width: none;
margin: 0;
}
}</pre>
<p><code>full-width</code> 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（<a href="https://una.im/">Una Kravets</a> の好意による）。</p>
<pre class="brush: css">.item {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}</pre>
<p>これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
<p>グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドのレイアウトとアクセシビリティ</a>を参照）。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p> </p>
<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
<p>{{Compat("css.properties.grid-template-columns")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{Cssxref("grid-template-columns")}}</li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">MDN の CSS グリッドレイアウト</a></li>
<li>記事:<a href="https://css-irl.info/more-flexibility-with-minmax/"> CSS グリッド: minmax() によるさらなる柔軟性</a>（英語）</li>
<li>記事: <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">CSS グリッドを使った脱出</a>（英語）</li>
</ul>
<p> </p>
|
