From ebde2ff8adc34934e9f3ea8fb7644e771122b3c6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 18 Oct 2021 12:29:30 +0900 Subject: CSS Box Alignments 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/17 時点の英語版に同期 - 一部および画像は新規翻訳 --- files/ja/web/css/align-content/index.md | 290 ++++++-------- files/ja/web/css/align-items/index.md | 294 ++++++-------- files/ja/web/css/align-self/index.md | 182 ++++----- files/ja/web/css/cascade/index.md | 1 - files/ja/web/css/column-gap/index.md | 206 ++++------ files/ja/web/css/content/index.md | 1 - .../css_box_alignment/align-container-subjects.png | Bin 0 -> 221 bytes .../box_alignment_in_block_abspos_tables/index.md | 78 ++-- .../box_alignment_in_flexbox/index.md | 98 +++++ .../box_alignment_in_grid_layout/block_axis.png | Bin 0 -> 4218 bytes .../box_alignment_in_grid_layout/index.md | 100 +++++ .../box_alignment_in_grid_layout/inline_axis.png | Bin 0 -> 4648 bytes .../box_alignment_in_multi-column_layout/index.md | 50 +-- files/ja/web/css/css_box_alignment/index.md | 291 ++++++-------- .../justify-content-space-between.png | Bin 0 -> 256 bytes .../css_box_alignment/justify-content-start.png | Bin 0 -> 257 bytes files/ja/web/css/css_box_alignment/two-axes.png | Bin 0 -> 1690 bytes .../css/css_box_alignment/writing-mode-start.png | Bin 0 -> 1432 bytes files/ja/web/css/gap/index.md | 215 +++++----- files/ja/web/css/image/image()/index.md | 1 - files/ja/web/css/image/paint()/index.md | 1 - files/ja/web/css/justify-content/index.md | 245 +++++------- files/ja/web/css/justify-items/index.md | 238 +++++------ files/ja/web/css/justify-self/index.md | 278 +++++++------ files/ja/web/css/place-content/index.md | 347 ++++++++-------- files/ja/web/css/place-items/index.md | 434 ++++++++++++--------- files/ja/web/css/place-self/index.md | 231 ++++++----- files/ja/web/css/row-gap/index.md | 139 +++---- 28 files changed, 1891 insertions(+), 1829 deletions(-) create mode 100644 files/ja/web/css/css_box_alignment/align-container-subjects.png create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.md create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/block_axis.png create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_grid_layout/inline_axis.png create mode 100644 files/ja/web/css/css_box_alignment/justify-content-space-between.png create mode 100644 files/ja/web/css/css_box_alignment/justify-content-start.png create mode 100644 files/ja/web/css/css_box_alignment/two-axes.png create mode 100644 files/ja/web/css/css_box_alignment/writing-mode-start.png (limited to 'files/ja/web/css') 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 --- -

CSS の align-content プロパティは、フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。

+[CSS](/ja/docs/Web/CSS) の **`align-content`** プロパティは、[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)の交差軸または[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定します。 -

下記の対話型のデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。

+下記のインタラクティブデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。 -
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+{{EmbedInteractiveExample("pages/css/align-content.html")}} - +単一行のフレックスコンテナー (つまり、 `flex-wrap: nowrap` のもの) では、このプロパティは効果がありません。 -

単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がありません。

+## 構文 -

構文

- -
/* 基本的な位置による配 */
+```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;
-
- -

値

- -
-
start
-
各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
-
end
-
各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
-
flex-start
-
各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
- これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
-
flex-end
-
各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
- これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
-
center
-
各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。
-
normal
-
各アイテムは align-content の値が設定されていないかのように、既定の位置に寄せて配置されます。
-
baseline
- first baseline
- last baseline
-
the baseline is the line upon which most letters "sit" and below which descenders extend.
-
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
-
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
-
- -

形式文法

+``` + +### 値 + +- `start` + - : 各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。 +- `end` + - : 各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。 +- `flex-start` + - : 各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。 +- `flex-end` + - : 各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 + これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。 +- `center` + - : 各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。 +- `normal` + - : 各アイテムは `align-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。 +- `baseline`, `first baseline`, `last baseline` + + - : first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。 + + ![the baseline is the line upon which most letters "sit" and below which descenders extend.](410px-typography_line_terms.svg.png) + + `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}} -

例

+

例

-

CSS

+### CSS -
#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;
 }
-
- -

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>
-
- - - -

結果

- -

{{EmbedLiveSample("Example", 260, 290)}}

+``` -

仕様書

+### 結果 - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}[ first | last ]? baseline, start, end, left, right, unsafe | safe の値を追加。
{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}{{Spec2("CSS3 Flexbox")}}初回定義
+{{EmbedLiveSample("Examples", 260, 290)}} -
{{cssinfo}}
+## 仕様書 -

ブラウザーの互換性

+{{Specifications("css.properties.align-content.grid_context")}} -
-

フレックスレイアウトでの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.align-content.flex_context")}}

- -

グリッドレイアウトでの対応

- -

{{Compat("css.properties.align-content.grid_context")}}

-
+{{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) -
{{CSSRef}}
+{{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 --- -

CSS の align-items プロパティは、すべての直接の子要素に集合として {{cssxref("align-self")}} の値を設定します。フレックスボックスでは{{glossary("Cross Axis", "交差軸")}}方向のアイテムの配置を制御します。グリッドレイアウトでは、{{glossary("Grid Areas", "グリッド領域")}}におけるアイテムのブロック軸方向の配置を制御します。

+[CSS](/ja/docs/Web/CSS) の **`align-items`** プロパティは、すべての直接の子要素に集合として {{cssxref("align-self")}} の値を設定します。フレックスボックスでは{{glossary("Cross Axis", "交差軸")}}方向のアイテムの配置を制御します。グリッドレイアウトでは、{{glossary("Grid Areas", "グリッド領域")}}におけるアイテムのブロック軸方向の配置を制御します。 -

以下のデモは、グリッドレイアウトを使用して align-items のいくつかの値の動作を示しています。

+以下のデモは、グリッドレイアウトを使用して `align-items` のいくつかの値の動作を示しています。 -
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+{{EmbedInteractiveExample("pages/css/align-items.html")}} - +## 構文 -

構文

- -
/* 基本キーワード */
+```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;
-
- -

値

- -
-
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
-
すべてのフレックスアイテムは、ベースラインが一直線になるように配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。
-
stretch
-
アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
-
safe
-
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
-
unsafe
-
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
-
- -

形式文法

+``` + +### 値 + +- `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}} -

例

+

例

-

CSS

+### CSS -
#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;
-}
- -

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>
-
- - - -

結果

- -

{{EmbedLiveSample("Example", "260px", "290px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}{{Spec2("CSS3 Box Alignment")}}最新の構文定義に更新。
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}初回定義
+``` -

{{cssinfo}}

+### 結果 -

ブラウザーの互換性

+{{EmbedLiveSample("Examples", "260px", "290px")}} -

フレックスレイアウトでの対応

+## 仕様書 -

{{Compat("css.properties.align-items.flex_context")}}

+{{Specifications("css.properties.align-items.grid_context")}} -

グリッドレイアウトでの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.align-items.grid_context")}}

+{{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")}} プロパティ -
{{CSSRef}}
+{{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 --- -
{{CSSRef}}
+{{CSSRef}} -

align-self は CSS のプロパティで、グリッドやフレックスのアイテムの {{cssxref("align-items")}} の値を上書きします。グリッドでは、アイテムは{{glossary("Grid Areas", "グリッド領域")}}内に配置されます。フレックスボックスでは、アイテムは{{glossary("cross axis", "交差軸")}}上に配置されます。

+**`align-self`** は [CSS](/ja/docs/Web/CSS) のプロパティで、グリッドやフレックスのアイテムの {{cssxref("align-items")}} の値を上書きします。グリッドでは、アイテムは{{glossary("Grid Areas", "グリッド領域")}}内で配置されます。フレックスボックスでは、アイテムは{{glossary("cross axis", "交差軸")}}上で配置されます。 -
{{EmbedInteractiveExample("pages/css/align-self.html")}}
+{{EmbedInteractiveExample("pages/css/align-self.html")}} - +このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが `auto` の場合、`align-self` は無視されます。 -

このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが auto の場合、 align-self は無視されます。

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 align-self: auto;
 align-self: normal;
 
@@ -49,63 +49,68 @@ align-self: unsafe center;
 /* グローバル値 */
 align-self: inherit;
 align-self: initial;
-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
-
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。
-
- -

形式文法

+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}} -

例

+

例

-

HTML

+### HTML -
<section>
-  <div>Item #1</div>
-  <div>Item #2</div>
-  <div>Item #3</div>
-</section>
+```html +
+
Item #1
+
Item #2
+
Item #3
+
+``` -

CSS

+### 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;
-}
- -

表示結果

- -

{{EmbedLiveSample('Example')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Box Alignment")}}最新の構文定義に更新。
{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}{{Spec2("CSS3 Flexbox")}}初回定義
+} +``` -

{{cssinfo}}

+### 結果 -

ブラウザーの互換性

+{{EmbedLiveSample('Examples')}} -

フレックスレイアウトでの対応

+## 仕様書 -

{{Compat("css.properties.align-self.flex_context")}}

+{{Specifications("css.properties.align-self.grid_context")}} -

グリッドレイアウトでの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.align-self.grid_context")}}

+{{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-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 - 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 --- -
{{CSSRef}}
- -

column-gap は CSS のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+**`column-gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。 - +{{EmbedInteractiveExample("pages/css/column-gap.html")}} -

当初は段組みレイアウトの一部でしたが、 column-gap の定義は複数のレイアウト方法を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。

+当初は[段組みレイアウト](/ja/docs/Web/CSS/CSS_Columns)の一部でしたが、`column-gap` の定義は複数のレイアウト方式を含めるように拡張されました。現在は[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。 -
-

CSS グリッドレイアウトは当初、 grid-column-gap プロパティを定義していました。この接頭辞付きのプロパティは column-gap で置き換えられました。しかし、グリッドで grid-column-gap を実装しており column-gap を実装していないブラウザーに対応するため、接頭辞付きのプロパティを使用する必要があるでしょう。

-
- -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 column-gap: normal;
 
-/* <length> 値 */
+/*  値 */
 column-gap: 3px;
 column-gap: 2.5em;
 
-/* <percentage> 値 */
+/*  値 */
 column-gap: 3%;
 
 /* グローバル値 */
 column-gap: inherit;
 column-gap: initial;
+column-gap: revert;
 column-gap: unset;
-
+``` + +`column-gap` プロパティは以下に挙げた値の一つで指定します。 -

column-gap プロパティは以下に挙げた値の一つで指定します。

+### 値 -

値

+- `normal` + - : 列間 (段間) にはブラウザー既定の幅が使われます。段組みレイアウトでは `1em` と指定され、他の種類のレイアウトでは 0 になります。 +- {{CSSxRef("<length>")}} + - : 列間 (段間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。 +- {{CSSxRef("<percentage>")}} + - : 列間 (段間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。 -
-
normal
-
段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは 1em と指定され、他の種類のレイアウトでは 0 になります。
-
{{CSSxRef("<length>")}}
-
段間 (列間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。
-
{{CSSxRef("<percentage>")}}
-
段間 (列間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。
-
+## 公式定義 -

形式文法

+{{cssinfo}} -{{CSSSyntax}} +## 関連情報 -

例

+{{csssyntax}} -

フレックスレイアウト

+## 例 -

HTML

+

フレックスレイアウト

-
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
+#### HTML + +```html +
+
+
+
+
+``` -

CSS

+#### CSS -
#flexbox {
+```css
+#flexbox {
   display: flex;
   height: 100px;
   column-gap: 20px;
 }
 
-#flexbox > div {
+#flexbox > div {
   border: 1px solid green;
   background-color: lime;
   flex: auto;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Flex_layout", "auto", "120px")}}

+{{EmbedLiveSample("Flex_layout", "auto", "120px")}} -

グリッドレイアウト

+

グリッドレイアウト

-

HTML

+#### HTML -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -