From 12dcd99f1954265d69c461fe2c2a477b52ce735c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:55:22 +0900 Subject: CSS Box Alignment の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/align-content/index.html | 295 --------------------- files/ja/web/css/align-content/index.md | 295 +++++++++++++++++++++ files/ja/web/css/align-items/index.html | 283 -------------------- files/ja/web/css/align-items/index.md | 283 ++++++++++++++++++++ files/ja/web/css/align-self/index.html | 174 ------------ files/ja/web/css/align-self/index.md | 174 ++++++++++++ files/ja/web/css/column-gap/index.html | 207 --------------- files/ja/web/css/column-gap/index.md | 207 +++++++++++++++ .../index.html | 80 ------ .../box_alignment_in_block_abspos_tables/index.md | 80 ++++++ .../box_alignment_in_flexbox/index.html | 119 --------- .../index.html | 51 ---- .../box_alignment_in_multi-column_layout/index.md | 51 ++++ files/ja/web/css/css_box_alignment/index.html | 253 ------------------ files/ja/web/css/css_box_alignment/index.md | 253 ++++++++++++++++++ files/ja/web/css/gap/index.html | 221 --------------- files/ja/web/css/gap/index.md | 221 +++++++++++++++ files/ja/web/css/justify-content/index.html | 213 --------------- files/ja/web/css/justify-content/index.md | 213 +++++++++++++++ files/ja/web/css/justify-items/index.html | 230 ---------------- files/ja/web/css/justify-items/index.md | 230 ++++++++++++++++ files/ja/web/css/justify-self/index.html | 162 ----------- files/ja/web/css/justify-self/index.md | 162 +++++++++++ files/ja/web/css/place-content/index.html | 252 ------------------ files/ja/web/css/place-content/index.md | 252 ++++++++++++++++++ files/ja/web/css/place-items/index.html | 277 ------------------- files/ja/web/css/place-items/index.md | 277 +++++++++++++++++++ files/ja/web/css/place-self/index.html | 126 --------- files/ja/web/css/place-self/index.md | 126 +++++++++ files/ja/web/css/row-gap/index.html | 154 ----------- files/ja/web/css/row-gap/index.md | 154 +++++++++++ 31 files changed, 2978 insertions(+), 3097 deletions(-) delete mode 100644 files/ja/web/css/align-content/index.html create mode 100644 files/ja/web/css/align-content/index.md delete mode 100644 files/ja/web/css/align-items/index.html create mode 100644 files/ja/web/css/align-items/index.md delete mode 100644 files/ja/web/css/align-self/index.html create mode 100644 files/ja/web/css/align-self/index.md delete mode 100644 files/ja/web/css/column-gap/index.html create mode 100644 files/ja/web/css/column-gap/index.md delete mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md delete mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html delete mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html create mode 100644 files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md delete mode 100644 files/ja/web/css/css_box_alignment/index.html create mode 100644 files/ja/web/css/css_box_alignment/index.md delete mode 100644 files/ja/web/css/gap/index.html create mode 100644 files/ja/web/css/gap/index.md delete mode 100644 files/ja/web/css/justify-content/index.html create mode 100644 files/ja/web/css/justify-content/index.md delete mode 100644 files/ja/web/css/justify-items/index.html create mode 100644 files/ja/web/css/justify-items/index.md delete mode 100644 files/ja/web/css/justify-self/index.html create mode 100644 files/ja/web/css/justify-self/index.md delete mode 100644 files/ja/web/css/place-content/index.html create mode 100644 files/ja/web/css/place-content/index.md delete mode 100644 files/ja/web/css/place-items/index.html create mode 100644 files/ja/web/css/place-items/index.md delete mode 100644 files/ja/web/css/place-self/index.html create mode 100644 files/ja/web/css/place-self/index.md delete mode 100644 files/ja/web/css/row-gap/index.html create mode 100644 files/ja/web/css/row-gap/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/align-content/index.html b/files/ja/web/css/align-content/index.html deleted file mode 100644 index 907888b7bc..0000000000 --- a/files/ja/web/css/align-content/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: align-content -slug: Web/CSS/align-content -tags: - - CSS - - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 - - Reference - - place-content -translation_of: Web/CSS/align-content ---- -

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

- -

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

- -
{{EmbedInteractiveExample("pages/css/align-content.html")}}
- - - -

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

- -

構文

- -
/* 基本的な位置による配 */
-/* align-content は left および right の値を取りません */
-align-content: center;     /* アイテムを中央に寄せる */
-align-content: start;      /* アイテムを先頭に寄せる */
-align-content: end;        /* アイテムを末尾に寄せる */
-align-content: flex-start; /* フレックスアイテムを先頭に寄せる */
-align-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
-
-/* 通常の配置 */
-align-content: normal;
-
-/* ベースラインの配置 */
-align-content: baseline;
-align-content: first baseline;
-align-content: last baseline;
-
-/* 均等配置 */
-align-content: space-between; /* アイテムを均等に配置し
-                                 最初のアイテムは先頭に寄せ、
-                                 最後のアイテムは末尾に寄せる */
-align-content: space-around;  /* アイテムを均等に配置し
-                                 各アイテムの両側に半分の大きさの
-                                 間隔を置く */
-align-content: space-evenly;  /* アイテムを均等に配置し
-                                 各アイテムの周りに同じ大きさの間隔を置く */
-align-content: stretch;       /* アイテムを均等に配置し
-                                 コンテナーに合うようにサイズ「自動」の
-                                 アイテムを引き伸ばす */
-
-/* あふれた場合の配置 */
-align-content: safe center;
-align-content: unsafe center;
-
-/* グローバル値 */
-align-content: inherit;
-align-content: initial;
-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
-
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#container {
-  height:200px;
-  width: 240px;
-  align-content: center; /* Can be changed in the live sample */
-  background-color: #8c8c8c;
-}
-
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50px);
-}
-
-div > div {
-  box-sizing: border-box;
-  border: 2px solid #8c8c8c;
-  width: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#item1 {
-  background-color: #8cffa0;
-  min-height: 30px;
-}
-
-#item2 {
-  background-color: #a0c8ff;
-  min-height: 50px;
-}
-
-#item3 {
-  background-color: #ffa08c;
-  min-height: 40px;
-}
-
-#item4 {
-  background-color: #ffff8c;
-  min-height: 60px;
-}
-
-#item5 {
-  background-color: #ff8cff;
-  min-height: 70px;
-}
-
-#item6 {
-  background-color: #8cffff;
-  min-height: 50px;
-  font-size: 30px;
-}
-
-select {
-  font-size: 16px;
-}
-
-.row {
-  margin-top: 10px;
-}
-
- -

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")}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -
-

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

- -

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

- -

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

- -

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

-
- -

関連情報

- - - -
{{CSSRef}}
diff --git a/files/ja/web/css/align-content/index.md b/files/ja/web/css/align-content/index.md new file mode 100644 index 0000000000..907888b7bc --- /dev/null +++ b/files/ja/web/css/align-content/index.md @@ -0,0 +1,295 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - Reference + - place-content +translation_of: Web/CSS/align-content +--- +

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

+ +

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

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ + + +

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

+ +

構文

+ +
/* 基本的な位置による配 */
+/* align-content は left および right の値を取りません */
+align-content: center;     /* アイテムを中央に寄せる */
+align-content: start;      /* アイテムを先頭に寄せる */
+align-content: end;        /* アイテムを末尾に寄せる */
+align-content: flex-start; /* フレックスアイテムを先頭に寄せる */
+align-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
+
+/* 通常の配置 */
+align-content: normal;
+
+/* ベースラインの配置 */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* 均等配置 */
+align-content: space-between; /* アイテムを均等に配置し
+                                 最初のアイテムは先頭に寄せ、
+                                 最後のアイテムは末尾に寄せる */
+align-content: space-around;  /* アイテムを均等に配置し
+                                 各アイテムの両側に半分の大きさの
+                                 間隔を置く */
+align-content: space-evenly;  /* アイテムを均等に配置し
+                                 各アイテムの周りに同じ大きさの間隔を置く */
+align-content: stretch;       /* アイテムを均等に配置し
+                                 コンテナーに合うようにサイズ「自動」の
+                                 アイテムを引き伸ばす */
+
+/* あふれた場合の配置 */
+align-content: safe center;
+align-content: unsafe center;
+
+/* グローバル値 */
+align-content: inherit;
+align-content: initial;
+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
+
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

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")}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +
+

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

+ +

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

+ +

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

+ +

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

+
+ +

関連情報

+ + + +
{{CSSRef}}
diff --git a/files/ja/web/css/align-items/index.html b/files/ja/web/css/align-items/index.html deleted file mode 100644 index 49893ce4f4..0000000000 --- a/files/ja/web/css/align-items/index.html +++ /dev/null @@ -1,283 +0,0 @@ ---- -title: align-items -slug: Web/CSS/align-items -tags: - - CSS - - CSS グリッドレイアウト - - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 - - Reference -translation_of: Web/CSS/align-items ---- -

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

- -

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

- -
{{EmbedInteractiveExample("pages/css/align-items.html")}}
- - - -

構文

- -
/* 基本キーワード */
-align-items: normal;
-align-items: stretch;
-
-/* 位置による配置 */
-/* align-items は左と右の値を取らない */
-align-items: center; /* アイテムを中央付近にまとめる */
-align-items: start; /* アイテムを先頭にまとめる */
-align-items: end; /* アイテムを末尾にまとめる */
-align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
-align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
-
-/* ベースラインに配置する */
-align-items: baseline;
-align-items: first baseline;
-align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */
-align-items: safe center;
-align-items: unsafe center;
-
-/* グローバル値 */
-align-items: inherit;
-align-items: initial;
-align-items: unset;
-
- -

値

- -
-
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
-
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#container {
-  height:200px;
-  width: 240px;
-  align-items: center; /* Can be changed in the live sample */
-  background-color: #8c8c8c;
-}
-
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50px);
-}
-
-div > div {
-  box-sizing: border-box;
-  border: 2px solid #8c8c8c;
-  width: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#item1 {
-  background-color: #8cffa0;
-  min-height: 30px;
-}
-
-#item2 {
-  background-color: #a0c8ff;
-  min-height: 50px;
-}
-
-#item3 {
-  background-color: #ffa08c;
-  min-height: 40px;
-}
-
-#item4 {
-  background-color: #ffff8c;
-  min-height: 60px;
-}
-
-#item5 {
-  background-color: #ff8cff;
-  min-height: 70px;
-}
-
-#item6 {
-  background-color: #8cffff;
-  min-height: 50px;
-  font-size: 30px;
-}
-
-select {
-  font-size: 16px;
-}
-
-.row {
-  margin-top: 10px;
-}
- -

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

- -

ブラウザーの互換性

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - - -
{{CSSRef}}
diff --git a/files/ja/web/css/align-items/index.md b/files/ja/web/css/align-items/index.md new file mode 100644 index 0000000000..49893ce4f4 --- /dev/null +++ b/files/ja/web/css/align-items/index.md @@ -0,0 +1,283 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - Reference +translation_of: Web/CSS/align-items +--- +

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

+ +

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

+ +
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+ + + +

構文

+ +
/* 基本キーワード */
+align-items: normal;
+align-items: stretch;
+
+/* 位置による配置 */
+/* align-items は左と右の値を取らない */
+align-items: center; /* アイテムを中央付近にまとめる */
+align-items: start; /* アイテムを先頭にまとめる */
+align-items: end; /* アイテムを末尾にまとめる */
+align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
+align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
+
+/* ベースラインに配置する */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* グローバル値 */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

値

+ +
+
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
+
配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+ +

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

+ +

ブラウザーの互換性

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + + +
{{CSSRef}}
diff --git a/files/ja/web/css/align-self/index.html b/files/ja/web/css/align-self/index.html deleted file mode 100644 index 7605ab04dd..0000000000 --- a/files/ja/web/css/align-self/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: align-self -slug: Web/CSS/align-self -tags: - - CSS - - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 - - place-self - - リファレンス -translation_of: Web/CSS/align-self ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/align-self.html")}}
- - - -

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

- -

構文

- -
/* キーワード値 */
-align-self: auto;
-align-self: normal;
-
-/* 位置による配置 */
-/* align-self は left および right の値をとりません */
-align-self: center; /* アイテムを中央付近に配置 */
-align-self: start; /* アイテムを起点に配置 */
-align-self: end; /* アイテムを末端に配置 */
-align-self: self-start; /* アイテムを起点に詰めて配置 */
-align-self: self-end; /* アイテムを末端に詰めて配置 */
-align-self: flex-start; /* フレックスアイテムを起点に配置 */
-align-self: flex-end; /* フレックスアイテムを末端に配置 */
-
-/* ベースラインによる配置 */
-align-self: baseline;
-align-self: first baseline;
-align-self: last baseline;
-align-self: stretch; /* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 */
-
-/* あふれたときの配置 */
-align-self: safe center;
-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
-
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<section>
-  <div>Item #1</div>
-  <div>Item #2</div>
-  <div>Item #3</div>
-</section>
- -

CSS

- -
section {
-  display: flex;
-  align-items: center;
-  height: 120px;
-  background: beige;
-}
-
-div {
-  height: 60px;
-  background: cyan;
-  margin: 5px;
-}
-
-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}}

- -

ブラウザーの互換性

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/align-self/index.md b/files/ja/web/css/align-self/index.md new file mode 100644 index 0000000000..7605ab04dd --- /dev/null +++ b/files/ja/web/css/align-self/index.md @@ -0,0 +1,174 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - place-self + - リファレンス +translation_of: Web/CSS/align-self +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/align-self.html")}}
+ + + +

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

+ +

構文

+ +
/* キーワード値 */
+align-self: auto;
+align-self: normal;
+
+/* 位置による配置 */
+/* align-self は left および right の値をとりません */
+align-self: center; /* アイテムを中央付近に配置 */
+align-self: start; /* アイテムを起点に配置 */
+align-self: end; /* アイテムを末端に配置 */
+align-self: self-start; /* アイテムを起点に詰めて配置 */
+align-self: self-end; /* アイテムを末端に詰めて配置 */
+align-self: flex-start; /* フレックスアイテムを起点に配置 */
+align-self: flex-end; /* フレックスアイテムを末端に配置 */
+
+/* ベースラインによる配置 */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 */
+
+/* あふれたときの配置 */
+align-self: safe center;
+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
+
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<section>
+  <div>Item #1</div>
+  <div>Item #2</div>
+  <div>Item #3</div>
+</section>
+ +

CSS

+ +
section {
+  display: flex;
+  align-items: center;
+  height: 120px;
+  background: beige;
+}
+
+div {
+  height: 60px;
+  background: cyan;
+  margin: 5px;
+}
+
+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}}

+ +

ブラウザーの互換性

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-gap/index.html b/files/ja/web/css/column-gap/index.html deleted file mode 100644 index 032d6d4f62..0000000000 --- a/files/ja/web/css/column-gap/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: column-gap (grid-column-gap) -slug: Web/CSS/column-gap -tags: - - CSS - - CSS グリッドレイアウト - - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 - - CSS 段組みレイアウト - - Reference - - column-gap - - 'recipe:css-property' -translation_of: Web/CSS/column-gap ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
- - - -

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

- -
-

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

-
- -

構文

- -
/* キーワード値 */
-column-gap: normal;
-
-/* <length> 値 */
-column-gap: 3px;
-column-gap: 2.5em;
-
-/* <percentage> 値 */
-column-gap: 3%;
-
-/* グローバル値 */
-column-gap: inherit;
-column-gap: initial;
-column-gap: unset;
-
- -

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

- -

値

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

形式文法

- -{{CSSSyntax}} - -

例

- -

フレックスレイアウト

- -

HTML

- -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
- -

CSS

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

結果

- -

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

- -

グリッドレイアウト

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- - - -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  column-gap: 20px;
-}
-
-#grid > div {
-  border: 1px solid green;
-  background-color: lime;
-}
-
- -

結果

- -

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

- -

段組みレイアウト

- -

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

CSS

- -
.content-box {
-  column-count: 3;
-  column-gap: 40px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}グリッド及びフレックスボックスに適用
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}グリッドレイアウトにどう適用されるかを指定
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}初回定義。
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

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

- -

{{Compat("css.properties.column-gap.flex_context")}}

- -

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

- -

{{Compat("css.properties.column-gap.grid_context")}}

- -

段組みレイアウトでの対応

- -

{{Compat("css.properties.column-gap.multicol_context")}}

- -

関連情報

- - diff --git a/files/ja/web/css/column-gap/index.md b/files/ja/web/css/column-gap/index.md new file mode 100644 index 0000000000..032d6d4f62 --- /dev/null +++ b/files/ja/web/css/column-gap/index.md @@ -0,0 +1,207 @@ +--- +title: column-gap (grid-column-gap) +slug: Web/CSS/column-gap +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - CSS 段組みレイアウト + - Reference + - column-gap + - 'recipe:css-property' +translation_of: Web/CSS/column-gap +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+ + + +

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

+ +
+

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

+
+ +

構文

+ +
/* キーワード値 */
+column-gap: normal;
+
+/* <length> 値 */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* <percentage> 値 */
+column-gap: 3%;
+
+/* グローバル値 */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+
+ +

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

+ +

値

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

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

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

結果

+ +

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

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

結果

+ +

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

+ +

段組みレイアウト

+ +

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

CSS

+ +
.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}グリッド及びフレックスボックスに適用
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}グリッドレイアウトにどう適用されるかを指定
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}初回定義。
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

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

+ +

{{Compat("css.properties.column-gap.grid_context")}}

+ +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.multicol_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html deleted file mode 100644 index 2cb47a5709..0000000000 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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 ---- -

ボックス配置仕様書は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となるボックス配置ページを併せて読んでください。

- -
-

Note: 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.

-
- -

align-content と justify-content

- -

The {{cssxref("justify-content")}} property does not apply to block containers or table cells.

- -

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 space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject.

- -

justify-self

- -

The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.

- -

This property does not apply to floated elements or table cells.

- -

絶対配置要素

- -

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

- -

align-self

- -

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.

- -

絶対配置要素

- -

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

- -

Aligning in these layout methods today

- -

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.

- -

Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of auto 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:

- -
.container {
-  width: 20em;
-  margin-left: auto;
-  margin-right: auto;
-}
-
- -

In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.

- -

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.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

リファレンス

- -

CSS プロパティ

- - - -

用語集の項目

- - - -

{{CSSRef}}

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 new file mode 100644 index 0000000000..2cb47a5709 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -0,0 +1,80 @@ +--- +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 +--- +

ボックス配置仕様書は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となるボックス配置ページを併せて読んでください。

+ +
+

Note: 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.

+
+ +

align-content と justify-content

+ +

The {{cssxref("justify-content")}} property does not apply to block containers or table cells.

+ +

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 space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject.

+ +

justify-self

+ +

The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.

+ +

This property does not apply to floated elements or table cells.

+ +

絶対配置要素

+ +

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

+ +

align-self

+ +

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.

+ +

絶対配置要素

+ +

The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start.

+ +

Aligning in these layout methods today

+ +

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.

+ +

Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of auto 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:

+ +
.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.

+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

リファレンス

+ +

CSS プロパティ

+ + + +

用語集の項目

+ + + +

{{CSSRef}}

diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html deleted file mode 100644 index 5435419fac..0000000000 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: フレックスボックスでのボックス配置 -slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox -tags: - - CSS - - CSS ボックス配置 - - フレックスボックス -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox ---- -
{{CSSRef}}
- -

ボックス配置の仕様書は、さまざまなレイアウト方法で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方法の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

- -

基本的な例

- -

この例では、３つのフレックスアイテムが {{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 はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差じっくについて次のように考えると最も簡単です。

- - - -

主軸の配置

- - - -

交差軸の配置

- - - -

フレックスボックスには justify-self はない

- -

主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。 justify-content プロパティは、どのように残りの領域を使用するかを制御します。 justify-content: flex-end に設定すると、余分な領域はアイテムの前に配置され、 justify-content: space-around に設定すると、その大きさアイテムの両側に配置される、などです。

- -

つまり、常にアイテムのグループ全体が動き回るよう配分されるため、 justify-self プロパティはフレックスボックスでは意味を持ちません。

- -

交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 align-self は意味を持ちます。

- -

alignment および auto のマージン

- -

justify-self プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに auto を使用することができます。 auto に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを auto に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。

- -

開始点に配置された一連のフレックスアイテムのうち、１つのアイテムで {{cssxref("margin")}} を auto に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、スペースに収まるように縮小します。

- -

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

- -

gap プロパティ

- - - -

アイテム間における固定幅の間隔の作成

- -

主軸では、 column-gap プロパティは兄弟アイテムの間に固定幅の間隔を作成します。

- -

交差軸では、 row-gap プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには flex-wrap を wrap に設定する必要があります。

- -
-

メモ: Firefox 63 時点で、 Firefox がフレックスボックスで gap プロパティを実装している唯一のブラウザーです。

-
- -

リファレンス

- -

CSS プロパティ

- -
- -
- -

用語集の項目

- -
- -
- -

ガイド

- - - -

外部リソース

- - diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html deleted file mode 100644 index 569a5e52af..0000000000 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -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 ---- -

{{CSSRef}}

- -

ボックス配置仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、段組みレイアウトのコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となるボックス配置ページと併せて読んでください。

- -

段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。

- -
-

メモ: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。

-
- -

align-content と justify-content

- -

{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。

- -

justify-content に normal または stretch 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。

- -

column-gap

- -

段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。

- -

リファレンス

- -

CSS プロパティ

- -
- -
- -

用語集

- -
- -
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 new file mode 100644 index 0000000000..569a5e52af --- /dev/null +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md @@ -0,0 +1,51 @@ +--- +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 +--- +

{{CSSRef}}

+ +

ボックス配置仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、段組みレイアウトのコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となるボックス配置ページと併せて読んでください。

+ +

段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。

+ +
+

メモ: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。

+
+ +

align-content と justify-content

+ +

{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。

+ +

justify-content に normal または stretch 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。

+ +

column-gap

+ +

段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。

+ +

リファレンス

+ +

CSS プロパティ

+ +
+ +
+ +

用語集

+ +
+ +
diff --git a/files/ja/web/css/css_box_alignment/index.html b/files/ja/web/css/css_box_alignment/index.html deleted file mode 100644 index a220b68112..0000000000 --- a/files/ja/web/css/css_box_alignment/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: CSS ボックス配置 -slug: Web/CSS/CSS_Box_Alignment -tags: - - CSS - - CSS ボックス配置 - - alignment - - box alignment - - グリッドレイアウト - - フレックスボックス - - 段組みレイアウト -translation_of: Web/CSS/CSS_Box_Alignment ---- -
{{CSSRef}}
- -

CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。

- -
-

メモ: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。

-
- -

古い配置方法

- -

CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置はインラインレイアウトおよび CSS テキストモジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。

- -

先にフレックスボックスを学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。

- -

基本的な例

- -

次の例は、ボックス配置のプロパティの一部がグリッドとフレックスボックスにどのように適用されるかを示しています。

- -

CSS グリッドレイアウトの配置の例

- -

グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を center に設定して、グループに設定された align-items 値を上書きしています。

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

- -

フレックスボックスの配置の例

- -

この例では、3 つのフレックスアイテムが justify-content を使用して主軸上に配置され、 align-items を使用して交差軸上に配置されています。 最初のアイテムはalign-self を center に設定して、グループに設定された align-items を上書きしています。

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

- -

主要概念と用語

- -

この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。

- -

書字方向との関連

- -

配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。

- -

二次元の配置

- -

ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。

- -

- -

インライン軸上でアイテムを整列するときは、 justify- で始まるプロパティを使用します。

- - - -

ブロック軸上でアイテムを整列するときは、 align- で始まるプロパティを使用します。

- - - -

フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が row に設定されている場合に上記のものが当てはまります。フレックスボックスが column に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 justify- プロパティは常に主軸上で、 align- プロパティは交差軸上で配置するために使用されます。

- -

配置対象物

- -

配置対象物 (alignment subject) とは、配置が行われるもののことです。 justify-self または align-self の場合、あるいは justify-items または align-items によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 justify-content および align-content プロパティはレイアウト方法ごとに異なります。

- -

配置コンテナー

- -

配置コンテナー (alignment container) は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。

- -

下の画像は、内側に2つの整列対象がある配置コンテナーの例です。

- -

- -

代替配置

- -

実現できない配置を設定した場合、代替配置が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。

- -

配置の種類

- -

この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。

- - - -

位置指定配置のキーワード値

- -

以下の値は位置指定配置のために定義されており、 justify-content および align-content による内容の配置、そして justify-self および align-self による自己配置の値として使用することができます。

- - - -

画面の物理的な属性に関連する left と right の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。

- -

たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて justify-content に start を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ start の値は、アラビア語の文がページの右側から始まるので、右に移動します。

- -

どちらの例も justify-content: start ですが、開始位置は書字方向によって異なります。

- -

- -

ベースライン配置

- -

ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは justify-content および align-content による内容の配置、そして justify-self および align-self による自己配置の値として使用することができます。

- - - -

justify-content または align-content のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。

- -

ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は justify-self または align-self を使用する場合、あるいは justify-items または align-items を使用してこれらの値をグループとして設定する場合に行われます。

- -

分配配置

- -

分配配置キーワード は align-content および justify-content で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。

- - - -

たとえばフレックスレイアウトでは、初期値の場合アイテムを flex-start で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 flex-direction が row のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。

- -

- -

フレックスコンテナーに justify-content: space-between を設定すると、余白はアイテム間に分配されます。

- -

- -

これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。

- -

配置があふれた場合

- -

safe および unsafe キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 safe キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 start で配置します。

- -

unsafe を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。

- -

ボックス間のギャップ

- -

ボックス配置仕様書には、 gap, row-gap, column-gap も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。

- -

gap プロパティは row-gap と column-gap の一括指定で、両プロパティを一度に設定することができます。

- - - -

以下の例では、グリッドレイアウトで gap の一括指定を使用して、行トラック間に 10px のギャップと列トラック間に 2em のギャップを設定します。

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

- -

この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 gap プロパティはもともとグリッドレイアウト仕様書の中で grid- という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。

- - - -

接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 grid-gap プロパティの次に gap を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。

- -

また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。

- -

レイアウト別の配置詳細ページ

- -

CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。

- - - -

リファレンス

- -

CSS プロパティ

- -
- -
- -

用語集の項目

- -
- -
- -

ガイド

- - - -

外部リソース

- - diff --git a/files/ja/web/css/css_box_alignment/index.md b/files/ja/web/css/css_box_alignment/index.md new file mode 100644 index 0000000000..a220b68112 --- /dev/null +++ b/files/ja/web/css/css_box_alignment/index.md @@ -0,0 +1,253 @@ +--- +title: CSS ボックス配置 +slug: Web/CSS/CSS_Box_Alignment +tags: + - CSS + - CSS ボックス配置 + - alignment + - box alignment + - グリッドレイアウト + - フレックスボックス + - 段組みレイアウト +translation_of: Web/CSS/CSS_Box_Alignment +--- +
{{CSSRef}}
+ +

CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。

+ +
+

メモ: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。

+
+ +

古い配置方法

+ +

CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置はインラインレイアウトおよび CSS テキストモジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。

+ +

先にフレックスボックスを学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。

+ +

基本的な例

+ +

次の例は、ボックス配置のプロパティの一部がグリッドとフレックスボックスにどのように適用されるかを示しています。

+ +

CSS グリッドレイアウトの配置の例

+ +

グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を center に設定して、グループに設定された align-items 値を上書きしています。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

フレックスボックスの配置の例

+ +

この例では、3 つのフレックスアイテムが justify-content を使用して主軸上に配置され、 align-items を使用して交差軸上に配置されています。 最初のアイテムはalign-self を center に設定して、グループに設定された align-items を上書きしています。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

主要概念と用語

+ +

この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。

+ +

書字方向との関連

+ +

配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。

+ +

二次元の配置

+ +

ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。

+ +

+ +

インライン軸上でアイテムを整列するときは、 justify- で始まるプロパティを使用します。

+ + + +

ブロック軸上でアイテムを整列するときは、 align- で始まるプロパティを使用します。

+ + + +

フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が row に設定されている場合に上記のものが当てはまります。フレックスボックスが column に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 justify- プロパティは常に主軸上で、 align- プロパティは交差軸上で配置するために使用されます。

+ +

配置対象物

+ +

配置対象物 (alignment subject) とは、配置が行われるもののことです。 justify-self または align-self の場合、あるいは justify-items または align-items によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 justify-content および align-content プロパティはレイアウト方法ごとに異なります。

+ +

配置コンテナー

+ +

配置コンテナー (alignment container) は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。

+ +

下の画像は、内側に2つの整列対象がある配置コンテナーの例です。

+ +

+ +

代替配置

+ +

実現できない配置を設定した場合、代替配置が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。

+ +

配置の種類

+ +

この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。

+ + + +

位置指定配置のキーワード値

+ +

以下の値は位置指定配置のために定義されており、 justify-content および align-content による内容の配置、そして justify-self および align-self による自己配置の値として使用することができます。

+ + + +

画面の物理的な属性に関連する left と right の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。

+ +

たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて justify-content に start を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ start の値は、アラビア語の文がページの右側から始まるので、右に移動します。

+ +

どちらの例も justify-content: start ですが、開始位置は書字方向によって異なります。

+ +

+ +

ベースライン配置

+ +

ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは justify-content および align-content による内容の配置、そして justify-self および align-self による自己配置の値として使用することができます。

+ + + +

justify-content または align-content のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。

+ +

ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は justify-self または align-self を使用する場合、あるいは justify-items または align-items を使用してこれらの値をグループとして設定する場合に行われます。

+ +

分配配置

+ +

分配配置キーワード は align-content および justify-content で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。

+ + + +

たとえばフレックスレイアウトでは、初期値の場合アイテムを flex-start で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 flex-direction が row のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。

+ +

+ +

フレックスコンテナーに justify-content: space-between を設定すると、余白はアイテム間に分配されます。

+ +

+ +

これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。

+ +

配置があふれた場合

+ +

safe および unsafe キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 safe キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 start で配置します。

+ +

unsafe を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。

+ +

ボックス間のギャップ

+ +

ボックス配置仕様書には、 gap, row-gap, column-gap も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。

+ +

gap プロパティは row-gap と column-gap の一括指定で、両プロパティを一度に設定することができます。

+ + + +

以下の例では、グリッドレイアウトで gap の一括指定を使用して、行トラック間に 10px のギャップと列トラック間に 2em のギャップを設定します。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

+ +

この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 gap プロパティはもともとグリッドレイアウト仕様書の中で grid- という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。

+ + + +

接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 grid-gap プロパティの次に gap を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。

+ +

また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。

+ +

レイアウト別の配置詳細ページ

+ +

CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。

+ + + +

リファレンス

+ +

CSS プロパティ

+ +
+ +
+ +

用語集の項目

+ +
+ +
+ +

ガイド

+ + + +

外部リソース

+ + diff --git a/files/ja/web/css/gap/index.html b/files/ja/web/css/gap/index.html deleted file mode 100644 index edc971b860..0000000000 --- a/files/ja/web/css/gap/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: gap (grid-gap) -slug: Web/CSS/gap -tags: - - CSS - - CSS グリッドレイアウト - - CSS フレックスボックスレイアウト - - CSS プロパティ - - CSS ボックス配置 - - CSS 段組みレイアウト - - Reference - - gap - - リファレンス -translation_of: Web/CSS/gap ---- -
{{CSSRef}}
- -

gap は CSS のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の一括指定です。

- -
{{EmbedInteractiveExample("pages/css/gap.html")}}
- - - -
-

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

-
- -

構文

- -
/* 単一の <length> 値 */
-gap: 20px;
-gap: 1em;
-gap: 3vmin;
-gap: 0.5cm;
-
-/* 単一の <percentage> 値 */
-gap: 16%;
-gap: 100%;
-
-/* 二つの <length> 値 */
-gap: 20px 10px;
-gap: 1em 0.5em;
-gap: 3vmin 2vmax;
-gap: 0.5cm 2mm;
-
-/* 一つ又は二つの <percentage> 値 */
-gap: 16% 100%;
-gap: 21px 82%;
-
-/* calc() 値 */
-gap: calc(10% + 20px);
-gap: calc(20px + 10%) calc(10% - 5px);
-
-/* グローバル値 */
-gap: inherit;
-gap: initial;
-gap: unset;
-
- -

このプロパティは <'row-gap'> の値と、任意で <'column-gap'> の値を続けて指定します。 <'column-gap'> が省略された場合、 <'row-gap'> と同じ値が設定されます。

- -

<'row-gap'> 及び <'column-gap'> はそれぞれ、 <length> 又は <percentage> で指定します。

- -

値

- -
-
{{CSSxRef("<length>")}}
-
グリッド線を隔てる溝の幅です。
-
{{CSSxRef("<percentage>")}}
-
要素の寸法に対する、グリッド線を隔てる溝の幅です。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

フレックスレイアウト

- -

HTML

- -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
- -

CSS

- -
#flexbox {
-  display: flex;
-  flex-wrap: wrap;
-  width: 300px;
-  gap: 20px 5px;
-}
-
-#flexbox > div {
-  border: 1px solid green;
-  background-color: lime;
-  flex: 1 1 auto;
-  width: 100px;
-  height: 50px;
-
-}
-
- -

結果

- -

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

- -

グリッドレイアウト

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- - - -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-  gap: 20px 5px;
-}
-
-#grid > div {
-  border: 1px solid green;
-  background-color: lime;
-}
-
- -

結果

- -

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

- -

段組みレイアウト

- -

HTML

- -
<p class="content-box">
-  This is some multi-column text with a 40px column
-  gap created with the CSS <code>gap</code> property.
-  Don't you think that's fun and exciting? I sure do!
-</p>
-
- -

CSS

- -
.content-box {
-  column-count: 3;
-  gap: 40px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

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

- -

{{Compat("css.properties.gap.flex_context")}}

- -

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

- -

{{Compat("css.properties.gap.grid_context")}}

- -

段組みレイアウトでの対応

- -

{{Compat("css.properties.gap.multicol_context")}}

- -

関連情報

- - diff --git a/files/ja/web/css/gap/index.md b/files/ja/web/css/gap/index.md new file mode 100644 index 0000000000..edc971b860 --- /dev/null +++ b/files/ja/web/css/gap/index.md @@ -0,0 +1,221 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックスレイアウト + - CSS プロパティ + - CSS ボックス配置 + - CSS 段組みレイアウト + - Reference + - gap + - リファレンス +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

gap は CSS のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/gap.html")}}
+ + + +
+

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

+
+ +

構文

+ +
/* 単一の <length> 値 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 単一の <percentage> 値 */
+gap: 16%;
+gap: 100%;
+
+/* 二つの <length> 値 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 一つ又は二つの <percentage> 値 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 値 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* グローバル値 */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

このプロパティは <'row-gap'> の値と、任意で <'column-gap'> の値を続けて指定します。 <'column-gap'> が省略された場合、 <'row-gap'> と同じ値が設定されます。

+ +

<'row-gap'> 及び <'column-gap'> はそれぞれ、 <length> 又は <percentage> で指定します。

+ +

値

+ +
+
{{CSSxRef("<length>")}}
+
グリッド線を隔てる溝の幅です。
+
{{CSSxRef("<percentage>")}}
+
要素の寸法に対する、グリッド線を隔てる溝の幅です。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

結果

+ +

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

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

結果

+ +

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

+ +

段組みレイアウト

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

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

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/justify-content/index.html b/files/ja/web/css/justify-content/index.html deleted file mode 100644 index 7ec2d466e2..0000000000 --- a/files/ja/web/css/justify-content/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: justify-content -slug: Web/CSS/justify-content -tags: - - CSS - - CSS プロパティ - - CSS ボックス配置 - - Reference - - justify-content - - place-content -translation_of: Web/CSS/justify-content ---- -
{{CSSRef}}
- -

CSS の justify-content プロパティは、フレックスコンテナーの{{Glossary("Main Axis", "主軸")}}およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

- -

このデモはグリッドレイアウトを用いていくつかの値を紹介します。

- -
{{EmbedInteractiveExample("pages/css/justify-content.html")}}
- - - -

長さや自動マージンが適用された後に配置が行われることから、フレックスボックスレイアウトで {{cssxref("flex-grow")}} が 0 ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

- -

構文

- -
/* 位置による配置 */
-justify-content: center;     /* アイテムを中央に寄せる */
-justify-content: start;      /* アイテムを先頭に寄せる */
-justify-content: end;        /* アイテムを末尾に寄せる */
-justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
-justify-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
-justify-content: left;       /* アイテムを左端に寄せる */
-justify-content: right;      /* アイテムを右端に寄せる */
-
-/* ベースラインによる配置 */
-/* justify-content はベースラインの値を取りません */
-
-/* 通常の配置 */
-justify-content: normal;
-
-/* 均等配置 */
-justify-content: space-between; /* 各アイテムを均等に配置し
-                                   最初のアイテムは先頭に寄せ、
-                                   最後のアイテムは末尾に寄せる */
-justify-content: space-around;  /* 各アイテムを均等に配置し
-                                   各アイテムの両側に半分の大きさの
-                                   間隔を置く */
-justify-content: space-evenly;  /* 各アイテムを均等に配置し
-                                   各アイテムの周りに同じ大きさの間隔を置く */
-justify-content: stretch;       /* 各アイテムを均等に配置し
-                                   サイズが 'auto' であるアイテムは、
-                                   コンテナーに合わせて引き伸ばす */
-
-/* あふれた場合の配置 */
-justify-content: safe center;
-justify-content: unsafe center;
-
-/* グローバル値 */
-justify-content: inherit;
-justify-content: initial;
-justify-content: unset;
-
- -

値

- -
-
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")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。

- -
-

メモ: stretch はフレキシブルボックス (フレックスボックス) は対応していません。

-
-
-
safe
-
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
-
unsafe
-
配置キーワードと共に使用します。アイテムと配置コンテナーの相対的な寸法にかかわらず、またあふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#container {
-  display: flex;
-  justify-content: space-between; /* live sample で変更可能 */
-}
-
-#container > div {
-  width: 100px;
-  height: 100px;
-  background: linear-gradient(-45deg, #788cff, #b4c8ff);
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Example", "100%", 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Box Alignment')}}[ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加
{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/justify-content/index.md b/files/ja/web/css/justify-content/index.md new file mode 100644 index 0000000000..7ec2d466e2 --- /dev/null +++ b/files/ja/web/css/justify-content/index.md @@ -0,0 +1,213 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +tags: + - CSS + - CSS プロパティ + - CSS ボックス配置 + - Reference + - justify-content + - place-content +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

CSS の justify-content プロパティは、フレックスコンテナーの{{Glossary("Main Axis", "主軸")}}およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

+ +

このデモはグリッドレイアウトを用いていくつかの値を紹介します。

+ +
{{EmbedInteractiveExample("pages/css/justify-content.html")}}
+ + + +

長さや自動マージンが適用された後に配置が行われることから、フレックスボックスレイアウトで {{cssxref("flex-grow")}} が 0 ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

+ +

構文

+ +
/* 位置による配置 */
+justify-content: center;     /* アイテムを中央に寄せる */
+justify-content: start;      /* アイテムを先頭に寄せる */
+justify-content: end;        /* アイテムを末尾に寄せる */
+justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
+justify-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
+justify-content: left;       /* アイテムを左端に寄せる */
+justify-content: right;      /* アイテムを右端に寄せる */
+
+/* ベースラインによる配置 */
+/* justify-content はベースラインの値を取りません */
+
+/* 通常の配置 */
+justify-content: normal;
+
+/* 均等配置 */
+justify-content: space-between; /* 各アイテムを均等に配置し
+                                   最初のアイテムは先頭に寄せ、
+                                   最後のアイテムは末尾に寄せる */
+justify-content: space-around;  /* 各アイテムを均等に配置し
+                                   各アイテムの両側に半分の大きさの
+                                   間隔を置く */
+justify-content: space-evenly;  /* 各アイテムを均等に配置し
+                                   各アイテムの周りに同じ大きさの間隔を置く */
+justify-content: stretch;       /* 各アイテムを均等に配置し
+                                   サイズが 'auto' であるアイテムは、
+                                   コンテナーに合わせて引き伸ばす */
+
+/* あふれた場合の配置 */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* グローバル値 */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+
+ +

値

+ +
+
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")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。

+ +
+

メモ: stretch はフレキシブルボックス (フレックスボックス) は対応していません。

+
+
+
safe
+
配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。
+
unsafe
+
配置キーワードと共に使用します。アイテムと配置コンテナーの相対的な寸法にかかわらず、またあふれることによってデータの損失が発生するかどうかにかかわらず、指定した値を尊重します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#container {
+  display: flex;
+  justify-content: space-between; /* live sample で変更可能 */
+}
+
+#container > div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Example", "100%", 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Box Alignment')}}[ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加
{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/justify-items/index.html b/files/ja/web/css/justify-items/index.html deleted file mode 100644 index b442c7889d..0000000000 --- a/files/ja/web/css/justify-items/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: justify-items -slug: Web/CSS/justify-items -tags: - - CSS - - CSS Box Alignment - - CSS Property - - CSS プロパティ - - CSS ボックス配置 - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/justify-items ---- -
{{CSSRef}}
- -

CSS の justify-items プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。

- -
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
- - - -

このプロパティの効果は、現在のレイアウトモードに依存します。

- - - -

構文

- -
/* 基本キーワード */
-justify-items: auto;
-justify-items: normal;
-justify-items: stretch;
-
-/* 位置による配置 */
-justify-items: center;     /* 中央付近にアイテムを集める */
-justify-items: start;      /* 先頭側にアイテムを集める */
-justify-items: end;        /* 末尾側にアイテムを集める */
-justify-items: flex-start; /* 'start' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
-justify-items: flex-end;   /* 'end' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
-justify-items: self-start;
-justify-items: self-end;
-justify-items: left;       /* 左側にアイテムを集める */
-justify-items: right;      /* 右側にアイテムを集める */
-
-/* ベースラインの配置 */
-justify-items: baseline;
-justify-items: first baseline;
-justify-items: last baseline;
-
-/* あふれたときの配置 (位置による配置時のみ) */
-justify-items: safe center;
-justify-items: unsafe center;
-
-/* 従来の配置 */
-justify-items: legacy right;
-justify-items: legacy left;
-justify-items: legacy center;
-
-/* グローバル値 */
-justify-items: inherit;
-justify-items: initial;
-justify-items: unset;
-
- -

このプロパティは４つの異なる形式のうち１つを取ることができます。

- - - -

値

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

例

- -

単純なデモ

- -

次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには justify-items の値として stretch (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。

- -

しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには justify-items の値である center が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。

- -

HTML

- -
<article class="container" tabindex="0">
-  <span>First child</span>
-  <span>Second child</span>
-  <span>Third child</span>
-  <span>Fourth child</span>
-</article>
- -

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;
-}
-
-article:hover, article:focus {
-  justify-items: center;
-}
-
-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)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/justify-items/index.md b/files/ja/web/css/justify-items/index.md new file mode 100644 index 0000000000..b442c7889d --- /dev/null +++ b/files/ja/web/css/justify-items/index.md @@ -0,0 +1,230 @@ +--- +title: justify-items +slug: Web/CSS/justify-items +tags: + - CSS + - CSS Box Alignment + - CSS Property + - CSS プロパティ + - CSS ボックス配置 + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/justify-items +--- +
{{CSSRef}}
+ +

CSS の justify-items プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。

+ +
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+ + + +

このプロパティの効果は、現在のレイアウトモードに依存します。

+ + + +

構文

+ +
/* 基本キーワード */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* 位置による配置 */
+justify-items: center;     /* 中央付近にアイテムを集める */
+justify-items: start;      /* 先頭側にアイテムを集める */
+justify-items: end;        /* 末尾側にアイテムを集める */
+justify-items: flex-start; /* 'start' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
+justify-items: flex-end;   /* 'end' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* 左側にアイテムを集める */
+justify-items: right;      /* 右側にアイテムを集める */
+
+/* ベースラインの配置 */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* あふれたときの配置 (位置による配置時のみ) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* 従来の配置 */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* グローバル値 */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+
+ +

このプロパティは４つの異なる形式のうち１つを取ることができます。

+ + + +

値

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

例

+ +

単純なデモ

+ +

次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには justify-items の値として stretch (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。

+ +

しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには justify-items の値である center が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。

+ +

HTML

+ +
<article class="container" tabindex="0">
+  <span>First child</span>
+  <span>Second child</span>
+  <span>Third child</span>
+  <span>Fourth child</span>
+</article>
+ +

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;
+}
+
+article:hover, article:focus {
+  justify-items: center;
+}
+
+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)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/justify-self/index.html b/files/ja/web/css/justify-self/index.html deleted file mode 100644 index 5f90a9d470..0000000000 --- a/files/ja/web/css/justify-self/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: justify-self -slug: Web/CSS/justify-self -tags: - - CSS - - CSS プロパティ - - CSS ボックス配置 - - リファレンス -translation_of: Web/CSS/justify-self ---- -
{{CSSRef}}
- -

CSS の justify-self プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。

- -
{{EmbedInteractiveExample("pages/css/justify-self.html")}}
- - - -

このプロパティの効果は、現在のレイアウトモードに依存します。

- - - -

構文

- -
/* 基本キーワード */
-justify-self: auto;
-justify-self: normal;
-justify-self: stretch;
-
-/* 位置による配置 */
-justify-self: center;     /* 中央付近にアイテムを集める */
-justify-self: start;      /* 開始側にアイテムを集める */
-justify-self: end;        /* 終端側にアイテムを集める */
-justify-self: flex-start; /* 開始側にフレックスアイテムを集める */
-justify-self: flex-end;   /* 終端側にフレックスアイテムを集める */
-justify-self: self-start;
-justify-self: self-end;
-justify-self: left;       /* 左側にアイテムを集める */
-justify-self: right;      /* 右側にアイテムを集める */
-
-/* ベースラインの配置 */
-justify-self: baseline;
-justify-self: first baseline;
-justify-self: last baseline;
-
-/* あふれたときの配置 (位置による配置時のみ) */
-justify-self: safe center;
-justify-self: unsafe center;
-
-/* グローバル値 */
-justify-self: inherit;
-justify-self: initial;
-justify-self: unset;
-
- -

このプロパティは３つの異なる形式のうち１つを取ることができます。

- - - -

値

- -
-
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
-
アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
-
- -

形式文法

- -{{CSSSyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの対応

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/justify-self/index.md b/files/ja/web/css/justify-self/index.md new file mode 100644 index 0000000000..5f90a9d470 --- /dev/null +++ b/files/ja/web/css/justify-self/index.md @@ -0,0 +1,162 @@ +--- +title: justify-self +slug: Web/CSS/justify-self +tags: + - CSS + - CSS プロパティ + - CSS ボックス配置 + - リファレンス +translation_of: Web/CSS/justify-self +--- +
{{CSSRef}}
+ +

CSS の justify-self プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。

+ +
{{EmbedInteractiveExample("pages/css/justify-self.html")}}
+ + + +

このプロパティの効果は、現在のレイアウトモードに依存します。

+ + + +

構文

+ +
/* 基本キーワード */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* 位置による配置 */
+justify-self: center;     /* 中央付近にアイテムを集める */
+justify-self: start;      /* 開始側にアイテムを集める */
+justify-self: end;        /* 終端側にアイテムを集める */
+justify-self: flex-start; /* 開始側にフレックスアイテムを集める */
+justify-self: flex-end;   /* 終端側にフレックスアイテムを集める */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* 左側にアイテムを集める */
+justify-self: right;      /* 右側にアイテムを集める */
+
+/* ベースラインの配置 */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* あふれたときの配置 (位置による配置時のみ) */
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* グローバル値 */
+justify-self: inherit;
+justify-self: initial;
+justify-self: unset;
+
+ +

このプロパティは３つの異なる形式のうち１つを取ることができます。

+ + + +

値

+ +
+
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
+
アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの対応

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/place-content/index.html b/files/ja/web/css/place-content/index.html deleted file mode 100644 index 0ffb456baf..0000000000 --- a/files/ja/web/css/place-content/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: place-content -slug: Web/CSS/place-content -tags: - - CSS - - CSS プロパティ - - CSS ボックス配置 - - Reference - - align-content - - justify-content - - place-content - - リファレンス -translation_of: Web/CSS/place-content ---- -
{{CSSRef}}
- -

CSS の place-content プロパティは、 {{CSSxRef("align-content")}} および {{CSSxRef("justify-content")}} の一括指定です。これらの配置方法を利用するどのレイアウト方法でも使用することができます。

- -
{{EmbedInteractiveExample("pages/css/place-content.html")}}
- - - -

構文

- -
/* 位置による配置 */
-/* align-content は left 及び right の値を取りません */
-place-content: center start;
-place-content: start center;
-place-content: end left;
-place-content: flex-start center;
-place-content: flex-end center;
-
-/* ベースラインによる配置 */
-/* justify-content は baseline の値を取りません */
-place-content: baseline center;
-place-content: first baseline space-evenly;
-place-content: last baseline right;
-
-/* 均等配置 */
-place-content: space-between space-evenly;
-place-content: space-around space-evenly;
-place-content: space-evenly stretch;
-place-content: stretch space-evenly;
-
-/* グローバル値 */
-place-content: inherit;
-place-content: initial;
-place-content: unset;
- -

最初の値は {{CSSxRef("align-content")}} プロパティ値で、二番目の値は {{CSSxRef("justify-content")}} の値です。

- -
-

重要: 二番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。

-
- -

値

- -
-
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")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

CSS

- -
#container {
-  display: flex;
-  height:240px;
-  width: 240px;
-  flex-wrap: wrap;
-  background-color: #8c8c8c;
-  writing-mode: horizontal-tb; /* Can be changed in the live sample */
-  direction: ltr; /* Can be changed in the live sample */
-  place-content: flex-end center; /* Can be changed in the live sample */
-}
-
-div > div {
-  border: 2px solid #8c8c8c;
-  width: 50px;
-  background-color: #a0c8ff;
-}
-
-.small {
-  font-size: 12px;
-  height: 40px;
-}
-
-.large {
-  font-size: 14px;
-  height: 50px;
-}
-
- -

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

結果

- -

{{EmbedLiveSample("Example", "370", "300")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの対応

- -
{{Compat("css.properties.place-content")}}
- -

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

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

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

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

関連情報

- - diff --git a/files/ja/web/css/place-content/index.md b/files/ja/web/css/place-content/index.md new file mode 100644 index 0000000000..0ffb456baf --- /dev/null +++ b/files/ja/web/css/place-content/index.md @@ -0,0 +1,252 @@ +--- +title: place-content +slug: Web/CSS/place-content +tags: + - CSS + - CSS プロパティ + - CSS ボックス配置 + - Reference + - align-content + - justify-content + - place-content + - リファレンス +translation_of: Web/CSS/place-content +--- +
{{CSSRef}}
+ +

CSS の place-content プロパティは、 {{CSSxRef("align-content")}} および {{CSSxRef("justify-content")}} の一括指定です。これらの配置方法を利用するどのレイアウト方法でも使用することができます。

+ +
{{EmbedInteractiveExample("pages/css/place-content.html")}}
+ + + +

構文

+ +
/* 位置による配置 */
+/* align-content は left 及び right の値を取りません */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* ベースラインによる配置 */
+/* justify-content は baseline の値を取りません */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* 均等配置 */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* グローバル値 */
+place-content: inherit;
+place-content: initial;
+place-content: unset;
+ +

最初の値は {{CSSxRef("align-content")}} プロパティ値で、二番目の値は {{CSSxRef("justify-content")}} の値です。

+ +
+

重要: 二番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。

+
+ +

値

+ +
+
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")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

CSS

+ +
#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Can be changed in the live sample */
+  direction: ltr; /* Can be changed in the live sample */
+  place-content: flex-end center; /* Can be changed in the live sample */
+}
+
+div > div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+
+ +

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

結果

+ +

{{EmbedLiveSample("Example", "370", "300")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの対応

+ +
{{Compat("css.properties.place-content")}}
+ +

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

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

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

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

関連情報

+ + diff --git a/files/ja/web/css/place-items/index.html b/files/ja/web/css/place-items/index.html deleted file mode 100644 index 6c79e3e785..0000000000 --- a/files/ja/web/css/place-items/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: place-items -slug: Web/CSS/place-items -tags: - - CSS - - CSS グリッドレイアウト - - CSS フレックスボックスレイアウト - - CSS プロパティ - - CSS ボックス配置 - - Reference -translation_of: Web/CSS/place-items ---- -
{{CSSRef}}
- -

CSS の place-items 一括指定プロパティは、 {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。

- -
{{EmbedInteractiveExample("pages/css/place-items.html")}}
- - - -

構文

- -
/* キーワード値 */
-place-items: auto center;
-place-items: normal start;
-
-/* 位置による配置 */
-place-items: center normal;
-place-items: start auto;
-place-items: end normal;
-place-items: self-start auto;
-place-items: self-end normal;
-place-items: flex-start auto;
-place-items: flex-end normal;
-place-items: left auto;
-place-items: right normal;
-
-/* ベースラインによる配置 */
-place-items: baseline normal;
-place-items: first baseline auto;
-place-items: last baseline normal;
-place-items: stretch auto;
-
-/* グローバル値 */
-place-items: inherit;
-place-items: initial;
-place-items: unset;
-
- -

値

- -
-
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")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

CSS

- -
#container {
-  height:200px;
-  width: 240px;
-  place-items: center; /* 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);
-}
-
- - - -

Result

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/place-items/index.md b/files/ja/web/css/place-items/index.md new file mode 100644 index 0000000000..6c79e3e785 --- /dev/null +++ b/files/ja/web/css/place-items/index.md @@ -0,0 +1,277 @@ +--- +title: place-items +slug: Web/CSS/place-items +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックスレイアウト + - CSS プロパティ + - CSS ボックス配置 + - Reference +translation_of: Web/CSS/place-items +--- +
{{CSSRef}}
+ +

CSS の place-items 一括指定プロパティは、 {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。

+ +
{{EmbedInteractiveExample("pages/css/place-items.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+place-items: auto center;
+place-items: normal start;
+
+/* 位置による配置 */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* ベースラインによる配置 */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* グローバル値 */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+
+ +

値

+ +
+
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")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* 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);
+}
+
+ + + +

Result

+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/place-self/index.html b/files/ja/web/css/place-self/index.html deleted file mode 100644 index 4d9c85f610..0000000000 --- a/files/ja/web/css/place-self/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: place-self -slug: Web/CSS/place-self -tags: - - CSS - - CSS プロパティ - - CSS ボックス配置 - - place-self - - リファレンス -translation_of: Web/CSS/place-self ---- -
{{CSSRef}}
- -

CSS の place-self プロパティは、 {{cssxref("align-self")}} および {{cssxref("justify-self")}} プロパティの両方を設定する一括指定プロパティです。最初の値は align-self プロパティの値で、二番目の値は justify-self プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。

- -
{{EmbedInteractiveExample("pages/css/place-self.html")}}
- - - -

構文

- -
/* キーワード値 */
-place-self: auto center;
-place-self: normal start;
-
-/* 位置による配置 */
-place-self: center normal;
-place-self: start auto;
-place-self: end normal;
-place-self: self-start auto;
-place-self: self-end normal;
-place-self: flex-start auto;
-place-self: flex-end normal;
-place-self: left auto;
-place-self: right normal;
-
-/* ベースラインによる配置 */
-place-self: baseline normal;
-place-self: first baseline auto;
-place-self: last baseline normal;
-place-self: stretch auto;
-
-/* グローバル値 */
-place-self: inherit;
-place-self: initial;
-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 が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。
-
- -

形式文法

- -{{CSSSyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの対応

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/place-self/index.md b/files/ja/web/css/place-self/index.md new file mode 100644 index 0000000000..4d9c85f610 --- /dev/null +++ b/files/ja/web/css/place-self/index.md @@ -0,0 +1,126 @@ +--- +title: place-self +slug: Web/CSS/place-self +tags: + - CSS + - CSS プロパティ + - CSS ボックス配置 + - place-self + - リファレンス +translation_of: Web/CSS/place-self +--- +
{{CSSRef}}
+ +

CSS の place-self プロパティは、 {{cssxref("align-self")}} および {{cssxref("justify-self")}} プロパティの両方を設定する一括指定プロパティです。最初の値は align-self プロパティの値で、二番目の値は justify-self プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。

+ +
{{EmbedInteractiveExample("pages/css/place-self.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+place-self: auto center;
+place-self: normal start;
+
+/* 位置による配置 */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+place-self: left auto;
+place-self: right normal;
+
+/* ベースラインによる配置 */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* グローバル値 */
+place-self: inherit;
+place-self: initial;
+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 が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの対応

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/row-gap/index.html b/files/ja/web/css/row-gap/index.html deleted file mode 100644 index f67c07b0ec..0000000000 --- a/files/ja/web/css/row-gap/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: row-gap (grid-row-gap) -slug: Web/CSS/row-gap -tags: - - CSS - - CSS Flexible Boxes - - CSS Grid - - CSS Property - - Reference - - recipe:css-property - - row-gap -translation_of: Web/CSS/row-gap ---- -
{{CSSRef}}
- -

row-gap は CSS のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。

- -
{{EmbedInteractiveExample("pages/css/row-gap.html")}}
- -

構文

- -
/* <length> 値 */
-row-gap: 20px;
-row-gap: 1em;
-row-gap: 3vmin;
-row-gap: 0.5cm;
-
-/* <percentage> 値 */
-row-gap: 10%;
-
-/* Global values */
-row-gap: inherit;
-row-gap: initial;
-row-gap: unset;
-
- -

値

- -
-
<length-percentage>
-
行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フレックスレイアウト

- -

HTML

- -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
- -

CSS

- -
#flexbox {
-  display: flex;
-  flex-wrap: wrap;
-  width: 300px;
-  row-gap: 20px;
-}
-
-#flexbox > div {
-  border: 1px solid green;
-  background-color: lime;
-  flex: 1 1 auto;
-  width: 100px;
-  height: 50px;
-}
-
- -

結果

- -

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

- -

グリッドレイアウト

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template-columns: 200px;
-  grid-template-rows: repeat(3, 1fr);
-  row-gap: 20px;
-}
-
-#grid > div {
-  border: 1px solid green;
-  background-color: lime;
-}
-
- -

結果

- -

{{EmbedLiveSample('Grid_layout', 'auto', 120)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

{{Compat("css.properties.row-gap.flex_context")}}

- -

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

- -

{{Compat("css.properties.row-gap.grid_context")}}

- -

関連情報

- - diff --git a/files/ja/web/css/row-gap/index.md b/files/ja/web/css/row-gap/index.md new file mode 100644 index 0000000000..f67c07b0ec --- /dev/null +++ b/files/ja/web/css/row-gap/index.md @@ -0,0 +1,154 @@ +--- +title: row-gap (grid-row-gap) +slug: Web/CSS/row-gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS Property + - Reference + - recipe:css-property + - row-gap +translation_of: Web/CSS/row-gap +--- +
{{CSSRef}}
+ +

row-gap は CSS のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/row-gap.html")}}
+ +

構文

+ +
/* <length> 値 */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* <percentage> 値 */
+row-gap: 10%;
+
+/* Global values */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+
+ +

値

+ +
+
<length-percentage>
+
行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+
+ +

結果

+ +

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

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Grid_layout', 'auto', 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

{{Compat("css.properties.row-gap.flex_context")}}

+ +

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

+ +

{{Compat("css.properties.row-gap.grid_context")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf