aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/css_logical_properties/index.html
blob: 71c78974aac0e1916dada42ed9c3f63f5e2c25a4 (plain)
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
---
title: CSS 論理的プロパティと値
slug: Web/CSS/CSS_Logical_Properties
tags:
  - CSS
  - CSS Logical Properties
  - CSS 論理的プロパティ
  - Landing
  - Reference
  - 概要
translation_of: Web/CSS/CSS_Logical_Properties
---
<p>{{CSSRef}}</p>

<p class="summary"><ruby><strong>CSS 論理的プロパティと値</strong><rp> (</rp><rt>CSS Logical Properties and Values</rt><rp>) </rp></ruby><a href="/ja/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。</p>

<p>このモジュールは以前に <abbr title="Cascading Stylesheets">CSS</abbr> 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。</p>

<h3 id="Block_vs._inline" name="Block_vs._inline">ブロックとインライン</h3>

<p>論理プロパティと値は、<em>ブロック</em><em>インライン</em>という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存します。</p>

<dl>
 <dt id="block-dimension">ブロック方向</dt>
 <dd>行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。</dd>
 <dt id="inline-dimension">インライン方向</dt>
 <dd>行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。</dd>
</dl>

<h2 id="Reference" name="Reference">リファレンス</h2>

<h3 id="Properties_for_sizing" name="Properties_for_sizing">寸法のプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("block-size")}}</li>
 <li>{{CSSxRef("inline-size")}}</li>
 <li>{{CSSxRef("max-block-size")}}</li>
 <li>{{CSSxRef("max-inline-size")}}</li>
 <li>{{CSSxRef("min-block-size")}}</li>
 <li>{{CSSxRef("min-inline-size")}}</li>
</ul>
</div>

<h3 id="Properties_for_margins_borders_and_padding" name="Properties_for_margins_borders_and_padding">マージン、境界、パディングのプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("border-block")}}</li>
 <li>{{CSSxRef("border-block-color")}}</li>
 <li>{{CSSxRef("border-block-end")}}</li>
 <li>{{CSSxRef("border-block-end-color")}}</li>
 <li>{{CSSxRef("border-block-end-style")}}</li>
 <li>{{CSSxRef("border-block-end-width")}}</li>
 <li>{{CSSxRef("border-block-start")}}</li>
 <li>{{CSSxRef("border-block-start-color")}}</li>
 <li>{{CSSxRef("border-block-start-style")}}</li>
 <li>{{CSSxRef("border-block-start-width")}}</li>
 <li>{{CSSxRef("border-block-style")}}</li>
 <li>{{CSSxRef("border-block-width")}}</li>
 <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("border-inline")}}</li>
 <li>{{CSSxRef("border-inline-color")}}</li>
 <li>{{CSSxRef("border-inline-end")}}</li>
 <li>{{CSSxRef("border-inline-end-color")}}</li>
 <li>{{CSSxRef("border-inline-end-style")}}</li>
 <li>{{CSSxRef("border-inline-end-width")}}</li>
 <li>{{CSSxRef("border-inline-start")}}</li>
 <li>{{CSSxRef("border-inline-start-color")}}</li>
 <li>{{CSSxRef("border-inline-start-style")}}</li>
 <li>{{CSSxRef("border-inline-start-width")}}</li>
 <li>{{CSSxRef("border-inline-style")}}</li>
 <li>{{CSSxRef("border-inline-width")}}</li>
 <li>{{CSSxRef("border-start-start-radius")}}</li>
 <li>{{CSSxRef("border-start-end-radius")}}</li>
 <li>{{CSSxRef("border-end-start-radius")}}</li>
 <li>{{CSSxRef("border-end-end-radius")}}</li>
 <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("margin-block")}}</li>
 <li>{{CSSxRef("margin-block-end")}}</li>
 <li>{{CSSxRef("margin-block-start")}}</li>
 <li>{{CSSxRef("margin-inline")}}</li>
 <li>{{CSSxRef("margin-inline-end")}}</li>
 <li>{{CSSxRef("margin-inline-start")}}</li>
 <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("padding-block")}}</li>
 <li>{{CSSxRef("padding-block-end")}}</li>
 <li>{{CSSxRef("padding-block-start")}}</li>
 <li>{{CSSxRef("padding-inline")}}</li>
 <li>{{CSSxRef("padding-inline-end")}}</li>
 <li>{{CSSxRef("padding-inline-start")}}</li>
</ul>
</div>

<h3 id="Properties_for_floating_and_positioning" name="Properties_for_floating_and_positioning">浮動と位置指定のプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
 <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
 <li>{{CSSxRef("inset")}}</li>
 <li>{{CSSxRef("inset-block")}}</li>
 <li>{{CSSxRef("inset-block-end")}}</li>
 <li>{{CSSxRef("inset-block-start")}}</li>
 <li>{{CSSxRef("inset-inline")}}</li>
 <li>{{CSSxRef("inset-inline-end")}}</li>
 <li>{{CSSxRef("inset-inline-start")}}</li>
</ul>
</div>

<h3 id="Other_properties" name="Other_properties">その他のプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
 <li>{{CSSxRef("overflow-block")}}</li>
 <li>{{CSSxRef("overflow-inline")}}</li>
 <li>{{CSSxRef("overscroll-behavior-block")}}</li>
 <li>{{CSSxRef("overscroll-behavior-inline")}}</li>
 <li>{{CSSxRef("resize")}} (<code>block</code> and <span style="white-space: nowrap;"><code>inline</code> keywords)</span></li>
 <li>{{CSSxRef("text-align")}} (<code>end</code> および <span style="white-space: nowrap;"><code>start</code> キーワード)</span></li>
</ul>
</div>

<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨になったプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-end")}} {{Experimental_Inline}} に置き換え)</span></li>
 <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-start")}} {{Experimental_Inline}} に置き換え)</span></li>
 <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-end")}} {{Experimental_Inline}} に置き換え)</span></li>
 <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-start")}} {{Experimental_Inline}} に置き換え)</span></li>
</ul>
</div>

<h2 id="Guides" name="Guides">ガイド</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">論理的プロパティと値の基本概念</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Sizing">寸法の論理的プロパティ</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">マージン、境界、パディングの論理的プロパティ</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">浮動と位置指定の論理的プロパティ</a></li>
</ul>

<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("CSS Logical Properties")}}</td>
   <td>{{Spec2("CSS Logical Properties")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>全般的な対応:</p>

<ul>
 <li>Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。</li>
 <li>Chrome はバージョン69から、プロパティの対応付けに対応しました。</li>
 <li>Edge はバージョン79から Chrome と同様に対応しています。</li>
 <li>Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。</li>
 <li>Internet Explorer は対応していません。</li>
</ul>

<p>互換性情報全体は、それぞれのプロパティページを参照してください。</p>