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/justify-self/index.md | 162 +++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/ja/web/css/justify-self/index.md (limited to 'files/ja/web/css/justify-self/index.md') 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")}}

+ +

関連情報

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