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-items/index.html | 230 ------------------------------ 1 file changed, 230 deletions(-) delete mode 100644 files/ja/web/css/justify-items/index.html (limited to 'files/ja/web/css/justify-items/index.html') 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")}}

- -

関連情報

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