diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-18 12:29:30 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-26 23:17:41 +0900 |
| commit | ebde2ff8adc34934e9f3ea8fb7644e771122b3c6 (patch) | |
| tree | 7a07c8ff26370e25a4466775b337ed2744ce1e03 /files/ja/web/css | |
| parent | 12dcd99f1954265d69c461fe2c2a477b52ce735c (diff) | |
| download | translated-content-ebde2ff8adc34934e9f3ea8fb7644e771122b3c6.tar.gz translated-content-ebde2ff8adc34934e9f3ea8fb7644e771122b3c6.tar.bz2 translated-content-ebde2ff8adc34934e9f3ea8fb7644e771122b3c6.zip | |
CSS Box Alignments 関係の文書を更新
- 2021/10/17 時点の英語版に同期
- 一部および画像は新規翻訳
Diffstat (limited to 'files/ja/web/css')
28 files changed, 1891 insertions, 1829 deletions
diff --git a/files/ja/web/css/align-content/index.md b/files/ja/web/css/align-content/index.md index 907888b7bc..653fd6c9bb 100644 --- a/files/ja/web/css/align-content/index.md +++ b/files/ja/web/css/align-content/index.md @@ -3,26 +3,25 @@ title: align-content slug: Web/CSS/align-content tags: - CSS - - CSS フレックスボックス - - CSS プロパティ - CSS ボックス配置 - - Reference - - place-content + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.align-content translation_of: Web/CSS/align-content --- -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>align-content</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>の交差軸または<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>のブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。</p> +[CSS](/ja/docs/Web/CSS) の **`align-content`** プロパティは、[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)の交差軸または[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定します。 -<p>下記の対話型のデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。</p> +下記のインタラクティブデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。 -<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> +{{EmbedInteractiveExample("pages/css/align-content.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +単一行のフレックスコンテナー (つまり、 `flex-wrap: nowrap` のもの) では、このプロパティは効果がありません。 -<p>単一行のフレックスコンテナー (つまり、 <code>flex-wrap: nowrap</code> のもの) では、このプロパティは効果がありません。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 基本的な位置による配 */ +```css +/* 基本的な位置による配置 */ /* align-content は left および right の値を取りません */ align-content: center; /* アイテムを中央に寄せる */ align-content: start; /* アイテムを先頭に寄せる */ @@ -58,55 +57,60 @@ align-content: unsafe center; /* グローバル値 */ align-content: inherit; align-content: initial; +align-content: revert; align-content: unset; -</pre> - -<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>normal</code></dt> - <dd>各アイテムは <code>align-content</code> の値が設定されていないかのように、既定の位置に寄せて配置されます。</dd> - <dt><code>baseline<br> - first baseline</code><br> - <code>last baseline</code></dt> - <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd> - <dd>first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br> - <code>first baseline</code> の代替配置は <code>start</code>、<code>last baseline</code> の代替配置は <code>end</code> です。</dd> - <dt><code>space-between</code></dt> - <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。</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> - <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> +``` + +### 値 + +- `start` + - : 各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。 +- `end` + - : 各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。 +- `flex-start` + - : 各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。 +- `flex-end` + - : 各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。 +- `center` + - : 各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。 +- `normal` + - : 各アイテムは `align-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。 +- `baseline`, `first baseline`, `last baseline` + + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + +  + + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `space-between` + - : 各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。 +- `space-around` + - : 各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。 +- `space-evenly` + - : 各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、先頭側の端と最初のアイテムの間のの余白、末尾側の端と最後のアイテムの間の余白は、まったく同じ幅になります。 +- `stretch` + - : 各アイテムの交差軸方向の寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、交差軸方向の寸法の合計が配置コンテナーを満たすようになります。 +- `safe` + - : 配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。 +- `unsafe` + - : 配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。 + +## 公式定義 + +{{CSSInfo}} + +## 関連情報 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css; highlight[4]">#container { +```css +#container { height:200px; width: 240px; align-content: center; /* Can be changed in the live sample */ @@ -123,7 +127,7 @@ align-content: unset; grid-template-columns: repeat(auto-fill, 50px); } -div > div { +div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; @@ -170,64 +174,63 @@ select { .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-content: </label> - <select id="values"> - <option value="normal">normal</option> - <option value="stretch">stretch</option> - <option value="flex-start">flex-start</option> - <option value="flex-end">flex-end</option> - <option value="center" selected>center</option> - <option value="space-between">space-between</option> - <option value="space-around">space-around</option> - <option value="space-evenly">space-evenly</option> - - <option value="start">start</option> - <option value="end">end</option> - <option value="left">left</option> - <option value="right">right</option> - - <option value="baseline">baseline</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 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'); +``` + +### HTML + +```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-content: </label> + <select id="values"> + <option value="normal">normal</option> + <option value="stretch">stretch</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="center" selected>center</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + + <option value="start">start</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + + <option value="baseline">baseline</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 flex-end">safe flex-end</option> + <option value="unsafe flex-end">unsafe flex-end</option> + </select> +</div> +``` + +```js hidden +var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -238,58 +241,25 @@ values.addEventListener('change', function (evt) { display.addEventListener('change', function (evt) { container.className = evt.target.value; }); -</pre> -</div> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 260, 290)}}</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-content", "align-content")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>[ first | last ]? baseline, start, end, left, right, unsafe | safe の値を追加。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}</td> - <td>{{Spec2("CSS3 Flexbox")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{EmbedLiveSample("Examples", 260, 290)}} -<div>{{cssinfo}}</div> +## 仕様書 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{Specifications("css.properties.align-content.grid_context")}} -<div> -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.align-content.flex_context")}}</p> - -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> - -<p>{{Compat("css.properties.align-content.grid_context")}}</p> -</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> -</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) -<div>{{CSSRef}}</div> +{{CSSRef}} diff --git a/files/ja/web/css/align-items/index.md b/files/ja/web/css/align-items/index.md index 49893ce4f4..07f962683e 100644 --- a/files/ja/web/css/align-items/index.md +++ b/files/ja/web/css/align-items/index.md @@ -3,24 +3,23 @@ title: align-items slug: Web/CSS/align-items tags: - CSS - - CSS グリッドレイアウト - CSS フレックスボックス - CSS プロパティ - - CSS ボックス配置 - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.align-items 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> +[CSS](/ja/docs/Web/CSS) の **`align-items`** プロパティは、すべての直接の子要素に集合として {{cssxref("align-self")}} の値を設定します。フレックスボックスでは{{glossary("Cross Axis", "交差軸")}}方向のアイテムの配置を制御します。グリッドレイアウトでは、{{glossary("Grid Areas", "グリッド領域")}}におけるアイテムのブロック軸方向の配置を制御します。 -<p>以下のデモは、グリッドレイアウトを使用して <code>align-items</code> のいくつかの値の動作を示しています。</p> +以下のデモは、グリッドレイアウトを使用して `align-items` のいくつかの値の動作を示しています。 -<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div> +{{EmbedInteractiveExample("pages/css/align-items.html")}} -<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">/* 基本キーワード */ +```css +/* 基本キーワード */ align-items: normal; align-items: stretch; @@ -42,63 +41,61 @@ align-items: unsafe center; /* グローバル値 */ align-items: inherit; align-items: initial; +align-items: revert; 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> +``` + +### 値 + +- `normal` + + - : このキーワードの効果は現在のレイアウトモードに依存します。 + + - 絶対位置指定レイアウトでは、このキーワードは*置換*絶対位置指定ボックスにおける `start` のように動作し、*他のすべての*絶対位置指定ボックスでは `stretch` として動作します。 + - 絶対位置指定レイアウトの静的位置では、キーワードは `stretch` として動作します。 + - フレックスアイテムについては、このキーワードは `stretch` として動作します。 + - グリッドアイテムについては、このキーワードは `stretch` の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は `start` のように動作します。 + - このプロパティはブロックレベルボックスや、表のセルには適用されません。 +- `flex-start` + - : フレックスアイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。 +- `flex-end` + - : フレックスアイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。 +- `center` + - : フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。 +- `start` + - : そのアイテムは、互いにその軸の配置コンテナーの先頭側の端に寄せられます。 +- `end` + - : そのアイテムは、互いにその軸の配置コンテナーの末尾側の端に寄せられます。 +- `self-start` + - : そのアイテムは、その軸の配置コンテナーで、そのアイテムの先頭側の端に寄せられます。 +- `self-end` + - : そのアイテムは、その軸の配置コンテナーで、そのアイテムの末尾側の端に寄せられます。 +- `baseline`, `first baseline`, `last baseline` + - : すべてのフレックスアイテムは、[フレックスコンテナーのベースライン](https://drafts.csswg.org/css-flexbox-1/#flex-baselines)に沿って配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。 +- `stretch` + - : アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。 +- `safe` + - : 配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。 +- `unsafe` + - : 配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。 + +## 公式定義 + +{{CSSInfo}} + +## 関連情報 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css; highlight[4]">#container { +```css +#container { height:200px; width: 240px; - align-items: center; /* Can be changed in the live sample */ + align-items: center; /* ライブサンプルで変更可能 */ background-color: #8c8c8c; } @@ -112,7 +109,7 @@ align-items: unset; grid-template-columns: repeat(auto-fill, 50px); } -div > div { +div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; @@ -158,65 +155,65 @@ select { .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'); +} +``` + +### HTML + +```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> +``` + +```js hidden +var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -227,57 +224,26 @@ values.addEventListener('change', function (evt) { 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> +{{EmbedLiveSample("Examples", "260px", "290px")}} -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.align-items.flex_context")}}</p> +{{Specifications("css.properties.align-items.grid_context")}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.align-items.grid_context")}}</p> +{{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-self")}} プロパティ</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-self")}} プロパティ -<div>{{CSSRef}}</div> +{{CSSRef}} diff --git a/files/ja/web/css/align-self/index.md b/files/ja/web/css/align-self/index.md index 7605ab04dd..bd33894002 100644 --- a/files/ja/web/css/align-self/index.md +++ b/files/ja/web/css/align-self/index.md @@ -3,26 +3,26 @@ title: align-self slug: Web/CSS/align-self tags: - CSS + - CSS ボックス配置 - CSS フレックスボックス - CSS プロパティ - - CSS ボックス配置 - - place-self - リファレンス + - recipe:css-property +browser-compat: css.properties.align-self translation_of: Web/CSS/align-self --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>align-self</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、グリッドやフレックスのアイテムの {{cssxref("align-items")}} の値を上書きします。グリッドでは、アイテムは{{glossary("Grid Areas", "グリッド領域")}}内に配置されます。フレックスボックスでは、アイテムは{{glossary("cross axis", "交差軸")}}上に配置されます。</p> +**`align-self`** は [CSS](/ja/docs/Web/CSS) のプロパティで、グリッドやフレックスのアイテムの {{cssxref("align-items")}} の値を上書きします。グリッドでは、アイテムは{{glossary("Grid Areas", "グリッド領域")}}内で配置されます。フレックスボックスでは、アイテムは{{glossary("cross axis", "交差軸")}}上で配置されます。 -<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div> +{{EmbedInteractiveExample("pages/css/align-self.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが `auto` の場合、`align-self` は無視されます。 -<p>このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが <code>auto</code> の場合、 <code> align-self</code> は無視されます。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ align-self: auto; align-self: normal; @@ -49,63 +49,68 @@ align-self: unsafe center; /* グローバル値 */ align-self: inherit; align-self: initial; -align-self: unset;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>親の {{cssxref("align-items")}} の値で計算します。</dd> - <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>self-start</code></dt> - <dd>アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。</dd> - <dt><code>self-end</code></dt> - <dd>アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。</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>このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。</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>stretch</code></dt> - <dd>アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が <code>auto</code> であった場合、アイテムの寸法は {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 <code>auto</code> が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。</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> +align-self: revert; +align-self: unset; +``` + +### 値 + +- `auto` + - : 親の {{cssxref("align-items")}} の値で計算します。 +- `normal` + + - : このキーワードの効果は、現在のレイアウトモードに依存します。 + + - 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように動作し、*その他*の絶対位置ボックスには `stretch` のように動作します。 + - 絶対位置指定レイアウトの固定位置指定時は、このキーワードは `stretch` と同様に動作します。 + - フレックスアイテムでは、このキーワードは `stretch` と同様に動作します。 + - グリッドアイテムでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように動作します。 + - ブロックレベルボックスと表のセルでは、プロパティは適用されません。 + +- `self-start` + - : アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。 +- `self-end` + - : アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。 +- `flex-start` + - : このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。 +- `flex-end` + - : このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。 +- `center` + - : このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。 +- `baseline`, `first baseline`, `last baseline` + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `stretch` + - : アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が `auto` であった場合、アイテムの寸法は {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 `auto` が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。 +- `safe` + - : アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが `start` であったかのように配置されます。 +- `unsafe` + - : アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。 + +## 公式定義 + +{{CSSInfo}} + +## 関連情報 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML" name="HTML">HTML</h3> +### HTML -<pre class="brush: html"><section> - <div>Item #1</div> - <div>Item #2</div> - <div>Item #3</div> -</section></pre> +```html +<section> + <div>Item #1</div> + <div>Item #2</div> + <div>Item #3</div> +</section> +``` -<h3 id="CSS" name="CSS">CSS</h3> +### CSS -<pre class="brush: css">section { +```css +section { display: flex; align-items: center; height: 120px; @@ -121,54 +126,25 @@ div { div:nth-child(3) { align-self: flex-end; background: pink; -}</pre> - -<h3 id="Result" name="Result">表示結果</h3> - -<p>{{EmbedLiveSample('Example')}}</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-self", "align-self")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>最新の構文定義に更新。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td> - <td>{{Spec2("CSS3 Flexbox")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +} +``` -<p>{{cssinfo}}</p> +### 結果 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{EmbedLiveSample('Examples')}} -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.align-self.flex_context")}}</p> +{{Specifications("css.properties.align-self.grid_context")}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.align-self.grid_context")}}</p> +{{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-items")}} プロパティ</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-items")}} プロパティ diff --git a/files/ja/web/css/cascade/index.md b/files/ja/web/css/cascade/index.md index a1e6481a60..bc888d89f2 100644 --- a/files/ja/web/css/cascade/index.md +++ b/files/ja/web/css/cascade/index.md @@ -112,7 +112,6 @@ li { margin-left: 0 } /* これは初期化 */ **HTML:** ```html -<ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> diff --git a/files/ja/web/css/column-gap/index.md b/files/ja/web/css/column-gap/index.md index 032d6d4f62..038b642366 100644 --- a/files/ja/web/css/column-gap/index.md +++ b/files/ja/web/css/column-gap/index.md @@ -3,116 +3,113 @@ title: column-gap (grid-column-gap) slug: Web/CSS/column-gap tags: - CSS - - CSS グリッドレイアウト - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 + - CSS グリッドレイアウト - CSS 段組みレイアウト - - Reference + - CSS プロパティ + - リファレンス - column-gap - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.column-gap translation_of: Web/CSS/column-gap --- -<div>{{CSSRef}}</div> - -<p><strong><code>column-gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/column-gap.html")}}</div> +**`column-gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/column-gap.html")}} -<p>当初は<a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>の一部でしたが、 <code>column-gap</code> の定義は複数のレイアウト方法を含めるように拡張されました。現在は<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。</p> +当初は[段組みレイアウト](/ja/docs/Web/CSS/CSS_Columns)の一部でしたが、`column-gap` の定義は複数のレイアウト方式を含めるように拡張されました。現在は[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。 -<div class="note"> -<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>は当初、 <code>grid-column-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>column-gap</code> で置き換えられました。しかし、グリッドで <code>grid-column-gap</code> を実装しており <code>column-gap</code> を実装していないブラウザーに対応するため、接頭辞付きのプロパティを使用する必要があるでしょう。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css; no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ column-gap: normal; -/* <length> 値 */ +/* <length> 値 */ column-gap: 3px; column-gap: 2.5em; -/* <percentage> 値 */ +/* <percentage> 値 */ column-gap: 3%; /* グローバル値 */ column-gap: inherit; column-gap: initial; +column-gap: revert; column-gap: unset; -</pre> +``` + +`column-gap` プロパティは以下に挙げた値の一つで指定します。 -<p><code>column-gap</code> プロパティは以下に挙げた値の一つで指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `normal` + - : 列間 (段間) にはブラウザー既定の幅が使われます。段組みレイアウトでは `1em` と指定され、他の種類のレイアウトでは 0 になります。 +- {{CSSxRef("<length>")}} + - : 列間 (段間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。 +- {{CSSxRef("<percentage>")}} + - : 列間 (段間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。 -<dl> - <dt><code>normal</code></dt> - <dd>段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは <code>1em</code> と指定され、他の種類のレイアウトでは 0 になります。</dd> - <dt>{{CSSxRef("<length>")}}</dt> - <dd>段間 (列間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。</dd> - <dt>{{CSSxRef("<percentage>")}}</dt> - <dd>段間 (列間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} -{{CSSSyntax}} +## 関連情報 -<h2 id="Examples" name="Examples">例</h2> +{{csssyntax}} -<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3> +## 例 -<h4 id="HTML">HTML</h4> +<h3 id="Flex_layout">フレックスレイアウト</h3> -<pre class="brush: html notranslate"><div id="flexbox"> - <div></div> - <div></div> - <div></div> -</div> -</pre> +#### HTML + +```html +<div id="flexbox"> + <div></div> + <div></div> + <div></div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight[4] notranslate">#flexbox { +```css +#flexbox { display: flex; height: 100px; column-gap: 20px; } -#flexbox > div { +#flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Flex_layout", "auto", "120px")}}</p> +{{EmbedLiveSample("Flex_layout", "auto", "120px")}} -<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3> +<h3 id="Grid_layout">グリッドレイアウト</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div id="grid"> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h4 id="CSS_2">CSS</h4> - -<div class="hidden"> -<pre class="brush: css notranslate">#grid { - grid-column-gap: 20px; -}</pre> +```html +<div id="grid"> + <div></div> + <div></div> + <div></div> </div> +``` + +#### CSS -<pre class="brush: css; highlight[6] notranslate">#grid { +```css +#grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); @@ -120,88 +117,51 @@ column-gap: unset; column-gap: 20px; } -#grid > div { +#grid > div { border: 1px solid green; background-color: lime; } -</pre> +``` -<h4 id="Result_2" name="Result_2">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Grid_layout", "auto", "120px")}}</p> +{{EmbedLiveSample("Grid_layout", "auto", "120px")}} -<h3 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h3> +<h3 id="Multi-column_layout">段組みレイアウト</h3> -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="content-box"> +```html +<p class="content-box"> This is some multi-column text with a 40px column gap created with the CSS `column-gap` property. Don't you think that's fun and exciting? I sure do! -</p> -</pre> +</p> +``` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush:css notranslate">.content-box { +```css +.content-box { column-count: 3; column-gap: 40px; } -</pre> - -<h4 id="Result_3" name="Result_3">結果</h4> - -<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</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", "#column-row-gap", "column-gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>グリッド及びフレックスボックスに適用</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>グリッドレイアウトにどう適用されるかを指定</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}</td> - <td>{{Spec2("CSS3 Multicol")}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +``` -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +#### 結果 -<p>{{Compat("css.properties.column-gap.flex_context")}}</p> +{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.column-gap.grid_context")}}</p> +{{Specifications("css.properties.column-gap.grid_context")}} -<h3 id="Support_in_Multi-column_layout" name="Support_in_Multi-column_layout">段組みレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.column-gap.multicol_context")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}}</li> - <li>グリッドレイアウトのガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li> - <li>段組みレイアウトのガイド: <em><a href="/ja/docs/Web/CSS/CSS_Columns/Styling_Columns">段組みのスタイル付け</a></em></li> -</ul> +- 関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}} +- グリッドレイアウトのガイド: _[グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ +- 段組みレイアウトのガイド: _[段組みのスタイル付け](/ja/docs/Web/CSS/CSS_Columns/Styling_Columns)_ diff --git a/files/ja/web/css/content/index.md b/files/ja/web/css/content/index.md index a3fd67aa1b..a04c2d3880 100644 --- a/files/ja/web/css/content/index.md +++ b/files/ja/web/css/content/index.md @@ -214,7 +214,6 @@ a::before { #### HTML ```html -<ul> <li><a id="moz" href="https://www.mozilla.org/"> Mozilla Home Page</a></li> <li><a id="mdn" href="https://developer.mozilla.org/"> diff --git a/files/ja/web/css/css_box_alignment/align-container-subjects.png b/files/ja/web/css/css_box_alignment/align-container-subjects.png Binary files differnew file mode 100644 index 0000000000..8b4cb125bb --- /dev/null +++ b/files/ja/web/css/css_box_alignment/align-container-subjects.png diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md index 2cb47a5709..4dc5b13a72 100644 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -2,79 +2,71 @@ title: ブロック、絶対配置、表レイアウトのブロック配置 slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables tags: + - ブロック - CSS - - ブロックレイアウト - - ボックス配置 + - ガイド - 絶対配置 + - ボックス配置 - 表 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables --- -<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置仕様書</a>は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページを併せて読んでください。</p> - -<div class="note"> -<p><strong>Note</strong>: At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.</p> -</div> - -<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2> +[ボックス配置仕様書](/ja/docs/Web/CSS/CSS_Box_Alignment)は、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明している、中心となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを併せて読んでください。 -<p>The {{cssxref("justify-content")}} property does not apply to block containers or table cells.</p> +> **Note:** 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。 -<p>The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as <code>space-between</code>, <code>space-around</code> or <code>space-evenly</code> is requested then the fallback alignment will be used, as the content is treated as a single <a href="/ja/docs/Glossary/Alignment_Subject">alignment subject</a>.</p> +## align-content と justify-content -<h2 id="justify-self">justify-self</h2> +{{cssxref("justify-content")}} プロパティは、ブロックコンテナーや表のセルには適用されません。 -<p>The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.</p> +{{cssxref("align-content")}} プロパティは、ブロック軸に適用され、ボックスの内容物をそのコンテナー内で整列させるためのものです。`space-between`、`space-around`、`space-evenly` などの内容物配分方法が要求されている場合は、内容物が 1 つの[配置対象物](/ja/docs/Glossary/Alignment_Subject)として扱われるため、代替配置が使用されます。 -<p>This property does not apply to floated elements or table cells.</p> +## justify-self -<h3 id="Absolutely_positioned_elements" name="Absolutely_positioned_elements">絶対配置要素</h3> +{{cssxref("justify-self")}} プロパティは、インライン軸上で包含ブロックの内部にアイテムを配置するために使用されます。 -<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p> +このプロパティは浮動要素や表のセルには適用されません。 -<h2 id="align-self">align-self</h2> +## align-self -<p>The {{cssxref("align-self")}} property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.</p> +{{cssxref("align-self")}} プロパティは、ブロックレベルボックスには (浮動要素を含め) 適用されません。ブロック軸に複数のアイテムがあるからです。表のセルにも適用されません。 -<h3 id="Absolutely_positioned_elements_2" name="Absolutely_positioned_elements_2">絶対配置要素</h3> +### 絶対配置要素 -<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p> +配置コンテナーは、上、左、下、右のオフセット値を考慮して位置指定されたブロックです。normal キーワードは `stretch` に解決されますが、その位置指定アイテムが置換要素である場合は `start` に解決されます。 -<h2 id="Aligning_in_these_layout_methods_today">Aligning in these layout methods today</h2> +## 現在のレイアウト方法での整列 -<p>As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.</p> +現在、ブラウザーはブロックレイアウトでのボックス配置に対応していないため、整列には既存の配置方法のいずれかを使用するか、コンテナー内の 1 つのアイテムでもフレックスボックスで指定された配置プロパティを使用するためにフレックスアイテムにするかのいずれかを選択できます。 -<p>Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of <code>auto</code> will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:</p> +フレックスボックスが導入される前のブロックの水平方向の整列は、ブロックに auto のマージンを設定する方法が一般的でした。{{cssxref("margin")}} を `auto` に設定すると、その次元で利用可能なすべての空間を吸収するため、左右のマージンを自動に設定すると、ブロックを中央に配置することができます。 -<pre class="brush: css">.container { +```css +.container { width: 20em; margin-left: auto; margin-right: auto; } -</pre> +``` -<p>In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.</p> +表レイアウトでは、{{cssxref("vertical-align")}} プロパティを使用して、セルの内容をそのセル内で配置させることができます。 -<p>For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.</p> +多くの利用場面では、ブロックコンテナーをフレックスアイテムに変えることで、求めていた配置機能が得られます。以下の例では、アイテムが 1 つだけ入っているコンテナーを、配置プロパティを使用できるようにするためにフレックスコンテナーに変えています。 -<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> +{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}} -<h2 id="Reference" name="Reference">リファレンス</h2> +## リファレンス -<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3> +### CSS プロパティ -<ul> - <li>{{cssxref("justify-content")}}</li> - <li>{{cssxref("align-content")}}</li> - <li>{{cssxref("justify-self")}}</li> - <li>{{cssxref("align-self")}}</li> -</ul> +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("justify-self")}} +- {{cssxref("align-self")}} -<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3> +### 用語集の項目 -<ul> - <li><a href="/ja/docs/Glossary/Alignment_Subject">Alignment subject</a></li> - <li><a href="/ja/docs/Glossary/Alignment_Container">Alignment container</a></li> - <li><a href="/ja/docs/Glossary/Fallback_Alignment">Fallback alignment</a></li> -</ul> +- [配置対象物](/ja/docs/Glossary/Alignment_Subject) +- [配置コンテナー](/ja/docs/Glossary/Alignment_Container) +- [代替配置](/ja/docs/Glossary/Fallback_Alignment) -<p>{{CSSRef}}</p> +{{CSSRef}} diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md new file mode 100644 index 0000000000..4bd3cca603 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md @@ -0,0 +1,98 @@ +--- +title: フレックスボックスでのボックス配置 +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +tags: + - CSS + - ガイド + - ボックス配置 + - フレックスボックス +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +{{CSSRef}} + +[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを合わせてお読みください。 + +## 基本的な例 + +この例では、3 つのフレックスアイテムが {{cssxref("justify-content")}} を使用して主軸に、 {{cssxref("align-items")}} を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された `align-items` の値を上書きし、 {{cssxref("align-self")}} で `center` に設定しています。 + +{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}} + +## 軸と flex-direction + +フレックスボックスは文書の書字方向を尊重しますので、英語の場合で {{cssxref("justify-content")}} が `flex-end` に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 {{cssxref("flex-direction")}} が `row` に設定されていた場合、この配置はインライン方向になります。 + +しかし、フレックスボックスでは `flex-direction` を `column` に設定することで、主軸を変更することができます。この場合、 `justify-content` はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差じっくについて次のように考えると最も簡単です。 + +- 主軸 = `flex-direction` で設定された向き = `justify-content` で配置 +- 交差軸 = 主軸と交差 = `align-content`, `align-self`/`align-items` で配置 + +### 主軸の配置 + +- {{cssxref("justify-content")}} + +### 交差軸の配置 + +- {{cssxref("align-self")}} +- {{cssxref("align-items")}} +- {{cssxref("align-content")}} + +### フレックスボックスには justify-self はない + +主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。`justify-content` プロパティは、どのように残りの領域を使用するかを制御します。`justify-content: flex-end` に設定すると、余分な領域はアイテムの前に配置され、`justify-content: space-around` に設定すると、その大きさアイテムの両側に配置される、などです。 + +つまり、常にアイテムのグループ全体が動き回るよう配分されるため、`justify-self` プロパティはフレックスボックスでは意味を持ちません。 + +交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 `align-self` は意味を持ちます。 + +## alignment および auto のマージン + +`justify-self` プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに `auto` を使用することができます。 `auto` に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを `auto` に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。 + +開始点に配置された一連のフレックスアイテムのうち、1 つのアイテムで {{cssxref("margin")}} を `auto` に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、空間に収まるように縮小します。 + +{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}} + +## `gap` プロパティ + +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} + +### アイテム間における固定幅の間隔の作成 + +主軸では、`column-gap` プロパティは兄弟アイテムの間に固定幅の間隔を作成します。 + +交差軸では、`row-gap` プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには `flex-wrap` を `wrap` に設定する必要があります。 + +{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}} + +## リファレンス + +### CSS プロパティ + +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("place-content")}} +- {{cssxref("justify-items")}} +- {{cssxref("align-items")}} +- {{cssxref("place-items")}} +- {{cssxref("align-self")}} +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} + +### 用語集の項目 + +- {{Glossary("Cross axis", "交差軸")}} +- {{Glossary("Main axis", "主軸")}} + +## ガイド + +- [フレックスボックスでの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) + +## 外部リソース + +- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) +- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) +- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png Binary files differnew file mode 100644 index 0000000000..8eb84a0d2b --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md new file mode 100644 index 0000000000..a36b5ea7f3 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md @@ -0,0 +1,100 @@ +--- +title: グリッドレイアウトでのボックス配置 +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +tags: + - CSS + - ガイド + - ボックス配置 + - グリッド +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +--- +{{CSSRef}} + +[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、 [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)においてボックス配置がどのように働くかを探ります。 + +このページの目的は、CSS グリッドレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを合わせてお読みください。 + +## 基本的な例 + +このグリッドレイアウトの例では、固定幅のトラックをインライン (主) 軸にレイアウトした後、グリッドコンテナーに余分な空間があります。この空間を `justify-content` で分配しています。ブロック (交差) 軸では、グリッド領域内のアイテムの配置を `align-items` で制御しています。最初のアイテムは、グループに設定された `align-items` の値を、`align-self` を `center` に設定することでオーバーライドしています。 + +{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}} + +## グリッド軸 + +2 次元のレイアウト手法であるグリッドレイアウトでは、アイテムを配置する軸が常に 2 つあります。これを実現するために、すべてのボックス配置プロパティを利用することができます。 + +インライン軸は、使用されている書字方向において、文中の単語が走る方向に対応する軸です。したがって、英語やアラビア語のような横書きの言語では、インラインの方向は水平方向になります。縦書きの場合は、インライン軸は縦方向になります。 + + + +インライン軸上に配置するには `justify-` で始まるプロパティ、{{cssxref("justify-content")}}、{{cssxref("justify-items")}}、{{cssxref("justify-self")}} を使用します。 + +ブロック軸は、ブロックがページの下に表示される方向にインライン軸と交差しています。例えば、英語の段落は縦に 1 つずつ表示されます。つまり、これがブロック軸です。 + +ブロック軸上でものを揃えるには、`align-` で始まるプロパティ、{{cssxref("align-content")}}、{{cssxref("align-items")}}、{{cssxref("align-self")}} を使用します。 + + + +## 自己配置 + +- {{cssxref("justify-self")}} +- {{cssxref("align-self")}} +- {{cssxref("place-self")}} +- {{cssxref("justify-items")}} +- {{cssxref("align-items")}} +- {{cssxref("place-items")}} + +これらのプロパティは、アイテムが配置されたグリッド領域内に整列させるためのものです。`align-items` および `justify-items` プロパティはグリッドコンテナーに適用され、グループとして `align-self` および `justify-self` プロパティを設定します。つまり、すべてのグリッドアイテムの配置を一度に設定し、異なる配置が必要なアイテムは、個々のグリッドアイテムのルールに `align-self` または `justify-self` プロパティを適用してオーバーライドすることができるのです。 + +`align-self` および `justify-self` の初期値は `stretch` で、アイテムはグリッド領域全体に伸縮します。この規則の例外は、アイテムが固有のアスペクト比を持っている場合、例えば画像などです。この場合、画像が歪まないように、アイテムは両方の次元で `start` に揃えられます。 + +## 内容物の配置 + +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("place-content")}} + +これらのプロパティは、グリッドトラックを分配するための空間が余っている場合に、トラックの位置を調整するためのものです。このシナリオは、定義したトラックの合計がグリッドコンテナーの幅の合計よりも小さい場合に発生します。 + +## gap と古い grid-gap プロパティ + +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} + +グリッド仕様書は、もとは {{cssxref("row-gap", "grid-row-gap")}}、{{cssxref("column-gap", "grid-column-gap")}}、{{cssxref("gap", "grid-gap")}} の各プロパティの定義がありました。これらはボックス配置仕様書に移され、{{cssxref("row-gap")}}、{{cssxref("column-gap")}}、{{cssxref("gap")}} と改名されました。これによって、他のレイアウト方式でもアイテム間の溝に使用することができるようになりました。 + +更新されたプロパティは、まだすべてのブラウザーには実装されていません。したがって、グリッドレイアウトで gap のプロパティを使用する場合は、完全な互換性を確保するために、`grid-row-gap`、`grid-column-gap`、`grid-gap` の各バージョンを使用する必要があります。ベンダー接頭辞と同じように、両方を使用してプロパティを重複利用することもできます。 + +## リファレンス + +### CSS プロパティ + +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("place-content")}} +- {{cssxref("justify-items")}} +- {{cssxref("align-items")}} +- {{cssxref("place-items")}} +- {{cssxref("justify-self")}} +- {{cssxref("align-self")}} +- {{cssxref("place-self")}} +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} + +### 用語集の項目 + +- [交差軸](/ja/docs/Glossary/Cross_Axis) +- [主軸](/ja/docs/Glossary/Main_Axis) + +## ガイド + +- [グリッドレイアウトでの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) + +## 外部リソース + +- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) +- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) +- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png Binary files differnew file mode 100644 index 0000000000..9d377bcc91 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md index 569a5e52af..3e8ee3c802 100644 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md @@ -3,49 +3,39 @@ title: 段組みレイアウトでのボックス配置 slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout tags: - CSS - - CSS ボックス配置 - - CSS 段組みレイアウト + - ガイド + - ボックス配置 - 段組み translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、<a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページと併せて読んでください。</p> +[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、[段組みレイアウト](/ja/docs/Web/CSS/CSS_Columns)のコンテキストにおいてボックス配置がどのように働くかを探ります。このページとしての目的は、段組みレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを合わせてお読みください。 -<p>段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。</p> +段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。 -<div class="note"> -<p><strong>メモ</strong>: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。</p> -</div> +> **Note:** 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。 -<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2> +## align-content と justify-content -<p>{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。</p> +{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。 -<p><code>justify-content</code> に <code>normal</code> または <code>stretch</code> 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。</p> +`justify-content` に `normal` または `stretch` 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。 -<h2 id="column-gap">column-gap</h2> +## column-gap -<p>段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。</p> +段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方式の gap プロパティと統合されました。他のレイアウト方式では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。 -<h2 id="Reference" name="Reference">リファレンス</h2> +## リファレンス -<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3> +### CSS プロパティ -<div class="index"> -<ul> - <li>{{cssxref("justify-content")}}</li> - <li>{{cssxref("align-content")}}</li> - <li>{{cssxref("column-gap")}}</li> -</ul> -</div> +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("column-gap")}} -<h3 id="Glossary_Entries" name="Glossary_Entries">用語集</h3> +### 用語集の項目 -<div class="index"> -<ul> - <li><a href="/ja/docs/Glossary/Alignment_Subject">配置主題</a></li> - <li><a href="/ja/docs/Glossary/Alignment_Container">配置コンテナー</a></li> - <li><a href="/ja/docs/Glossary/Fallback_Alignment">代替配置</a></li> -</ul> -</div> +- [配置対象物](/ja/docs/Glossary/Alignment_Subject) +- [配置コンテナー](/ja/docs/Glossary/Alignment_Container) +- [代替配置](/ja/docs/Glossary/Fallback_Alignment) diff --git a/files/ja/web/css/css_box_alignment/index.md b/files/ja/web/css/css_box_alignment/index.md index a220b68112..830ea9735c 100644 --- a/files/ja/web/css/css_box_alignment/index.md +++ b/files/ja/web/css/css_box_alignment/index.md @@ -4,250 +4,213 @@ slug: Web/CSS/CSS_Box_Alignment tags: - CSS - CSS ボックス配置 - - alignment - - box alignment - グリッドレイアウト + - ガイド + - 配置 + - ボックス配置 - フレックスボックス - - 段組みレイアウト + - 段組み translation_of: Web/CSS/CSS_Box_Alignment --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary"><ruby>CSS ボックス配置<rp> (</rp><rt>CSS Box Alignment</rt><rp>) </rp></ruby>モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。</p> +CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。 -<div class="note"> -<p><strong>メモ</strong>: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。</p> -</div> +> **Note:** ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。 -<h2 id="古い配置方法">古い配置方法</h2> +## 古い配置方法 -<p>CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置は<a href="https://www.w3.org/TR/css-inline-3/">インラインレイアウト</a>および <a href="https://www.w3.org/TR/css-text-3/">CSS テキスト</a>モジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。</p> +CSS は伝統的に、配置機能がとても制約されていました。{{cssxref("text-align")}} を使用してテキストの配置を指定したり、{{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、{{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置は[インラインレイアウト](https://www.w3.org/TR/css-inline-3/)および [CSS テキスト](https://www.w3.org/TR/css-text-3/)モジュールによってカバーされるようになり、ボックス配置の初期に、完全な水平方向と垂直方向の配置の機能を持ちました。 -<p>先に<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。</p> +先に[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)を学んでいるのであれば、これらのプロパティはフレックスボックスの仕様の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル 1 に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。 -<h2 id="Basic_examples" name="Basic_examples">基本的な例</h2> +## 基本的な例 -<p>次の例は、ボックス配置のプロパティの一部が<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>と<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>にどのように適用されるかを示しています。</p> +次の例は、ボックス配置のプロパティの一部が[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)と[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)にどのように適用されるかを示しています。 -<h3 id="CSS_grid_layout_alignment_example" name="CSS_grid_layout_alignment_example">CSS グリッドレイアウトの配置の例</h3> +## CSS グリッドレイアウトの配置の例 -<p>グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を <code>center</code> に設定して、グループに設定された <code>align-items</code> 値を上書きしています。</p> +グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナー内に余分な空間が残っています。この空間は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を `center` に設定して、グループに設定された `align-items` 値を上書きしています。 -<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 700)}} -<h3 id="Flexbox_Alignment_Example" name="Flexbox_Alignment_Example">フレックスボックスの配置の例</h3> +### フレックスボックスの配置の例 -<p>この例では、3 つのフレックスアイテムが <code>justify-content</code> を使用して主軸上に配置され、 <code>align-items</code> を使用して交差軸上に配置されています。 最初のアイテムは<code>align-self</code> を <code>center</code> に設定して、グループに設定された <code>align-items</code> を上書きしています。</p> +この例では、3 つのフレックスアイテムが `justify-content` を使用して主軸上に配置され、 `align-items` を使用して交差軸上に配置されています。 最初のアイテムはグループに設定された `align-items` を、 `align-self` を `center` に設定することで上書きしています。 -<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 700)}} -<h2 id="Key_concepts_and_terminology" name="Key_concepts_and_terminology">主要概念と用語</h2> +## 主要概念と用語 -<p>この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。</p> +この仕様書では、個別のレイアウト方式の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方式に共通する、いくつかの重要な概念もあります。 -<h3 id="Relationship_to_writing_modes" name="Relationship_to_writing_modes">書字方向との関連</h3> +## 書字方向との関連 -<p>配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。</p> +配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の方向の先頭や末尾によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。 -<h3 id="Two_dimensions_of_alignment" name="Two_dimensions_of_alignment">二次元の配置</h3> +### 二次元の配置 -<p>ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。</p> +ボックス配置プロパティを使用すると、コンテンツは 2 本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの 1 本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。 -<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p> + -<p>インライン軸上でアイテムを整列するときは、 <code>justify-</code> で始まるプロパティを使用します。</p> +インライン軸上でアイテムを整列するときは、 `justify-` で始まるプロパティを使用します。 -<ul> - <li>{{cssxref("justify-items")}}</li> - <li>{{cssxref("justify-self")}}</li> - <li>{{cssxref("justify-content")}}</li> -</ul> +- {{cssxref("justify-items")}} +- {{cssxref("justify-self")}} +- {{cssxref("justify-content")}} -<p>ブロック軸上でアイテムを整列するときは、 <code>align-</code> で始まるプロパティを使用します。</p> +ブロック軸上でアイテムを整列するときは、 `align-` で始まるプロパティを使用します。 -<ul> - <li>{{cssxref("align-items")}}</li> - <li>{{cssxref("align-self")}}</li> - <li>{{cssxref("align-content")}}</li> -</ul> +- {{cssxref("align-items")}} +- {{cssxref("align-self")}} +- {{cssxref("align-content")}} -<p>フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が <code>row</code> に設定されている場合に上記のものが当てはまります。フレックスボックスが <code>column</code> に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 <code>justify-</code> プロパティは常に主軸上で、 <code>align-</code> プロパティは交差軸上で配置するために使用されます。</p> +フレックスボックスはさらに複雑であり、上記のことが言えるのは {{cssxref("flex-direction")}} が `row` に設定されている場合です。フレックスボックスが `column` に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。`justify-` プロパティは常に主軸上で、`align-` プロパティは交差軸上で配置するために使用されます。 -<h3 id="The_alignment_subject" name="The_alignment_subject">配置対象物</h3> +### 配置対象物 -<p><ruby><strong>配置対象物</strong><rp> (</rp><rt>alignment subject</rt><rp>) </rp></ruby>とは、配置が行われるもののことです。 <code>justify-self</code> または <code>align-self</code> の場合、あるいは <code>justify-items</code> または <code>align-items</code> によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 <code>justify-content</code> および <code>align-content</code> プロパティはレイアウト方法ごとに異なります。</p> +**配置対象物** (alignment subject) とは、配置が行われるもののことです。`justify-self` または `align-self` の場合、あるいは `justify-items` または `align-items` によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。`justify-content` および `align-content` プロパティはレイアウト方式ごとに異なります。 -<h3 id="The_alignment_container" name="The_alignment_container">配置コンテナー</h3> +### 配置コンテナー -<p><ruby><strong>配置コンテナー</strong><rp> (</rp><rt>alignment container</rt><rp>) </rp></ruby>は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。</p> +**配置コンテナー** (alignment container) は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を包含するブロックになります。配置コンテナーには 1 つまたは多数の配置対象物を含めることができます。 -<p>下の画像は、内側に2つの整列対象がある配置コンテナーの例です。</p> +下の画像は、内側に 2 つの配置対象物がある配置コンテナーの例です。 -<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> + -<h3 id="Fallback_alignment" name="Fallback_alignment">代替配置</h3> +### 代替配置 -<p>実現できない配置を設定した場合、<strong>代替配置</strong>が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。</p> +実現できない配置を設定した場合、**代替配置**が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方式ごとに個別に定義されており、それぞれのページで詳しく説明されています。 -<h2 id="Types_of_alignment" name="Types_of_alignment">配置の種類</h2> +## 配置の種類 -<p>この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。</p> +この仕様書が詳述している配置には、3 つの異なる種類があります。これらはキーワード値を使用します。 -<ul> - <li><ruby><strong>位置指定配置</strong><rp> (</rp><rt>Positional alignment</rt><rp>)</rp></ruby>: 配置対象物の位置を、配置コンテナーからの相対で指定します。</li> - <li><ruby><strong>ベースライン配置</strong><rp> (</rp><rt>Baseline alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。</li> - <li><ruby><strong>分配配置</strong><rp> (</rp><rt>Distributed alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置対象物間の空白の分配で配置を定義します。</li> -</ul> +- **位置指定配置** (Positional alignment): 配置対象物の位置を、配置コンテナーからの相対で指定します。 +- **ベースライン配置** (Baseline alignment): これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。 +- **分配配置** (Distributed alignment): これらのキーワードは、配置対象物間の空間の分配で配置を定義します。 -<h3 id="Positional_alignment_keyword_values" name="Positional_alignment_keyword_values">位置指定配置のキーワード値</h3> +### 位置指定配置のキーワード値 -<p>以下の値は位置指定配置のために定義されており、 <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p> +以下の値は位置指定配置のために定義されており、`justify-content` および `align-content` による内容の配置、そして `justify-self` および `align-self` による自己配置の値として使用することができます。 -<ul> - <li><code>center</code></li> - <li><code>start</code></li> - <li><code>end</code></li> - <li><code>self-start</code></li> - <li><code>self-end</code></li> - <li><code>flex-start</code> フレックスボックスのみ</li> - <li><code>flex-end</code> フレックスボックスのみ</li> - <li><code>left</code></li> - <li><code>right</code></li> -</ul> +- `center` +- `start` +- `end` +- `self-start` +- `self-end` +- `flex-start` フレックスボックスのみ +- `flex-end` フレックスボックスのみ +- `left` +- `right` -<p>画面の物理的な属性に関連する <code>left</code> と <code>right</code> の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。</p> +画面の物理的な属性に関連する `left` と `right` の物理値を除いて、他のすべての値は論理値であり、内容物の書字方向に関連します。 -<p>たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて <code>justify-content</code> に <code>start</code> を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ <code>start</code> の値は、アラビア語の文がページの右側から始まるので、右に移動します。</p> +たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて `justify-content` に `start` を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ `start` の値は、アラビア語の文がページの右側から始まるので、右に移動します。 -<p>どちらの例も <code>justify-content: start</code> ですが、開始位置は書字方向によって異なります。</p> +どちらの例も `justify-content: start` ですが、開始位置は書字方向によって異なります。 -<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p> + -<h3 id="Baseline_alignment" name="Baseline_alignment">ベースライン配置</h3> +### ベースライン配置 -<p>ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p> +ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは `justify-content` および `align-content` による内容の配置、そして `justify-self` および `align-self` による自己配置の値として使用することができます。 -<ul> - <li><code>baseline</code></li> - <li><code>first baseline</code></li> - <li><code>last baseline</code></li> -</ul> +- `baseline` +- `first baseline` +- `last baseline` -<p><code>justify-content</code> または <code>align-content</code> のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。</p> +`justify-content` または `align-content` のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方式で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。 -<p>ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は <code>justify-self</code> または <code>align-self</code> を使用する場合、あるいは <code>justify-items</code> または <code>align-items</code> を使用してこれらの値をグループとして設定する場合に行われます。</p> +ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は `justify-self` または `align-self` を使用する場合、あるいは `justify-items` または `align-items` を使用してこれらの値をグループとして設定する場合に行われます。 -<h3 id="Distributed_alignment" name="Distributed_alignment">分配配置</h3> +### 分配配置 -<p><strong>分配配置キーワード</strong> は <code>align-content</code> および <code>justify-content</code> で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。</p> +**分配配置キーワード** は `align-content` および `justify-content` で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。 -<ul> - <li><code>stretch</code></li> - <li><code>space-between</code></li> - <li><code>space-around</code></li> - <li><code>space-evenly</code></li> -</ul> +- `stretch` +- `space-between` +- `space-around` +- `space-evenly` -<p>たとえばフレックスレイアウトでは、初期値の場合アイテムを <code>flex-start</code> で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 <code>flex-direction</code> が <code>row</code> のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。</p> +たとえばフレックスレイアウトでは、初期値の場合アイテムを `flex-start` で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 `flex-direction` が `row` のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。 -<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p> + -<p>フレックスコンテナーに <code>justify-content: space-between</code> を設定すると、余白はアイテム間に分配されます。</p> +フレックスコンテナーに `justify-content: space-between` を設定すると、余白はアイテム間に分配されます。 -<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p> + -<p>これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。</p> +これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。 -<h2 id="Overflow_alignment" name="Overflow_alignment">配置があふれた場合</h2> +## 配置があふれた場合 -<p><code>safe</code> および <code>unsafe</code> キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 <code>safe</code> キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 <code>start</code> で配置します。</p> +`safe` および `unsafe` キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 `safe` キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 `start` で配置します。 -<p><code>unsafe</code> を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。</p> +`unsafe` を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。 -<h2 id="Gaps_between_boxes" name="Gaps_between_boxes">ボックス間のギャップ</h2> +## ボックス間のギャップ -<p>ボックス配置仕様書には、 <code>gap</code>, <code>row-gap</code>, <code>column-gap</code> も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。</p> +ボックス配置仕様書には、 `gap`, `row-gap`, `column-gap` も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方式で、行または列内のアイテム間で一貫したギャップを設定します。 -<p><code>gap</code> プロパティは <code>row-gap</code> と <code>column-gap</code> の一括指定で、両プロパティを一度に設定することができます。</p> +`gap` プロパティは `row-gap` と `column-gap` の一括指定で、以下のプロパティを一度に設定することができます。 -<ul> - <li>{{cssxref("row-gap")}}</li> - <li>{{cssxref("column-gap")}}</li> - <li>{{cssxref("gap")}}</li> -</ul> +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} -<p>以下の例では、グリッドレイアウトで <code>gap</code> の一括指定を使用して、行トラック間に <code>10px</code> のギャップと列トラック間に <code>2em</code> のギャップを設定します。</p> +以下の例では、グリッドレイアウトで `gap` の一括指定を使用して、行トラック間に `10px` のギャップと列トラック間に `2em` のギャップを設定します。 -<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p> +{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 700)}} -<p>この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 <code>gap</code> プロパティはもともとグリッドレイアウト仕様書の中で <code>grid-</code> という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。</p> +> **Note:** 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, {{cssxref("gap", "grid-gap")}} を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。 -<ul> - <li>{{cssxref("grid-row-gap")}}</li> - <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> -</ul> +また、スペース配分キーワードを使用したり、アイテムに余白を設けたりすると、表示される視覚的な溝が大きくなる場合がありますので注意してください。 -<p>接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 <code>grid-gap</code> プロパティの次に <code>gap</code> を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。</p> +## レイアウト別の配置詳細ページ -<p>また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。</p> +CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。 -<h2 id="Pages_detailing_individual_alignment_properties" name="Pages_detailing_individual_alignment_properties">レイアウト別の配置詳細ページ</h2> +- [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [CSS グリッドレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) +- [段組みレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout) +- [ブロック、絶対配置、表レイアウトのブロック配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables) -<p>CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。</p> +## リファレンス -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">CSS グリッドレイアウトでのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">段組みレイアウトでのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">ブロック、絶対配置、表レイアウトのブロック配置</a></li> -</ul> +## CSS プロパティ -<h2 id="Reference" name="Reference">リファレンス</h2> +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("place-content")}} +- {{cssxref("justify-items")}} +- {{cssxref("align-items")}} +- {{cssxref("place-items")}} +- {{cssxref("justify-self")}} +- {{cssxref("align-self")}} +- {{cssxref("place-self")}} +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} -<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3> +### 用語集の項目 -<div class="index"> -<ul> - <li>{{cssxref("justify-content")}}</li> - <li>{{cssxref("align-content")}}</li> - <li>{{cssxref("place-content")}}</li> - <li>{{cssxref("justify-items")}}</li> - <li>{{cssxref("align-items")}}</li> - <li>{{cssxref("place-items")}}</li> - <li>{{cssxref("justify-self")}}</li> - <li>{{cssxref("align-self")}}</li> - <li>{{cssxref("place-self")}}</li> - <li>{{cssxref("row-gap")}}</li> - <li>{{cssxref("column-gap")}}</li> - <li>{{cssxref("gap")}}</li> -</ul> -</div> +- {{Glossary("Cross axis", "交差軸")}} +- {{Glossary("Main axis", "主軸")}} +- {{Glossary("Alignment container", "配置コンテナー")}} +- {{Glossary("Alignment subject", "配置対象物")}} +- {{Glossary("Fallback alignment", "代替配置")}} -<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3> +## ガイド -<div class="index"> -<ul> - <li>{{Glossary("Cross axis", "交差軸")}}</li> - <li>{{Glossary("Main axis", "主軸")}}</li> - <li>{{Glossary("Alignment container", "配置コンテナー")}}</li> - <li>{{Glossary("Alignment subject", "配置対象物")}}</li> - <li>{{Glossary("Fallback alignment", "代替配置")}}</li> -</ul> -</div> +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS Flexbox guide: _[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ +- CSS グリッド guide: _[CSS グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ -<h2 id="Guides" name="Guides">ガイド</h2> +## 外部リソース -<ul> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li> - <li>CSS Flexbox guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></em></li> - <li>CSS Grid guide: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></em></li> -</ul> - -<h2 id="External_Resources" name="External_Resources">外部リソース</h2> - -<ul> - <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li> - <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li> - <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li> -</ul> +- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) +- [CSS Grid, Flexbox and Box alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) +- [Thoughts on partial implementations of Box alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/ja/web/css/css_box_alignment/justify-content-space-between.png b/files/ja/web/css/css_box_alignment/justify-content-space-between.png Binary files differnew file mode 100644 index 0000000000..d8e0f042ad --- /dev/null +++ b/files/ja/web/css/css_box_alignment/justify-content-space-between.png diff --git a/files/ja/web/css/css_box_alignment/justify-content-start.png b/files/ja/web/css/css_box_alignment/justify-content-start.png Binary files differnew file mode 100644 index 0000000000..e034f6d83d --- /dev/null +++ b/files/ja/web/css/css_box_alignment/justify-content-start.png diff --git a/files/ja/web/css/css_box_alignment/two-axes.png b/files/ja/web/css/css_box_alignment/two-axes.png Binary files differnew file mode 100644 index 0000000000..dcc1036bf2 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/two-axes.png diff --git a/files/ja/web/css/css_box_alignment/writing-mode-start.png b/files/ja/web/css/css_box_alignment/writing-mode-start.png Binary files differnew file mode 100644 index 0000000000..0ecb5ca119 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/writing-mode-start.png diff --git a/files/ja/web/css/gap/index.md b/files/ja/web/css/gap/index.md index edc971b860..8d9de3c7ef 100644 --- a/files/ja/web/css/gap/index.md +++ b/files/ja/web/css/gap/index.md @@ -3,47 +3,42 @@ title: gap (grid-gap) slug: Web/CSS/gap tags: - CSS - - CSS グリッドレイアウト - - CSS フレックスボックスレイアウト - - CSS プロパティ - - CSS ボックス配置 + - CSS フレックスボックス + - CSS グリッド - CSS 段組みレイアウト - - Reference - - gap + - CSS プロパティ - リファレンス + - gap + - recipe:css-property +browser-compat: css.properties.gap translation_of: Web/CSS/gap --- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</span></p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div> +**`gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)です。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/gap.html")}} -<div class="note"> -<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>では、当初は <code>grid-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>gap</code> に置き換えられました。しかし、グリッドで <code>grid-gap</code> を実装していて <code>gap</code> を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css; no-line-numbers notranslate">/* 単一の <length> 値 */ +```css +/* 単一の <length> 値 */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; -/* 単一の <percentage> 値 */ +/* 単一の <percentage> 値 */ gap: 16%; gap: 100%; -/* 二つの <length> 値 */ +/* 2 つの <length> 値 */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; -/* 一つ又は二つの <percentage> 値 */ +/* 1 つまたは 2 つの <percentage> 値 */ gap: 16% 100%; gap: 21px 82%; @@ -54,52 +49,57 @@ gap: calc(20px + 10%) calc(10% - 5px); /* グローバル値 */ gap: inherit; gap: initial; +gap: revert; gap: unset; -</pre> +``` + +このプロパティは `<'row-gap'>` の値と、任意で `<'column-gap'>` の値を続けて指定します。 `<'column-gap'>` が省略された場合、 `<'row-gap'>` と同じ値が設定されます。 -<p>このプロパティは <code><'row-gap'></code> の値と、任意で <code><'column-gap'></code> の値を続けて指定します。 <code><'column-gap'></code> が省略された場合、 <code><'row-gap'></code> と同じ値が設定されます。</p> +`<'row-gap'>` および `<'column-gap'>` はそれぞれ、 `<length>` または `<percentage>` で指定します。 -<p><code><'row-gap'></code> 及び <code><'column-gap'></code> はそれぞれ、 <code><length></code> 又は <code><percentage></code> で指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- {{CSSxRef("<length>")}} + - : グリッド線を隔てる溝の幅です。 +- {{CSSxRef("<percentage>")}} + - : 要素の寸法に対する、グリッド線を隔てる溝の幅です。 -<dl> - <dt>{{CSSxRef("<length>")}}</dt> - <dd>グリッド線を隔てる溝の幅です。</dd> - <dt>{{CSSxRef("<percentage>")}}</dt> - <dd>要素の寸法に対する、グリッド線を隔てる溝の幅です。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} -{{CSSSyntax}} +## 関連情報 -<h2 id="Examples" name="Examples">例</h2> +{{csssyntax}} -<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3> +## 例 -<h4 id="HTML">HTML</h4> +<h3 id="Flex_layout">フレックスレイアウト</h3> -<pre class="brush: html; notranslate"><div id="flexbox"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div> -</pre> +#### HTML + +```html +<div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight[5] notranslate">#flexbox { +```css +#flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } -#flexbox > div { +#flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; @@ -107,115 +107,84 @@ gap: unset; height: 50px; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Flex_layout", "auto", "120px")}}</p> +{{EmbedLiveSample("Flex_layout", "auto", "120px")}} -<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3> +<h3 id="Grid_layout">グリッドレイアウト</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html; notranslate"><div id="grid"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h4 id="CSS_2">CSS</h4> - -<div class="hidden"> -<pre class="brush: css notranslate">#grid { - grid-gap: 20px 5px; -} -</pre> +```html +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> </div> +``` -<pre class="brush: css; highlight[5] notranslate">#grid { +#### CSS + +```css +#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } -#grid > div { +#grid > div { border: 1px solid green; background-color: lime; } -</pre> +``` -<h4 id="Result_2" name="Result_2">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Grid_layout", "auto", "120px")}}</p> +{{EmbedLiveSample("Grid_layout", "auto", "120px")}} -<h3 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h3> +<h3 id="Multi-column_layout">段組みレイアウト</h3> -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush: html; notranslate"><p class="content-box"> +```html +<p class="content-box"> This is some multi-column text with a 40px column - gap created with the CSS <code>gap</code> property. + gap created with the CSS <code>gap</code> property. Don't you think that's fun and exciting? I sure do! -</p> -</pre> +</p> +``` -<h4 id="CSS_3">CSS</h4> +#### CSS -<pre class="brush: css; highlight[3] notranslate">.content-box { +```css +.content-box { column-count: 3; gap: 40px; } -</pre> - -<h4 id="Result_3" name="Result_3">結果</h4> - -<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</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-gap", "gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +``` -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +#### 結果 -<p>{{Compat("css.properties.gap.flex_context")}}</p> +{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.gap.grid_context")}}</p> +{{Specifications("css.properties.gap.grid_context")}} -<h3 id="Support_in_Multi-column_layout" name="Support_in_Multi-column_layout">段組みレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.gap.multicol_context")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}</li> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li> -</ul> +- 関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} +- グリッドレイアウトガイド: _[グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md index 0463f6e6c1..e34c87244d 100644 --- a/files/ja/web/css/image/image()/index.md +++ b/files/ja/web/css/image/image()/index.md @@ -79,7 +79,6 @@ xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ <h3 id="Directionally-sensitive_images">書字方向を意識した画像</h3> ```html -<ul> <li dir="ltr">行頭記号が左側で右向きの矢印になります。</li> <li dir="rtl">行頭記号は同じ矢印で、左を指します。</li> </ul> diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md index 78368413bd..962839f13d 100644 --- a/files/ja/web/css/image/paint()/index.md +++ b/files/ja/web/css/image/paint()/index.md @@ -37,7 +37,6 @@ paint(workletName, parameters) CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 ```html hidden -<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> diff --git a/files/ja/web/css/justify-content/index.md b/files/ja/web/css/justify-content/index.md index 7ec2d466e2..41ce5d6bad 100644 --- a/files/ja/web/css/justify-content/index.md +++ b/files/ja/web/css/justify-content/index.md @@ -5,26 +5,25 @@ tags: - CSS - CSS プロパティ - CSS ボックス配置 - - Reference - - justify-content - - place-content + - リファレンス + - recipe:css-property +browser-compat: css.properties.justify-content translation_of: Web/CSS/justify-content --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-content</code></strong> プロパティは、フレックスコンテナーの{{Glossary("Main Axis", "主軸")}}およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。</p> +[CSS](/ja/docs/Web/CSS) の **`justify-content`** プロパティは、フレックスコンテナーの{{Glossary("Main Axis", "主軸")}}およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。 -<p>このデモはグリッドレイアウトを用いていくつかの値を紹介します。</p> +このデモはグリッドレイアウトを用いていくつかの値を紹介します。 -<div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div> +{{EmbedInteractiveExample("pages/css/justify-content.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +長さや自動マージンが適用された後に配置が行われることから、[フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)で {{cssxref("flex-grow")}} が `0` ではないフレックス要素が少なくとも 1 つある場合は利用可能な空間がなくなりますので、このプロパティの効果はないでしょう。 -<p>長さや自動マージンが適用された後に配置が行われることから、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックスレイアウト</a>で {{cssxref("flex-grow")}} が <code>0</code> ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 位置による配置 */ +```css +/* 位置による配置 */ justify-content: center; /* アイテムを中央に寄せる */ justify-content: start; /* アイテムを先頭に寄せる */ justify-content: end; /* アイテムを末尾に寄せる */ @@ -59,155 +58,125 @@ justify-content: unsafe center; /* グローバル値 */ justify-content: inherit; justify-content: initial; +justify-content: revert; justify-content: unset; -</pre> - -<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>normal</code></dt> - <dd>各アイテムは <code>justify-content</code> の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの <code>stretch</code> として動作します。</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-between</code></dt> - <dd>各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。</dd> - <dt><code>space-around</code></dt> - <dd>各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。</dd> - <dt><code>space-evenly</code></dt> - <dd>各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。</dd> - <dt><code>stretch</code></dt> - <dd> - <p>各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が <code>auto</code> のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。</p> - - <div class="blockIndicator note"> - <p><strong>メモ:</strong> <code>stretch</code> はフレキシブルボックス (フレックスボックス) は対応していません。</p> - </div> - </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> +``` + +### 値 + + +- `start` + - : 各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。 +- `end` + - : 各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。 +- `flex-start` + - : 各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。 +- `flex-end` + - : 各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。 +- `center` + - : 各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。 +- `left` + - : 各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。 +- `right` + - : 各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。 +- `normal` + - : 各アイテムは `justify-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの `stretch` として動作します。 +- `baseline`, `first baseline`, `last baseline` + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `space-between` + - : 各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。 +- `space-around` + - : 各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。 +- `space-evenly` + - : 各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。 +- `stretch` + + - : 各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。 + + > **Note:** `stretch` はフレキシブルボックス (フレックスボックス) は対応していません。 + +- `safe` + - : 配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。 +- `unsafe` + - : 配置キーワードと共に使用します。アイテムと配置コンテナーの相対的な寸法にかかわらず、またあふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Setting_flex_item_distribution">フレックスアイテムの配分の設定</h3> -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">#container { +```css +#container { display: flex; justify-content: space-between; /* live sample で変更可能 */ } -#container > div { +#container > div { width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); } -</pre> - -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div></div> - <div></div> - <div></div> -</div> -<select id="justifyContent"> - <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="center">center</option> - <option value="left">left</option> - <option value="right">right</option> - <option value="baseline">baseline</option> - <option value="first baseline">first baseline</option> - <option value="last baseline">last baseline</option> - <option value="space-between" selected>space-between</option> - <option value="space-around">space-around</option> - <option value="space-evenly">space-evenly</option> - <option value="stretch">stretch</option> -</select></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var justifyContent = document.getElementById("justifyContent"); +``` + +```html hidden +<div id="container"> + <div></div> + <div></div> + <div></div> +</div> +<select id="justifyContent"> + <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="center">center</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="baseline">baseline</option> + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + <option value="space-between" selected>space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + <option value="stretch">stretch</option> +</select> +``` + +```js hidden +var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; }); -</pre> -</div> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", "100%", 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状態</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td> - <td>{{Spec2('CSS3 Box Alignment')}}</td> - <td>[ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +``` -<div>{{cssinfo}}</div> +#### 結果 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{EmbedLiveSample("Setting_flex_item_distribution", "100%", 180)}} -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.justify-content.flex_context")}}</p> +{{Specifications("css.properties.justify-content.grid_context")}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.justify-content.grid_context")}}</p> +{{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> -</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) diff --git a/files/ja/web/css/justify-items/index.md b/files/ja/web/css/justify-items/index.md index b442c7889d..362d25c405 100644 --- a/files/ja/web/css/justify-items/index.md +++ b/files/ja/web/css/justify-items/index.md @@ -3,35 +3,31 @@ title: justify-items slug: Web/CSS/justify-items tags: - CSS - - CSS Box Alignment - - CSS Property - - CSS プロパティ - CSS ボックス配置 - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.justify-items translation_of: Web/CSS/justify-items --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-items</code></strong> プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。</p> +[CSS](/ja/docs/Web/CSS) の **`justify-items`** プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。 -<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div> +{{EmbedInteractiveExample("pages/css/justify-items.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +このプロパティの効果は、現在のレイアウトモードに依存します。 -<p>このプロパティの効果は、現在のレイアウトモードに依存します。</p> +- ブロックレベルレイアウトでは、包含ブロック内のアイテムをインライン軸で配置します。 +- 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、包含ブロック内のアイテムをインライン軸で配置します。 +- 表のセルレイアウトでは、このプロパティは*無視されます* (絶対配置及び表レイアウトのブロック内の配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables)) +- フレックスボックスレイアウトでは、このプロパティは*無視されます* (フレックスボックス内での配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)) +- グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout)) -<ul> - <li>ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。</li> - <li>絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。</li> - <li>表のセルレイアウトでは、このプロパティは<em>無視されます</em> (絶対配置及び表レイアウトのブロック内の配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">こちら</a>)</li> - <li>フレックスボックスレイアウトでは、このプロパティは<em>無視されます</em> (フレックスボックス内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">こちら</a>)</li> - <li>グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">こちら</a>)</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 基本キーワード */ +```css +/* 基本キーワード */ justify-items: auto; justify-items: normal; justify-items: stretch; @@ -64,94 +60,92 @@ justify-items: legacy center; /* グローバル値 */ justify-items: inherit; justify-items: initial; +justify-items: revert; justify-items: unset; -</pre> - -<p>このプロパティは４つの異なる形式のうち１つを取ることができます。</p> - -<ul> - <li>基本キーワード: キーワード値 <code>normal</code>, <code>auto</code>, <code>stretch</code> のうちの一つ。</li> - <li>ベースラインによる配置: <code>baseline</code> キーワードに加えて、任意で <code>first</code> または <code>last</code> のどちらか。</li> - <li>位置による配置: <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, <code>right</code> のうちの一つ。加えて任意で <code>safe</code> または <code>unsafe</code>。</li> - <li>歴史的な配置: <code>legacy</code> キーワードに続いて、 <code>left</code> または <code>right</code> のどちらかの値。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用される値は、ボックスに親があれば、親ボックスの <code>justify-items</code> プロパティ、そうでなければ絶対位置であり、このような場合、 <code>auto</code> は <code>normal</code> を表します。</dd> - <dt><code>normal</code></dt> - <dd>このキーワードの効果は、現在のレイアウトモードに依存します。 - <ul> - <li>ブロックレベルレイアウトでは、このキーワードは <code>start</code> の別名です。</li> - <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように動作し、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように動作します。</li> - <li>表のセルレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li> - <li>フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li> - <li>グリッドレイアウトでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように振舞います。</li> - </ul> - </dd> - <dt><code>start</code></dt> - <dd>アイテムは適切な軸で配置コンテナーの先頭側に向かって、互いに接するように詰められます。</dd> - <dt><code>end</code></dt> - <dd>アイテムは適切な軸で配置コンテナーの末尾側に向かって、互いに接するように詰められます。</dd> - <dt><code>flex-start</code></dt> - <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>start</code> のように扱われます。</dd> - <dt><code>flex-end</code></dt> - <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>end</code> のように扱われます。</dd> - <dt><code>self-start</code></dt> - <dd>アイテムは適切な軸で、アイテムの先頭側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd> - <dt><code>self-end</code></dt> - <dd>アイテムは適切な軸で、アイテムの末尾側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</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>baseline<br> - first baseline</code><br> - <code>last baseline</code></dt> - <dd>first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br> - <code>first baseline</code> の代替配置は <code>start</code>、 <code>last baseline</code> の代替配置は <code>end</code> です。</dd> - <dt><code>stretch</code></dt> - <dd>アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が <code>auto</code> であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。</dd> - <dt><code>safe</code></dt> - <dd>アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが <code>start</code> であったかのように配置されます。</dd> - <dt><code>unsafe</code></dt> - <dd>アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。</dd> - <dt><code>legacy</code></dt> - <dd>値がボックスの子孫に継承されるようにします。なお、子孫が <code>justify-self: auto</code> の値を持っている場合、 <code>legacy</code> キーワードは子孫からは考慮されず、関連付けられた <code>left</code>, <code>right</code>, <code>center</code> の値のみが継承されます。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +このプロパティは 4 つの異なる形式のうち 1 つを取ることができます。 + +- 基本キーワード: キーワード値 `normal`, `auto`, `stretch` のうちの一つ。 +- ベースラインによる配置: `baseline` キーワードに加えて、任意で `first` または `last` のどちらか。 +- 位置による配置: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, `right` のうちの一つ。加えて任意で `safe` または `unsafe`。 +- 歴史的な配置: `legacy` キーワードに続いて、 `left` または `right` のどちらかの値。 + +### 値 + +- `auto` + - : 使用される値は、ボックスに親があれば、親ボックスの `justify-items` プロパティ、そうでなければ絶対位置であり、このような場合、 `auto` は `normal` を表します。 +- `normal` + + - : このキーワードの効果は、現在のレイアウトモードに依存します。 + + - ブロックレベルレイアウトでは、このキーワードは `start` の別名です。 + - 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように動作し、*その他*の絶対位置ボックスには `stretch` のように動作します。 + - 表のセルレイアウトでは、このキーワードは意味を持たず、*無視*されます。 + - フレックスボックスレイアウトでは、このキーワードは意味を持たず、*無視*されます。 + - グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います。 + +- `start` + - : アイテムは適切な軸で配置コンテナーの先頭側に向かって、互いに接するように詰められます。 +- `end` + - : アイテムは適切な軸で配置コンテナーの末尾側に向かって、互いに接するように詰められます。 +- `flex-start` + - : フレックスコンテナーの子ではないアイテムにおいては、この値は `start` のように扱われます。 +- `flex-end` + - : フレックスコンテナーの子ではないアイテムにおいては、この値は `end` のように扱われます。 +- `self-start` + - : アイテムは適切な軸で、アイテムの先頭側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。 +- `self-end` + - : アイテムは適切な軸で、アイテムの末尾側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。 +- `center` + - : アイテムは配置コンテナーの中央で、互いに接するように詰められます。 +- `left` + - : アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は `start` のように動作します。 +- `right` + - : アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は `start` のように動作します。 +- `baseline`, `first baseline`, `last baseline` + - : first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `stretch` + - : アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が `auto` であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。 +- `safe` + - : アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが `start` であったかのように配置されます。 +- `unsafe` + - : アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。 +- `legacy` + - : 値がボックスの子孫に継承されるようにします。なお、子孫が `justify-self: auto` の値を持っている場合、 `legacy` キーワードは子孫からは考慮されず、関連付けられた `left`, `right`, `center` の値のみが継承されます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Simple_demonstration" name="Simple_demonstration">単純なデモ</h3> +<h3 id="Simple_demonstration">単純なデモ</h3> -<p>次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには <code>justify-items</code> の値として <code>stretch</code> (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。</p> +次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには `justify-items` の値として `stretch` (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。 -<p>しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには <code>justify-items</code> の値である <code>center</code> が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。</p> +しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには `justify-items` の値である `center` が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><article class="container" tabindex="0"> - <span>First child</span> - <span>Second child</span> - <span>Third child</span> - <span>Fourth child</span> -</article></pre> +```html +<article class="container" tabindex="0"> + <span>First child</span> + <span>Second child</span> + <span>Third child</span> + <span>Fourth child</span> +</article> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">html { +```css +html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } @@ -184,47 +178,25 @@ article, span { article { margin: 20px; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}</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-justify-items", "justify-items")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +#### 結果 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{EmbedLiveSample('Simple_demonstration', '100%', 200)}} -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.justify-items.flex_context")}}</p> +{{Specifications("css.properties.justify-items.grid_context")}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.justify-items.grid_context")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <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("place-items")}} 一括指定プロパティ</li> - <li>{{CSSxRef("justify-self")}} プロパティ</li> - <li>{{CSSxRef("align-items")}} プロパティ</li> -</ul> +- CSS グリッドガイド: _[CSS グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ +- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment) +- {{CSSxRef("place-items")}} 一括指定プロパティ +- {{CSSxRef("justify-self")}} プロパティ +- {{CSSxRef("align-items")}} プロパティ diff --git a/files/ja/web/css/justify-self/index.md b/files/ja/web/css/justify-self/index.md index 5f90a9d470..4011804c02 100644 --- a/files/ja/web/css/justify-self/index.md +++ b/files/ja/web/css/justify-self/index.md @@ -3,32 +3,31 @@ title: justify-self slug: Web/CSS/justify-self tags: - CSS - - CSS プロパティ - CSS ボックス配置 + - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.justify-self translation_of: Web/CSS/justify-self --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-self</code></strong> プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。</p> +[CSS](/ja/docs/Web/CSS) の **`justify-self`** プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。 -<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div> +{{EmbedInteractiveExample("pages/css/justify-self.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +このプロパティの効果は、現在のレイアウトモードに依存します。 -<p>このプロパティの効果は、現在のレイアウトモードに依存します。</p> +- ブロックレベルレイアウトでは、包含ブロック内のアイテムをインライン軸で配置します。 +- 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、包含ブロック内のアイテムをインライン軸で配置します。 +- 表のセルレイアウトでは、このプロパティは*無視されます* (絶対位置指定および表レイアウトのブロック内の配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables)) +- フレックスボックスレイアウトでは、このプロパティは*無視されます* (フレックスボックス内での配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)) +- グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout)) -<ul> - <li>ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。</li> - <li>絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。</li> - <li>表のセルレイアウトでは、このプロパティは<em>無視されます</em> (絶対配置及び表レイアウトのブロック内の配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">こちら</a>)</li> - <li>フレックスボックスレイアウトでは、このプロパティは<em>無視されます</em> (フレックスボックス内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">こちら</a>)</li> - <li>グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">こちら</a>)</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 基本キーワード */ +```css +/* 基本キーワード */ justify-self: auto; justify-self: normal; justify-self: stretch; @@ -56,107 +55,148 @@ justify-self: unsafe center; /* グローバル値 */ justify-self: inherit; justify-self: initial; +justify-self: revert; justify-self: unset; -</pre> - -<p>このプロパティは３つの異なる形式のうち１つを取ることができます。</p> - -<ul> - <li>基本キーワード: キーワード値 <code>normal</code>, <code>auto</code>, <code>stretch</code> のうちの一つ。</li> - <li>ベースラインによる配置: <code>baseline</code> キーワードに加えて、任意で <code>first</code> 又は <code>last</code> のどちらか。</li> - <li>位置による配置: - <ul> - <li><code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, <code>right</code> のうちの一つ。</li> - <li>加えて任意で <code>safe</code> 又は <code>unsafe</code>。</li> - </ul> - </li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用される値は、ボックスに親があれば、親ボックスの <code>justify-items</code> プロパティ、そうでなければ絶対位置であり、このような場合、 <code>auto</code> は <code>normal</code> を表します。</dd> - <dt><code>normal</code></dt> - <dd>このキーワードの効果は、レイアウトモードに依存します。 - <ul> - <li>ブロックレベルレイアウトでは、このキーワードは <code>start</code> の別名です。</li> - <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように振舞い、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように振舞います。</li> - <li>表のセルレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li> - <li>フレックスボックスレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li> - <li>グリッドレイアウトでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように振舞います。</li> - </ul> - </dd> - <dt><code>start</code></dt> - <dd>アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。</dd> - <dt><code>end</code></dt> - <dd>アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。</dd> - <dt><code>flex-start</code></dt> - <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>start</code> のように扱われます。</dd> - <dt><code>flex-end</code></dt> - <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>end</code> のように扱われます。</dd> - <dt><code>self-start</code></dt> - <dd>アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd> - <dt><code>self-end</code></dt> - <dd>アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</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>baseline<br> - first baseline</code><br> - <code>last baseline</code></dt> - <dd>first- 又は last-baseline 配置への参加を指定します。ボックスの最初又は最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br> - <code>first baseline</code> の代替配置は <code>start</code>、 <code>last baseline</code> の代替配置は <code>end</code> です。</dd> - <dt><code>stretch</code></dt> - <dd>アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が <code>auto</code> であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。</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> - -{{CSSSyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状態</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> - -<p>{{Compat("css.properties.justify-self.flex_context")}}</p> - -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> - -<p>{{Compat("css.properties.justify-self.grid_context")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <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("justify-items")}} プロパティ</li> -</ul> +``` + +このプロパティは 3 つの異なる形式のうち 1 つを取ることができます。 + +- 基本キーワード: キーワード値 `normal`, `auto`, `stretch` のうちの一つ。 +- ベースラインによる配置: `baseline` キーワードに加えて、任意で `first` または `last` のどちらか。 +- 位置による配置: + + - `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, `right` のうちの一つ。 + - 加えて任意で `safe` または `unsafe`。 + +### 値 + +- `auto` + - : 使用される値は、ボックスに親があれば、親ボックスの `justify-items` プロパティ、そうでなければ絶対位置であり、このような場合、 `auto` は `normal` を表します。 +- `normal` + + - : このキーワードの効果は、レイアウトモードに依存します。 + - ブロックレベルレイアウトでは、このキーワードは `start` の別名です。 + - 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように振舞い、*その他*の絶対位置ボックスには `stretch` のように振舞います。 + - 表のセルレイアウトでは、このキーワードは意味を持たず、*無視*されます。 + - フレックスボックスレイアウトでは、このキーワードは意味を持たず、*無視*されます。 + - グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います。 + +- `start` + - : アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。 +- `end` + - : アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。 +- `flex-start` + - : フレックスコンテナーの子ではないアイテムにおいては、この値は `start` のように扱われます。 +- `flex-end` + - : フレックスコンテナーの子ではないアイテムにおいては、この値は `end` のように扱われます。 +- `self-start` + - : アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。 +- `self-end` + - : アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。 +- `center` + - : アイテムは配置コンテナーの中央で、互いに接するように詰められます。 +- `left` + - : アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は `start` のように動作します。 +- `right` + - : アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は `start` のように動作します。 +- `baseline`, `first baseline`, `last baseline` + - : first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、 `last baseline` の代替配置は `end` です。 +- `stretch` + - : アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が `auto` であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。 +- `safe` + - : アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが `start` であったかのように配置されます。 +- `unsafe` + - : アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +<h3 id="Simple_demonstration">簡単なデモ</h3> + +以下の例では簡単な 2 x 2 のグリッドレイアウトを用意しました。最初にグリッドコンテナーには `justify-items` の値を `stretch` に — 既定値に — 設定し、グリッドアイテムがセルの幅全体に広がるようにしています。 + +2 番目、3 番目、4 番目のグリッドアイテムは、別々な `justify-self` の値を指定し、これらが `justify-items` の値をオーバーライドする様子を表示します。これらの値はグリッドアイテムを内容物の幅に設定し、セルごとに異なる位置に配置しています。 + +#### HTML + +```html +<article class="container"> + <span>First child</span> + <span>Second child</span> + <span>Third child</span> + <span>Fourth child</span> +</article> +``` + +#### CSS + +```css +html { + font-family: helvetica, arial, sans-serif; + letter-spacing: 1px; +} + +article { + background-color: red; + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 40px; + grid-gap: 10px; + width: 300px; + justify-items: stretch; +} + +span:nth-child(2) { + justify-self: start; +} + +span:nth-child(3) { +justify-self: center; +} + +span:nth-child(4) { +justify-self: end; +} + +article span { + background-color: black; + color: white; + margin: 1px; + text-align: center; +} + +article, span { + padding: 10px; + border-radius: 7px; +} + +article { + margin: 20px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Simple_demonstration', '100%', 200)}} + +## 仕様書 + +{{Specifications("css.properties.justify-self.grid_context")}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS グリッドガイド: _[CSS グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ +- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment) +- {{CSSxRef("justify-items")}} プロパティ 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")}} プロパティ diff --git a/files/ja/web/css/place-items/index.md b/files/ja/web/css/place-items/index.md index 6c79e3e785..0f7f4f0b33 100644 --- a/files/ja/web/css/place-items/index.md +++ b/files/ja/web/css/place-items/index.md @@ -3,24 +3,31 @@ title: place-items slug: Web/CSS/place-items tags: - CSS + - CSS フレックスボックス - CSS グリッドレイアウト - - CSS フレックスボックスレイアウト - CSS プロパティ - - CSS ボックス配置 - - Reference + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.place-items translation_of: Web/CSS/place-items --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>place-items</code></strong> <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティは、 {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。</p> +[CSS](/ja/docs/Web/CSS) の **`place-items`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティ) を、[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)や[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)などのレイアウトシステムにおいて、一度に指定することができます。2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。 -<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div> +{{EmbedInteractiveExample("pages/css/place-items.html")}} -<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> +このプロパティは以下の CSS プロパティの一括指定です。 -<pre class="brush:css">/* キーワード値 */ +- [`align-items`](/ja/docs/Web/CSS/align-items) +- [`justify-items`](/ja/docs/Web/CSS/justify-items) + +## 構文 + +```css +/* キーワード値 */ place-items: auto center; place-items: normal start; @@ -44,92 +51,190 @@ place-items: stretch auto; /* グローバル値 */ place-items: inherit; place-items: initial; +place-items: revert; place-items: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用される値は、ボックスに親があれば、親ボックスの <code>justify-items</code> プロパティ、そうでなければ絶対位置であり、このような場合、 <code>auto</code> は <code>normal</code> を表します。</dd> - <dt><code>normal</code></dt> - <dd>このキーワードの効果は、現在のレイアウトモードに依存します。 - <ul> - <li>ブロックレベルレイアウトでは、このキーワードは <code>start</code> の別名です。</li> - <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように動作し、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように動作します。</li> - <li>表のセルレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li> - <li>フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li> - <li>グリッドレイアウトでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように振舞います。</li> - </ul> - </dd> - <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>self-start</code></dt> - <dd>アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd> - <dt><code>self-end</code></dt> - <dd>アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</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>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>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="Examples" name="Examples">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[4]">#container { +``` + +### 値 + +- `auto` + - : 使用される値は、ボックスに親があれば、親ボックスの `justify-items` プロパティ、そうでなければ絶対位置であり、このような場合、 `auto` は `normal` を表します。 +- `normal` + + - : このキーワードの効果は、現在のレイアウトモードに依存します。 + + - ブロックレベルレイアウトでは、このキーワードは `start` の別名です。 + - 絶対位置のレイアウトでは、このキーワードは_置換_の絶対位置ボックスには `start` のように動作し、_その他_の絶対位置ボックスには `stretch` のように動作します。 + - 表のセルレイアウトでは、このキーワードは意味を持たず、_無視_されます。 + - フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、_無視_されます。 + - グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います。 + +- `start` + - : 各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。 +- `end` + - : 各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。 +- `flex-start` + - : アイテムは、配置コンテナーの主軸または交差軸の先頭側の端に向けて、互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。 +- `flex-end` + - : アイテムは、配置コンテナーの主軸または交差軸の末尾側の端に向けて、互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。 +- `self-start` + - : アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。 +- `self-end` + - : アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。 +- `center` + - : 各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。 +- `left` + - : 各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。 +- `right` + - : 各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。 +- `baseline`, `first baseline`, `last baseline` + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `stretch` + - : 各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +<h3 id="Placing_items_in_a_flex_container">フレックスコンテナー内でのアイテムの配置</h3> + +フレックスボックスでは、主軸のアイテムがグループとして扱われるため、{{cssxref("justify-self")}} や {{cssxref("justify-items")}} したがって、2 番目の値は無視されます。 + +```css hidden +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; + font-size: 2em; +} + +#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; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +} +``` + +```html hidden +<div id="container"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> +</div> + +<div class="row"> + <label for="values">place-items: </label> + <select id="values"> + <option value="stretch">stretch</option> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> + </select> +</div> +``` + +```js hidden +let values = document.getElementById('values'); +let container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.placeItems = evt.target.value; +}); +``` + +#### CSS + +```css +#container { height:200px; width: 240px; - place-items: center; /* You can change this value by selecting another option in the list */ + place-items: stretch; /* You can change this value by selecting another option in the list */ background-color: #8c8c8c; -} - -.flex { display: flex; - flex-wrap: wrap; } -.grid { - display: grid; - grid-template-columns: repeat(auto-fill, 50px); -} -</pre> +``` + +#### 結果 + +{{EmbedLiveSample("Placing_items_in_a_flex_container", 260, 290)}} + -<div class="hidden"> -<pre class="brush: css;">div > div { +<h3 id="Placing_items_in_a_grid_container">グリッドコンテナーでのアイテムの配置</h3> + +以下のグリッドコンテナーのアイテムは、配置されるグリッド領域よりも小さいため、`place-items` はブロック方向とインライン方向にアイテムを移動します。 + +```css hidden +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; + font-size: 2em; } #item2 { @@ -155,7 +260,6 @@ place-items: unset; #item6 { background-color: #8cffff; min-height: 50px; - font-size: 30px; } select { @@ -164,114 +268,92 @@ select { .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">place-items: </label> - <select id="values"> - <option value="start">start</option> - <option value="center">center</option> - <option value="end">end</option> - <option value="left">left</option> - <option value="right">right</option> - <option value="auto center">auto center</option> - <option value="normal start">normal start</option> - <option value="center normal">center normal</option> - <option value="start auto">start auto</option> - <option value="end normal">end normal</option> - <option value="self-start auto">self-start auto</option> - <option value="self-end normal">self-end normal</option> - <option value="flex-start auto">flex-start auto</option> - <option value="flex-end normal">flex-end normal</option> - <option value="left auto">left auto</option> - <option value="right normal">right normal</option> - <option value="baseline normal">baseline normal</option> - <option value="first baseline auto">first baseline auto</option> - <option value="last baseline normal">last baseline normal</option> - <option value="stretch auto">stretch auto</option> - </select> -</div> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +} +``` + +```html hidden +<div id="gridcontainer"> + <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> + +<div class="row"> + <label for="gridvalues">place-items: </label> + <select id="gridvalues"> + <option value="stretch">stretch</option> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> + </select> +</div> +``` + +```js hidden +let values = document.getElementById('gridvalues'); +let container = document.getElementById('gridcontainer'); values.addEventListener('change', function (evt) { container.style.placeItems = evt.target.value; }); +``` -display.addEventListener('change', function (evt) { - container.className = evt.target.value; -}); -</pre> -</div> - -<h3 id="Result">Result</h3> +#### CSS -<p>{{EmbedLiveSample("Examples", 260, 290)}}</p> +```css +#gridcontainer { + height:200px; + width: 240px; + place-items: stretch; /* You can change this value by selecting another option in the list */ + background-color: #8c8c8c; + display: grid; + grid-template-columns: repeat(3, 1fr); +} -<h2 id="Specifications" name="Specifications">仕様書</h2> +#gridcontainer > div { + width: 50px; +} -<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", "#place-items-property", "place-items")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +``` -<p>{{CSSInfo}}</p> +#### 結果 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{EmbedLiveSample("Placing_items_in_a_grid_container", 260, 290)}} -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +## 仕様書 -<p>{{Compat("css.properties.place-items.flex_context")}}</p> +{{Specifications}} -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> +## ブラウザーの互換性 -<p>{{Compat("css.properties.place-items.grid_context")}}</p> +{{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-items")}} プロパティ</li> - <li>{{CSSxRef("align-self")}} プロパティ</li> - <li>{{CSSxRef("justify-items")}} プロパティ</li> - <li>{{CSSxRef("justify-self")}} プロパティ</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-items")}} プロパティ +- {{CSSxRef("align-self")}} プロパティ +- {{CSSxRef("justify-items")}} プロパティ +- {{CSSxRef("justify-self")}} プロパティ diff --git a/files/ja/web/css/place-self/index.md b/files/ja/web/css/place-self/index.md index 4d9c85f610..6b39ca8ec6 100644 --- a/files/ja/web/css/place-self/index.md +++ b/files/ja/web/css/place-self/index.md @@ -3,23 +3,30 @@ title: place-self slug: Web/CSS/place-self tags: - CSS - - CSS プロパティ - CSS ボックス配置 - - place-self + - CSS プロパティ - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.place-self translation_of: Web/CSS/place-self --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +**`place-self`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち {{cssxref("align-self")}} および {{cssxref("justify-self")}} プロパティ) を、[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)や[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)などのレイアウトシステムにおいて、一度に指定することができます。2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。 -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>place-self</code></strong> プロパティは、 {{cssxref("align-self")}} および {{cssxref("justify-self")}} プロパティの両方を設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。最初の値は <code>align-self</code> プロパティの値で、二番目の値は <code>justify-self</code> プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。</p> +{{EmbedInteractiveExample("pages/css/place-self.html")}} -<div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div> +## 構成要素のプロパティ -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +根のプロパティは以下の CSS プロパティの一括指定です。 -<h2 id="Syntax" name="Syntax">構文</h2> +- [`align-self`](/ja/docs/Web/CSS/align-self) +- [`justify-self`](/ja/docs/Web/CSS/justify-self) -<pre class="brush: css">/* キーワード値 */ +## 構文 + +```css +/* キーワード値 */ place-self: auto center; place-self: normal start; @@ -43,84 +50,130 @@ place-self: stretch auto; /* グローバル値 */ place-self: inherit; place-self: initial; -place-self: unset;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>親の {{cssxref("align-items")}} の値で計算します。</dd> - <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>self-start</code></dt> - <dd>アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。</dd> - <dt><code>self-end</code></dt> - <dd>アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。</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>このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。</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>stretch</code></dt> - <dd>アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が <code>auto</code> であった場合、アイテムの寸法は {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 <code>auto</code> が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<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", "#place-self-property", "place-self")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> - -<p>{{Compat("css.properties.place-self.flex_context")}}</p> - -<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> - -<p>{{Compat("css.properties.place-self.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> - <li>{{cssxref("justify-self")}} プロパティ</li> -</ul> +place-self: revert; +place-self: unset; +``` + +### 値 + + +- `auto` + - : 親の {{cssxref("align-items")}} の値で計算します。 +- `normal` + + - : このキーワードの効果は、現在のレイアウトモードに依存します。 + - 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように動作し、*その他*の絶対位置ボックスには `stretch` のように動作します。 + - 絶対位置指定レイアウトの固定位置指定時は、このキーワードは `stretch` と同様に動作します。 + - フレックスアイテムでは、このキーワードは `stretch` と同様に動作します。 + - グリッドアイテムでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように動作します。 + - ブロックレベルボックスと表のセルでは、プロパティは適用されません。 + +- `self-start` + - : アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。 +- `self-end` + - : アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。 +- `flex-start` + - : このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。 +- `flex-end` + - : このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。 +- `center` + - : このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。 +- `baseline`, `first baseline`. `last baseline` + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `stretch` + - : アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が `auto` であった場合、アイテムの寸法は {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 `auto` が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +<h3 id="Simple_demonstration">簡単なデモ</h3> + +以下の例では簡単な 2 x 2 のグリッドレイアウトを用意しました。最初にグリッドコンテナーには [`justify-items`](/ja/docs/Web/CSS/justify-items) および [`align-items`](/ja/docs/Web/CSS/align-items) の値を `stretch` — 既定値 — に設定し、グリッドアイテムがセルの幅全体に広がるようにしています。 + +2 番目、3 番目、4 番目のグリッドアイテムは、別々な `place-self` の値を指定し、これらが既定の配置をオーバーライドする様子を表示します。これらの値はグリッドアイテムの幅や高さを内容物の幅や高さに設定し、セルごとにブロック方向とインライン方向の両方で異なる位置に配置しています。 + +#### HTML + +```html +<article class="container"> + <span>First</span> + <span>Second</span> + <span>Third</span> + <span>Fourth</span> +</article> +``` + +#### CSS + +```css +html { + font-family: helvetica, arial, sans-serif; + letter-spacing: 1px; +} + +article { + background-color: red; + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 80px; + grid-gap: 10px; + width: 300px; +} + +span:nth-child(2) { + place-self: start center; +} + +span:nth-child(3) { + place-self: center start; +} + +span:nth-child(4) { + place-self: end; +} + +article span { + background-color: black; + color: white; + margin: 1px; + text-align: center; +} + +article, span { + padding: 10px; + border-radius: 7px; +} + +article { + margin: 20px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 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-self")}} プロパティ +- {{cssxref("justify-self")}} プロパティ diff --git a/files/ja/web/css/row-gap/index.md b/files/ja/web/css/row-gap/index.md index f67c07b0ec..79389080ac 100644 --- a/files/ja/web/css/row-gap/index.md +++ b/files/ja/web/css/row-gap/index.md @@ -3,103 +3,109 @@ title: row-gap (grid-row-gap) slug: Web/CSS/row-gap tags: - CSS - - CSS Flexible Boxes - - CSS Grid - - CSS Property - - Reference + - CSS フレックスボックス + - CSS グリッド + - CSS プロパティ + - リファレンス - recipe:css-property - row-gap +browser-compat: css.properties.row-gap translation_of: Web/CSS/row-gap --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>row-gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。</p> +**`row-gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。 -<div>{{EmbedInteractiveExample("pages/css/row-gap.html")}}</div> +{{EmbedInteractiveExample("pages/css/row-gap.html")}} -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; -/* <percentage> 値 */ +/* <percentage> 値 */ row-gap: 10%; /* Global values */ row-gap: inherit; row-gap: initial; +row-gap: revert; row-gap: unset; -</pre> +``` -<h3 id="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。</dd> -</dl> +- `<length-percentage>` + - : 行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。 -<h2 id="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax">形式文法</h2> +## 関連情報 {{csssyntax}} -<h2 id="Examples">例</h2> +## 例 <h3 id="Flex_layout">フレックスレイアウト</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div id="flexbox"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div> -</pre> +```html +<div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight[5]">#flexbox { +```css +#flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } -#flexbox > div { +#flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } -</pre> +``` -<h4 id="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p> +{{EmbedLiveSample('Flex_layout', "auto", "120px")}} <h3 id="Grid_layout">グリッドレイアウト</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div id="grid"> - <div></div> - <div></div> - <div></div> -</div></pre> +```html +<div id="grid"> + <div></div> + <div></div> + <div></div> +</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css; highlight[6]">#grid { +```css +#grid { display: grid; height: 200px; grid-template-columns: 200px; @@ -107,48 +113,25 @@ row-gap: unset; row-gap: 20px; } -#grid > div { +#grid > div { border: 1px solid green; background-color: lime; } -</pre> +``` -<h4 id="Result_2">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</p> +{{EmbedLiveSample('Grid_layout', 'auto', 120)}} -<h2 id="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-row-gap", "row-gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications("css.properties.row-gap.grid_context")}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<h3 id="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> +{{Compat}} -<p>{{Compat("css.properties.row-gap.flex_context")}}</p> +## 関連情報 -<h3 id="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> - -<p>{{Compat("css.properties.row-gap.grid_context")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}}</li> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters">グリッドレイアウトの基本概念 - 溝</a></em></li> -</ul> +- 関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}} +- グリッドレイアウトガイド: _[グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ |
