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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: justify-self
slug: Web/CSS/justify-self
tags:
- CSS
- CSS プロパティ
- CSS ボックス配置
- リファレンス
translation_of: Web/CSS/justify-self
---
<div>{{CSSRef}}</div>
<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-self</code></strong> プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。</p>
<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<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">/* 基本キーワード */
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;
</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>位置による配置:
<ul>
<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> のうちの一つ。</li>
<li>加えて任意で <code>safe</code> 又は <code>unsafe</code>。</li>
</ul>
</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>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{CSSSyntax}}
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th>仕様書</th>
<th>状態</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}</td>
<td>{{Spec2("CSS3 Box Alignment")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{CSSInfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
<p>{{Compat("css.properties.justify-self.flex_context")}}</p>
<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
<p>{{Compat("css.properties.justify-self.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("justify-items")}} プロパティ</li>
</ul>
|
