initial commit

1 files changed, 232 insertions, 0 deletions

diff --git a/files/ja/web/css/justify-items/index.html b/files/ja/web/css/justify-items/index.html
new file mode 100644
index 0000000000..b3788140b8
--- /dev/null
+++ b/files/ja/web/css/justify-items/index.html
@@ -0,0 +1,232 @@
+---
+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
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-items</code></strong> プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>このプロパティの効果は、現在のレイアウトモードに依存します。</p>
+
+<ul>
+ <li>ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。</li>
+ <li>絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。</li>
+ <li>表のセルレイアウトでは、このプロパティは<em>無視されます</em> (絶対配置及び表レイアウトのブロック内の配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">こちら</a>)</li>
+ <li>フレックスボックスレイアウトでは、このプロパティは<em>無視されます</em> (フレックスボックス内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">こちら</a>)</li>
+ <li>グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">こちら</a>)</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 基本キーワード */
+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;
+</pre>
+
+<p>このプロパティは４つの異なる形式のうち１つを取ることができます。</p>
+
+<ul>
+ <li>基本キーワード: キーワード値 <code>normal</code>, <code>auto</code>, <code>stretch</code> のうちの一つ。</li>
+ <li>ベースラインによる配置: <code>baseline</code> キーワードに加えて、任意で <code>first</code> または <code>last</code> のどちらか。</li>
+ <li>位置による配置: <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, <code>right</code> のうちの一つ。加えて任意で <code>safe</code> または <code>unsafe</code>。</li>
+ <li>歴史的な配置: <code>legacy</code> キーワードに続いて、 <code>left</code> または <code>right</code> のどちらかの値。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用される値は、ボックスに親があれば、親ボックスの <code>justify-items</code> プロパティ、そうでなければ絶対位置であり、このような場合、 <code>auto</code> は <code>normal</code> を表します。</dd>
+ <dt><code>normal</code></dt>
+ <dd>このキーワードの効果は、現在のレイアウトモードに依存します。
+ <ul>
+  <li>ブロックレベルレイアウトでは、このキーワードは <code>start</code> の別名です。</li>
+  <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように動作し、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように動作します。</li>
+  <li>表のセルレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li>
+  <li>フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li>
+  <li>グリッドレイアウトでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように振舞います。</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>アイテムは適切な軸で配置コンテナーの先頭側に向かって、互いに接するように詰められます。</dd>
+ <dt><code>end</code></dt>
+ <dd>アイテムは適切な軸で配置コンテナーの末尾側に向かって、互いに接するように詰められます。</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>start</code> のように扱われます。</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>end</code> のように扱われます。</dd>
+ <dt><code>self-start</code></dt>
+ <dd>アイテムは適切な軸で、アイテムの先頭側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd>
+ <dt><code>self-end</code></dt>
+ <dd>アイテムは適切な軸で、アイテムの末尾側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd>
+ <dt><code>center</code></dt>
+ <dd>アイテムは配置コンテナーの中央で、互いに接するように詰められます。</dd>
+ <dt><code>left</code></dt>
+ <dd>アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は <code>start</code> のように動作します。</dd>
+ <dt><code>right</code></dt>
+ <dd>アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は <code>start</code> のように動作します。</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br>
+ <code>first baseline</code> の代替配置は <code>start</code>、 <code>last baseline</code> の代替配置は <code>end</code> です。</dd>
+ <dt><code>stretch</code></dt>
+ <dd>アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が <code>auto</code> であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。</dd>
+ <dt><code>safe</code></dt>
+ <dd>アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが <code>start</code> であったかのように配置されます。</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。</dd>
+ <dt><code>legacy</code></dt>
+ <dd>値がボックスの子孫に継承されるようにします。なお、子孫が <code>justify-self: auto</code> の値を持っている場合、 <code>legacy</code> キーワードは子孫からは考慮されず、関連付けられた <code>left</code>, <code>right</code>, <code>center</code> の値のみが継承されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_demonstration" name="Simple_demonstration">単純なデモ</h3>
+
+<p>次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには <code>justify-items</code> の値として <code>stretch</code> (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。</p>
+
+<p>しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには <code>justify-items</code> の値である <code>center</code> が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article class="container" tabindex="0"&gt;
+  &lt;span&gt;First child&lt;/span&gt;
+  &lt;span&gt;Second child&lt;/span&gt;
+  &lt;span&gt;Third child&lt;/span&gt;
+  &lt;span&gt;Fourth child&lt;/span&gt;
+&lt;/article&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">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;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.justify-items.grid_context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></em></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS ボックス配置</a></li>
+ <li>{{CSSxRef("place-items")}} 一括指定プロパティ</li>
+ <li>{{CSSxRef("justify-self")}} プロパティ</li>
+ <li>{{CSSxRef("align-items")}} プロパティ</li>
+</ul>