diff options
Diffstat (limited to 'files/ja/web/css/place-content/index.md')
| -rw-r--r-- | files/ja/web/css/place-content/index.md | 347 |
1 files changed, 165 insertions, 182 deletions
diff --git a/files/ja/web/css/place-content/index.md b/files/ja/web/css/place-content/index.md index 0ffb456baf..a6875ca061 100644 --- a/files/ja/web/css/place-content/index.md +++ b/files/ja/web/css/place-content/index.md @@ -3,27 +3,33 @@ title: place-content slug: Web/CSS/place-content tags: - CSS - - CSS プロパティ - CSS ボックス配置 - - Reference - - align-content - - justify-content - - place-content + - CSS プロパティ - リファレンス + - place-content + - recipe:css-shorthand-property +browser-compat: css.properties.place-content translation_of: Web/CSS/place-content --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +**`place-content`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、ブロック方向とインライン方向の内容物の配置 (すなわち {{CSSxRef("align-content")}} および {{CSSxRef("justify-content")}}) を、[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)や[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)などのレイアウトシステムにおいて、一度に指定することができます。 + -<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>place-content</strong></code> プロパティは、 {{CSSxRef("align-content")}} および {{CSSxRef("justify-content")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。これらの配置方法を利用するどのレイアウト方法でも使用することができます。</p> +{{EmbedInteractiveExample("pages/css/place-content.html")}} -<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div> +## 構成要素のプロパティ -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +このプロパティは以下の CSS プロパティの一括指定です。 -<h2 id="Syntax" name="Syntax">構文</h2> +- [`align-content`](/ja/docs/Web/CSS/align-content) +- [`justify-content`](/ja/docs/Web/CSS/justify-content) -<pre class="brush:css no-line-numbers">/* 位置による配置 */ -/* align-content は left 及び right の値を取りません */ +## 構文 + +```css +/* 位置による配置 */ +/* align-content は left および right の値を取りません */ place-content: center start; place-content: start center; place-content: end left; @@ -45,57 +51,141 @@ place-content: stretch space-evenly; /* グローバル値 */ place-content: inherit; place-content: initial; -place-content: unset;</pre> +place-content: revert; +place-content: unset; +``` + +最初の値は {{CSSxRef("align-content")}} プロパティの値で、2 番目の値は {{CSSxRef("justify-content")}} の値です。 + +> **Note:** 2 番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。 + +### 値 + +- `start` + - : 各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。 +- `end` + - : 各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。 +- `flex-start` + - : 各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。 +- `flex-end` + - : 各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。 +- `center` + - : 各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。 +- `left` + - : 各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。 +- `right` + - : 各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。 +- `space-between` + - : 各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。 +- `baseline`, `first baseline`, `last baseline` + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `space-around` + - : 各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。 +- `space-evenly` + - : 各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。 +- `stretch` + - : 各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +<h3 id="Placing_content_in_a_flex_container">フレックスコンテナー内の内容物の配置</h3> + +#### HTML + +```html +<div id="container"> + <div class="small">Lorem</div> + <div class="small">Lorem<br/>ipsum</div> + <div class="large">Lorem</div> + <div class="large">Lorem<br/>ipsum</div> + <div class="large"></div> + <div class="large"></div> +</div> +``` + +```html hidden +<code>writing-mode:</code><select id="writingMode"> + <option value="horizontal-tb" selected>horizontal-tb</option> + <option value="vertical-rl">vertical-rl</option> + <option value="vertical-lr">vertical-lr</option> + <option value="sideways-rl">sideways-rl</option> + <option value="sideways-lr">sideways-lr</option> +</select><code>;</code><br/> +<code>direction:</code><select id="direction"> + <option value="ltr" selected>ltr</option> + <option value="rtl">rtl</option> +</select><code>;</code><br/> +<code>place-content:</code><select id="alignContentAlignment"> + <option value="normal">normal</option> + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + <option value="baseline">baseline</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly" selected>space-evenly</option> + <option value="stretch">stretch</option> + <option value="center">center</option> + <option value="start">start</option> + <option value="end">end</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="safe">safe</option> + <option value="unsafe">unsafe</option> +</select> + <select id="justifyContentAlignment"> + <option value="normal">normal</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + <option value="stretch">stretch</option> + <option value="center" selected>center</option> + <option value="start">start</option> + <option value="end">end</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="safe">safe</option> + <option value="unsafe">unsafe</option> +</select><code>;</code> +``` + +```js hidden +var update = function () { + document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; +} + +var alignContentAlignment = document.getElementById("alignContentAlignment"); +alignContentAlignment.addEventListener("change", update); -<p>最初の値は {{CSSxRef("align-content")}} プロパティ値で、二番目の値は {{CSSxRef("justify-content")}} の値です。</p> +var justifyContentAlignment = document.getElementById("justifyContentAlignment"); +justifyContentAlignment.addEventListener("change", update); -<div class="warning"> -<p><strong>重要</strong>: 二番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。</p> -</div> +var writingM = document.getElementById("writingMode"); +writingM.addEventListener("change", function (evt) { + document.getElementById("container").style.writingMode = evt.target.value; +}); +var direction = document.getElementById("direction"); +direction.addEventListener("change", function (evt) { + document.getElementById("container").style.direction = evt.target.value; +}); +``` -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>start</code></dt> - <dd>各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。</dd> - <dt><code>end</code></dt> - <dd>各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。</dd> - <dt><code>flex-start</code></dt> - <dd>各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。<br> - これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は <code>start</code> のように扱われます。</dd> - <dt><code>flex-end</code></dt> - <dd>各アイテムは、フレックスコンテナーに依存して、主軸または交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。<br> - これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は <code>end</code> のように扱われます。</dd> - <dt><code>center</code></dt> - <dd>各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。</dd> - <dt><code>left</code></dt> - <dd>各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は <code>start</code> のように動作します。</dd> - <dt><code>right</code></dt> - <dd>各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は <code>start</code> のように動作します。</dd> - <dt><code>space-between</code></dt> - <dd>各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。</dd> - <dt><code>baseline<br> - first baseline</code><br> - <code>last baseline</code></dt> - <dd>first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br> - <code>first baseline</code> の代替配置は <code>start</code>、<code>last baseline</code> の代替配置は <code>end</code> です。</dd> - <dt><code>space-around</code></dt> - <dd>各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。</dd> - <dt><code>space-evenly</code></dt> - <dd>各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。</dd> - <dt><code>stretch</code></dt> - <dd>各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が <code>auto</code> のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[7]">#container { +#### CSS + +```css +#container { display: flex; height:240px; width: 240px; @@ -106,7 +196,7 @@ place-content: unset;</pre> place-content: flex-end center; /* Can be changed in the live sample */ } -div > div { +div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; @@ -121,132 +211,25 @@ div > div { font-size: 14px; height: 50px; } -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div class="small">Lorem</div> - <div class="small">Lorem<br/>ipsum</div> - <div class="large">Lorem</div> - <div class="large">Lorem<br/>impsum</div> - <div class="large"></div> - <div class="large"></div> -</div> -</pre> - -<div class="hidden"> -<pre class="brush:html"><code>writing-mode:</code><select id="writingMode"> - <option value="horizontal-tb" selected>horizontal-tb</option> - <option value="vertical-rl">vertical-rl</option> - <option value="vertical-lr">vertical-lr</option> - <option value="sideways-rl">sideways-rl</option> - <option value="sideways-lr">sideways-lr</option> -</select><code>;</code><br/> -<code>direction:</code><select id="direction"> - <option value="ltr" selected>ltr</option> - <option value="rtl">rtl</option> -</select><code>;</code><br/> -<code>place-content:</code><select id="alignContentAlignment"> - <option value="normal">normal</option> - <option value="first baseline">first baseline</option> - <option value="last baseline">last baseline</option> - <option value="baseline">baseline</option> - <option value="space-between">space-between</option> - <option value="space-around">space-around</option> - <option value="space-evenly" selected>space-evenly</option> - <option value="stretch">stretch</option> - <option value="center">center</option> - <option value="start">start</option> - <option value="end">end</option> - <option value="flex-start">flex-start</option> - <option value="flex-end">flex-end</option> - <option value="safe">safe</option> - <option value="unsafe">unsafe</option> -</select> -<select id="justifyContentAlignment"> - <option value="normal">normal</option> - <option value="space-between">space-between</option> - <option value="space-around">space-around</option> - <option value="space-evenly">space-evenly</option> - <option value="stretch">stretch</option> - <option value="center" selected>center</option> - <option value="start">start</option> - <option value="end">end</option> - <option value="flex-start">flex-start</option> - <option value="flex-end">flex-end</option> - <option value="left">left</option> - <option value="right">right</option> - <option value="safe">safe</option> - <option value="unsafe">unsafe</option> -</select><code>;</code> -</pre> - -<pre class="brush: js">var update = function () { - document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; -} - -var alignContentAlignment = document.getElementById("alignContentAlignment"); -alignContentAlignment.addEventListener("change", update); - -var justifyContentAlignment = document.getElementById("justifyContentAlignment"); -justifyContentAlignment.addEventListener("change", update); - -var writingM = document.getElementById("writingMode"); -writingM.addEventListener("change", function (evt) { - document.getElementById("container").style.writingMode = evt.target.value; -}); -var direction = document.getElementById("direction"); -direction.addEventListener("change", function (evt) { - document.getElementById("container").style.direction = evt.target.value; -}); -</pre> -</div> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", "370", "300")}}</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-place-content", "place content")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> +``` -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +#### 結果 -<div>{{Compat("css.properties.place-content")}}</div> +{{EmbedLiveSample("Placing_content_in_a_flex_container", "370", "300")}} -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## 仕様書 -<div>{{Compat("css.properties.place-content.flex_context")}}</div> +{{Specifications}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## ブラウザーの互換性 -<div>{{Compat("css.properties.place-content.grid_context")}}</div> +{{Compat}} -<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-content")}} プロパティ</li> - <li>{{CSSxRef("justify-content")}} プロパティ</li> -</ul> +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスコンテナー内でのアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ +- CSS グリッドガイド: _[CSS グリッドレイアウト内でのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ +- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment) +- {{CSSxRef("align-content")}} プロパティ +- {{CSSxRef("justify-content")}} プロパティ |