回答編集履歴
4
markdown
answer
CHANGED
|
@@ -84,6 +84,7 @@
|
|
|
84
84
|
|`<div>`|×|○|×|○|
|
|
85
85
|
|`<div style="display: inline">`|×|○|○|×|
|
|
86
86
|
|
|
87
|
+
|
|
87
88
|
- `<span style="display: block">` はインライン要素であり、ブロックボックスです
|
|
88
89
|
- `<div style="display: inline">` はブロックレベル要素であり、インラインボックスです
|
|
89
90
|
|
3
「ブロックレベル要素とインライン要素」の説明を大幅に書き換え
answer
CHANGED
|
@@ -21,35 +21,86 @@
|
|
|
21
21
|
|
|
22
22
|
### ブロックレベル要素とインライン要素
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
HTML4.01仕様。
|
|
25
25
|
|
|
26
26
|
- [7.5.3 ブロックレベル要素と行内要素 - HTML 4.01 (ja)](http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3)
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
> ##### 7.5.3 ブロックレベル要素と行内要素
|
|
29
|
+
> HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。 この違いは、幾つかの点から明らかにされる。
|
|
29
30
|
|
|
31
|
+
行内要素とは**インライン要素(inline element)**のことです。
|
|
32
|
+
HTML4.01Strictではbody要素直下にはブロックレベル要素のみを配置できます。
|
|
33
|
+
|
|
30
34
|
---
|
|
31
35
|
|
|
32
|
-
その昔、「HTML4.01Strict」には「インライン要素はブロックレベル要素を子孫要素に出来ない」という制約がありました。
|
|
33
|
-
|
|
36
|
+
CSS仕様。
|
|
34
|
-
「`display: block` を宣言してインライン要素をブロックレベル要素に変化させれば、この制限を回避できるのではないか」と。
|
|
35
37
|
|
|
38
|
+
- [2. Box Layout Modes: the display property - CSS Display Module Level 3](https://drafts.csswg.org/css-display/#the-display-properties)
|
|
39
|
+
|
|
40
|
+
> ##### 2. Box Layout Modes: the display property
|
|
41
|
+
> ...中略...
|
|
42
|
+
> |Short display|Full display|Generated box|
|
|
43
|
+
> |:--|:--|:--|
|
|
44
|
+
> |'block'|'block flow'|block-level block container aka block box|
|
|
45
|
+
> |'inline'|'inline flow'|inline box aka inline block|
|
|
46
|
+
|
|
47
|
+
- `display: block` は**ブロックボックス(block box)**を生成します
|
|
48
|
+
- `display: inline` は**インラインボックス(inline box)**を生成します
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
下記HTMLを「W3C Markup Validation」で検証するとします。
|
|
53
|
+
HTML4.01Strictの「body要素直下にはブロックレベル要素のみを配置できる制限」を回避する為に、`display:block`で**ブロックレベル要素**に変化させられるか確かめます。
|
|
54
|
+
|
|
55
|
+
- [The W3C Markup Validation Service](https://validator.w3.org/)
|
|
56
|
+
|
|
36
|
-
```
|
|
57
|
+
```HTML
|
|
58
|
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
59
|
+
<html>
|
|
60
|
+
<head>
|
|
61
|
+
<title>sample</title>
|
|
62
|
+
</head>
|
|
63
|
+
<body>
|
|
64
|
+
<span style="display: block">span</span>
|
|
37
|
-
|
|
65
|
+
<div>div</div>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|
|
38
68
|
```
|
|
39
69
|
|
|
40
|
-
|
|
70
|
+
span要素を書いた7行目で下記エラーが出力されます。
|
|
41
71
|
|
|
42
|
-
|
|
72
|
+
```
|
|
43
|
-
|
|
73
|
+
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
|
|
74
|
+
```
|
|
44
75
|
|
|
45
76
|
---
|
|
46
77
|
|
|
47
|
-
|
|
78
|
+
ここで `<span>, <div>` をHTML4.01/CSSの名称で表すと、次のように分類されます。
|
|
48
79
|
|
|
49
|
-
|
|
80
|
+
|HTMLタグ|インライン要素(HTML4.01)|ブロックレベル要素(HTML4.01)|インラインボックス(CSS)|ブロックボックス(CSS)|
|
|
50
|
-
|
|
81
|
+
|:--|:--|:--|:--|:--|
|
|
82
|
+
|`<span>`|○|×|○|×|
|
|
51
|
-
|
|
83
|
+
|`<span style="display: block">`|○|×|×|○|
|
|
84
|
+
|`<div>`|×|○|×|○|
|
|
85
|
+
|`<div style="display: inline">`|×|○|○|×|
|
|
52
86
|
|
|
53
|
-
`display: block`
|
|
87
|
+
- `<span style="display: block">` はインライン要素であり、ブロックボックスです
|
|
88
|
+
- `<div style="display: inline">` はブロックレベル要素であり、インラインボックスです
|
|
54
89
|
|
|
90
|
+
このように解釈すれば、HTML4.01仕様、CSS仕様のそれぞれの規定を矛盾がないことが分かります。
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
翻って冒頭の質問に戻ると、
|
|
95
|
+
|
|
96
|
+
> bodyタグにtext align centerをかけており、孫要素のspan２にtext align centerが継承されると思っています。spanはインライン要素のため、中のテキスト「テストです。」は中央配置にならないと思っていたら、ブラウザで確認すると、中央配置になりました。
|
|
97
|
+
|
|
98
|
+
spanがインライン要素であることに言及していますが、`text-align` プロパティが見ているのは要素区分ではなく、**ボックス**なので、
|
|
99
|
+
|
|
100
|
+
```HTML
|
|
101
|
+
<span style="display: block; border: solid 1px black; text-align: center">span</span>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
このように、インライン要素であり、**ブロックボックス**でもある要素には `text-align` プロパティを適用できます。
|
|
105
|
+
|
|
55
106
|
Re: teratail20 さん
|
2
display: block
answer
CHANGED
|
@@ -11,7 +11,14 @@
|
|
|
11
11
|
> |継承|される|
|
|
12
12
|
|
|
13
13
|
text-alignは子孫要素に継承しますが、`display: inline` なspan要素は**適用対象(ブロックコンテナ)ではない**為、作用しません。
|
|
14
|
+
継承はされるので、`display: block` を宣言してブロックコンテナに変えれば、適用対象になります。
|
|
14
15
|
|
|
16
|
+
```HTML
|
|
17
|
+
<span style="text-align: center;"><span style="display: block;">span</span></span>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
このように、継承先に適用対象があるのなら、インラインボックスに `text-align` を指定するのは無意味ではありません。
|
|
21
|
+
|
|
15
22
|
### ブロックレベル要素とインライン要素
|
|
16
23
|
|
|
17
24
|
「ブロックレベル要素」と「インライン要素」は元々、HTML4.01由来の言葉ですが、HTML Standard(HTML5)になって失われました。
|
1
ブロックレベル要素とインライン要素
answer
CHANGED
|
@@ -12,4 +12,37 @@
|
|
|
12
12
|
|
|
13
13
|
text-alignは子孫要素に継承しますが、`display: inline` なspan要素は**適用対象(ブロックコンテナ)ではない**為、作用しません。
|
|
14
14
|
|
|
15
|
+
### ブロックレベル要素とインライン要素
|
|
16
|
+
|
|
17
|
+
「ブロックレベル要素」と「インライン要素」は元々、HTML4.01由来の言葉ですが、HTML Standard(HTML5)になって失われました。
|
|
18
|
+
|
|
19
|
+
- [7.5.3 ブロックレベル要素と行内要素 - HTML 4.01 (ja)](http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3)
|
|
20
|
+
|
|
21
|
+
これらはCSSの用語として使用する人がいるのですが、正直かなり違和感があります。
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
その昔、「HTML4.01Strict」には「インライン要素はブロックレベル要素を子孫要素に出来ない」という制約がありました。
|
|
26
|
+
そこである開発者が考えました。
|
|
27
|
+
「`display: block` を宣言してインライン要素をブロックレベル要素に変化させれば、この制限を回避できるのではないか」と。
|
|
28
|
+
|
|
29
|
+
```CSS
|
|
30
|
+
span { display: block; }
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
この試みは失敗に終わります。
|
|
34
|
+
|
|
35
|
+
- CSSを適用しても、HTMLの文法には影響がありません
|
|
36
|
+
- `display: block` を宣言しても、**インライン要素はブロックレベル要素に変化しません**
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
- [CSS Display Module Level 3](https://drafts.csswg.org/css-display/#the-display-properties)
|
|
41
|
+
|
|
42
|
+
> |Short display|Full display|Generated box|
|
|
43
|
+
> |:--|:--|:--|
|
|
44
|
+
> |'block'|'block flow'|block-level block container aka block box|
|
|
45
|
+
|
|
46
|
+
`display: block` を宣言すると、**block-level block container(略称:block box)**に変化します。
|
|
47
|
+
|
|
15
48
|
Re: teratail20 さん
|