回答編集履歴
4
markdown
test
CHANGED
|
@@ -170,6 +170,8 @@
|
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
|
173
|
+
|
|
174
|
+
|
|
173
175
|
- `<span style="display: block">` はインライン要素であり、ブロックボックスです
|
|
174
176
|
|
|
175
177
|
- `<div style="display: inline">` はブロックレベル要素であり、インラインボックスです
|
3
「ブロックレベル要素とインライン要素」の説明を大幅に書き換え
test
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
HTML4.01仕様。
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
@@ -52,47 +52,33 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
+
> ##### 7.5.3 ブロックレベル要素と行内要素
|
|
56
|
+
|
|
57
|
+
> HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。 この違いは、幾つかの点から明らかにされる。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
55
|
-
|
|
61
|
+
行内要素とは**インライン要素(inline element)**のことです。
|
|
62
|
+
|
|
56
|
-
|
|
63
|
+
HTML4.01Strictではbody要素直下にはブロックレベル要素のみを配置できます。
|
|
57
|
-
|
|
58
|
-
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
59
|
-
---
|
|
67
|
+
---
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
68
|
+
|
|
64
|
-
|
|
65
|
-
|
|
69
|
+
|
|
66
|
-
|
|
67
|
-
|
|
70
|
+
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
CSS仕様。
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
74
|
+
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
- CSSを適用しても、HTMLの文法には影響がありません
|
|
84
|
-
|
|
85
|
-
- `display: block` を宣言しても、**インライン要素はブロックレベル要素に変化しません**
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
---
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
- [CSS Display Module Level 3](https://drafts.csswg.org/css-display/#the-display-properties)
|
|
75
|
+
- [2. Box Layout Modes: the display property - CSS Display Module Level 3](https://drafts.csswg.org/css-display/#the-display-properties)
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
94
|
-
|
|
79
|
+
> ##### 2. Box Layout Modes: the display property
|
|
80
|
+
|
|
95
|
-
|
|
81
|
+
> ...中略...
|
|
96
82
|
|
|
97
83
|
> |Short display|Full display|Generated box|
|
|
98
84
|
|
|
@@ -100,9 +86,125 @@
|
|
|
100
86
|
|
|
101
87
|
> |'block'|'block flow'|block-level block container aka block box|
|
|
102
88
|
|
|
103
|
-
|
|
89
|
+
> |'inline'|'inline flow'|inline box aka inline block|
|
|
104
|
-
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
105
|
-
`display: block`
|
|
93
|
+
- `display: block` は**ブロックボックス(block box)**を生成します
|
|
94
|
+
|
|
95
|
+
- `display: inline` は**インラインボックス(inline box)**を生成します
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
下記HTMLを「W3C Markup Validation」で検証するとします。
|
|
104
|
+
|
|
105
|
+
HTML4.01Strictの「body要素直下にはブロックレベル要素のみを配置できる制限」を回避する為に、`display:block`で**ブロックレベル要素**に変化させられるか確かめます。
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
- [The W3C Markup Validation Service](https://validator.w3.org/)
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
```HTML
|
|
114
|
+
|
|
115
|
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
116
|
+
|
|
117
|
+
<html>
|
|
118
|
+
|
|
119
|
+
<head>
|
|
120
|
+
|
|
121
|
+
<title>sample</title>
|
|
122
|
+
|
|
123
|
+
</head>
|
|
124
|
+
|
|
125
|
+
<body>
|
|
126
|
+
|
|
127
|
+
<span style="display: block">span</span>
|
|
128
|
+
|
|
129
|
+
<div>div</div>
|
|
130
|
+
|
|
131
|
+
</body>
|
|
132
|
+
|
|
133
|
+
</html>
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
span要素を書いた7行目で下記エラーが出力されます。
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Error Line 7, Column 29: document type does not allow element "SPAN" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
ここで `<span>, <div>` をHTML4.01/CSSの名称で表すと、次のように分類されます。
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|HTMLタグ|インライン要素(HTML4.01)|ブロックレベル要素(HTML4.01)|インラインボックス(CSS)|ブロックボックス(CSS)|
|
|
160
|
+
|
|
161
|
+
|:--|:--|:--|:--|:--|
|
|
162
|
+
|
|
163
|
+
|`<span>`|○|×|○|×|
|
|
164
|
+
|
|
165
|
+
|`<span style="display: block">`|○|×|×|○|
|
|
166
|
+
|
|
167
|
+
|`<div>`|×|○|×|○|
|
|
168
|
+
|
|
169
|
+
|`<div style="display: inline">`|×|○|○|×|
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
- `<span style="display: block">` はインライン要素であり、ブロックボックスです
|
|
174
|
+
|
|
175
|
+
- `<div style="display: inline">` はブロックレベル要素であり、インラインボックスです
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
このように解釈すれば、HTML4.01仕様、CSS仕様のそれぞれの規定を矛盾がないことが分かります。
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
---
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
翻って冒頭の質問に戻ると、
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
> bodyタグにtext align centerをかけており、孫要素のspan２にtext align centerが継承されると思っています。spanはインライン要素のため、中のテキスト「テストです。」は中央配置にならないと思っていたら、ブラウザで確認すると、中央配置になりました。
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
spanがインライン要素であることに言及していますが、`text-align` プロパティが見ているのは要素区分ではなく、**ボックス**なので、
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
```HTML
|
|
200
|
+
|
|
201
|
+
<span style="display: block; border: solid 1px black; text-align: center">span</span>
|
|
202
|
+
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
このように、インライン要素であり、**ブロックボックス**でもある要素には `text-align` プロパティを適用できます。
|
|
106
208
|
|
|
107
209
|
|
|
108
210
|
|
2
display: block
test
CHANGED
|
@@ -23,6 +23,20 @@
|
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
text-alignは子孫要素に継承しますが、`display: inline` なspan要素は**適用対象(ブロックコンテナ)ではない**為、作用しません。
|
|
26
|
+
|
|
27
|
+
継承はされるので、`display: block` を宣言してブロックコンテナに変えれば、適用対象になります。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
```HTML
|
|
32
|
+
|
|
33
|
+
<span style="text-align: center;"><span style="display: block;">span</span></span>
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
このように、継承先に適用対象があるのなら、インラインボックスに `text-align` を指定するのは無意味ではありません。
|
|
26
40
|
|
|
27
41
|
|
|
28
42
|
|
1
ブロックレベル要素とインライン要素
test
CHANGED
|
@@ -26,4 +26,70 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
+
### ブロックレベル要素とインライン要素
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
「ブロックレベル要素」と「インライン要素」は元々、HTML4.01由来の言葉ですが、HTML Standard(HTML5)になって失われました。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
- [7.5.3 ブロックレベル要素と行内要素 - HTML 4.01 (ja)](http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3)
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
これらはCSSの用語として使用する人がいるのですが、正直かなり違和感があります。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
その昔、「HTML4.01Strict」には「インライン要素はブロックレベル要素を子孫要素に出来ない」という制約がありました。
|
|
50
|
+
|
|
51
|
+
そこである開発者が考えました。
|
|
52
|
+
|
|
53
|
+
「`display: block` を宣言してインライン要素をブロックレベル要素に変化させれば、この制限を回避できるのではないか」と。
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
```CSS
|
|
58
|
+
|
|
59
|
+
span { display: block; }
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
この試みは失敗に終わります。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
- CSSを適用しても、HTMLの文法には影響がありません
|
|
70
|
+
|
|
71
|
+
- `display: block` を宣言しても、**インライン要素はブロックレベル要素に変化しません**
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
- [CSS Display Module Level 3](https://drafts.csswg.org/css-display/#the-display-properties)
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
> |Short display|Full display|Generated box|
|
|
84
|
+
|
|
85
|
+
> |:--|:--|:--|
|
|
86
|
+
|
|
87
|
+
> |'block'|'block flow'|block-level block container aka block box|
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
`display: block` を宣言すると、**block-level block container(略称:block box)**に変化します。
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
29
95
|
Re: teratail20 さん
|