diff options
Diffstat (limited to 'files/ja/web/css/align-items/index.html')
| -rw-r--r-- | files/ja/web/css/align-items/index.html | 286 |
1 files changed, 286 insertions, 0 deletions
diff --git a/files/ja/web/css/align-items/index.html b/files/ja/web/css/align-items/index.html new file mode 100644 index 0000000000..c93aa16148 --- /dev/null +++ b/files/ja/web/css/align-items/index.html @@ -0,0 +1,286 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - Reference +translation_of: Web/CSS/align-items +--- +<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>align-items</code></strong> プロパティは、すべての直接の子要素に集合として {{cssxref("align-self")}} の値を設定します。</span>フレックスボックスでは{{glossary("Cross Axis", "交差軸")}}方向のアイテムの配置を制御します。グリッドレイアウトでは、{{glossary("Grid Areas", "グリッド領域")}}におけるアイテムのブロック軸方向の配置を制御します。</p> + +<p>以下のデモは、グリッドレイアウトを使用して <code>align-items</code> のいくつかの値の動作を示しています。</p> + +<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css no-line-numbers">/* 基本キーワード */ +align-items: normal; +align-items: stretch; + +/* 位置による配置 */ +/* align-items は左と右の値を取らない */ +align-items: center; /* アイテムを中央付近にまとめる */ +align-items: start; /* アイテムを先頭にまとめる */ +align-items: end; /* アイテムを末尾にまとめる */ +align-items: flex-start; /* フレックスアイテムを先頭にまとめる */ +align-items: flex-end; /* フレックスアイテムを末尾にまとめる */ + +/* ベースラインに配置する */ +align-items: baseline; +align-items: first baseline; +align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */ +align-items: safe center; +align-items: unsafe center; + +/* グローバル値 */ +align-items: inherit; +align-items: initial; +align-items: unset; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>キーワードの効果は現在のレイアウトモードに依存します。 + <ul> + <li>絶対配置のレイアウトでは、このキーワードは<em>置換</em>絶対配置ボックスにおける <code>start</code> のように動作し、<em>他のすべての</em>絶対配置ボックスでは <code>stretch</code> として動作します。</li> + <li>絶対配置レイアウトの静的位置では、キーワードは <code>stretch</code> として動作します。</li> + <li>フレックスアイテムについては、このキーワードは <code>stretch</code> として動作します。</li> + <li>グリッドアイテムについては、このキーワードは <code>stretch</code> の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は <code>start</code> のように動作します。</li> + <li>このプロパティはブロックレベルボックスや、表のセルには適用されません。</li> + </ul> + </dd> + <dt><code>flex-start</code></dt> + <dd>フレックスアイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。</dd> + <dt><code>flex-end</code></dt> + <dd>フレックスアイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。</dd> + <dt><code>center</code></dt> + <dd>フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。</dd> + <dt><code>start</code></dt> + <dd>そのアイテムは、互いにその軸の配置コンテナーの始点側の端に寄せられます。</dd> + <dt><code>end</code></dt> + <dd>そのアイテムは、互いにその軸の配置コンテナーの終点側の端に寄せられます。</dd> + <dt><code>self-start</code></dt> + <dd>そのアイテムは、その軸の配置コンテナーで、そのアイテムの始点側の端に寄せられます。</dd> + <dt><code>self-end</code></dt> + <dd>そのアイテムは、その軸の配置コンテナーで、そのアイテムの終点側の端に寄せられます。</dd> +</dl> + +<dl> + <dt><code>baseline</code></dt> + <dt><code>first baseline</code></dt> + <dt><code>last baseline</code></dt> + <dd>すべてのフレックスアイテムは、ベースラインが一直線になるように配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。</dd> + <dt><code>stretch</code></dt> + <dd>アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。</dd> + <dt><code>safe</code></dt> + <dd>配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが <code>start</code> であったかのように配置されます。</dd> + <dt><code>unsafe</code></dt> + <dd>配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4]">#container { + height:200px; + width: 240px; + align-items: center; /* Can be changed in the live sample */ + background-color: #8c8c8c; +} + +.flex { + display: flex; + flex-wrap: wrap; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 50px); +} + +div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">align-items: </label> + <select id="values"> + <option value="normal">normal</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="center" selected>center</option> + <option value="baseline">baseline</option> + <option value="stretch">stretch</option> + + <option value="start">start</option> + <option value="end">end</option> + <option value="self-start">self-start</option> + <option value="self-end">self-end</option> + <option value="left">left</option> + <option value="right">right</option> + + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + + <option value="safe center">safe center</option> + <option value="unsafe center">unsafe center</option> + <option value="safe right">safe right</option> + <option value="unsafe right">unsafe right</option> + <option value="safe end">safe end</option> + <option value="unsafe end">unsafe end</option> + <option value="safe self-end">safe self-end</option> + <option value="unsafe self-end">unsafe self-end</option> + <option value="safe flex-end">safe flex-end</option> + <option value="unsafe flex-end">unsafe flex-end</option> + </select> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.alignItems = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", "260px", "290px")}}</p> + +<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("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>最新の構文定義に更新。</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> + +<p>{{Compat("css.properties.align-items.flex_context")}}</p> + +<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> + +<p>{{Compat("css.properties.align-items.grid_context")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li> + <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナーにおけるアイテムの配置</a></em></li> + <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックスの配置</a></em></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS ボックス配置</a></li> + <li>{{cssxref("align-self")}} プロパティ</li> +</ul> + +<div>{{CSSRef}}</div> |