From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/place-content/index.html | 254 ++++++++++++++++++++++++++++++ 1 file changed, 254 insertions(+) create mode 100644 files/ja/web/css/place-content/index.html (limited to 'files/ja/web/css/place-content/index.html') diff --git a/files/ja/web/css/place-content/index.html b/files/ja/web/css/place-content/index.html new file mode 100644 index 0000000000..97e92102d4 --- /dev/null +++ b/files/ja/web/css/place-content/index.html @@ -0,0 +1,254 @@ +--- +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}}
+ +

CSSplace-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 の代替配置は startlast 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")}}
+ +

関連情報

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