initial commit

1 files changed, 146 insertions, 0 deletions

diff --git a/files/ja/web/css/box-align/index.html b/files/ja/web/css/box-align/index.html
new file mode 100644
index 0000000000..6ad0ca4bc0
--- /dev/null
+++ b/files/ja/web/css/box-align/index.html
@@ -0,0 +1,146 @@
+---
+title: box-align
+slug: Web/CSS/box-align
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/box-align
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}</div>
+
+<p><strong><code>box-align</code></strong> は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。</p>
+
+<p>現在の標準仕様に関する情報については、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を確認してください。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>配置する方向は、その要素の向き (水平か垂直か) に依存します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-align</code> プロパティは、 以下に記載する値で定義されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。</dd>
+ <dt><code>center</code></dt>
+ <dd>ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。</dd>
+ <dt><code>end</code></dt>
+ <dd>ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。</dd>
+ <dt><code>baseline</code></dt>
+ <dd>ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。</dd>
+ <dt><code>stretch</code></dt>
+ <dd>ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;CSS box-align example&lt;/title&gt;
+&lt;style&gt;
+div.example {
+  display: box;                   /* 仕様書通り */
+  display: -moz-box;              /* Mozilla */
+  display: -webkit-box;           /* WebKit */
+
+  /* ボックスの高さを子要素より高くし、
+     box-pack のためのスペースを確保する */
+  height: 400px;
+
+  /* ボックスの幅を子要素より広くし、
+     box-align のためのスペースを確保する */
+  width: 300px;
+
+  /* 子要素の向きは垂直方向にする */
+  box-orient: vertical;           /* 仕様書通り */
+  -moz-box-orient: vertical;      /* Mozilla */
+  -webkit-box-orient: vertical;   /* WebKit */
+
+  /* 子要素をボックス内の水平方向に対して中央に整列させる */
+  box-align: center;              /* 仕様書通り */
+  -moz-box-align: center;         /* Mozilla */
+  -webkit-box-align: center;      /* WebKit */
+
+  /* 子要素をボックス内の終端に寄せる */
+  box-pack: end;                  /* 仕様書通り */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example &gt; p {
+  /* 子要素を親要素の幅より狭くし、
+  box-align のためのスペースを確保する */
+  width: 200px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div class="example"&gt;
+    &lt;p&gt;I will be second from the bottom of div.example, centered horizontally.&lt;/p&gt;
+    &lt;p&gt;I will be on the bottom of div.example, centered horizontally.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>配置の用途で <em>start</em> と定義されるボックスの辺は、ボックスの向きに依存します。</p>
+
+<table class="standard-table" style="text-align: center;">
+ <tbody>
+  <tr>
+   <th style="text-align: right;"><strong>Horizontal</strong></th>
+   <td>top</td>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Vertical</strong></th>
+   <td>left</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>start と反対方向の辺が <em>end</em> と定義されます。</p>
+
+<p>その要素の <code>align</code> 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Flexible Box Layout Module (W3C Working Draft)</a> {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Old Flexible Box Layout Module</a> {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力してくださるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.box-align")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("align-items")}}, {{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-pack")}}</li>
+</ul>