files/ja/web/css/box-align/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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>