teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップ継承に関する質問CSS_text align がスタイルの継承の結果spanタグに効いている？

編集履歴

回答編集履歴

4

markdown

2020/11/03 12:58

投稿

think49
think49

スコア18189

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

「ブロックレベル要素とインライン要素」の説明を大幅に書き換え

2020/11/03 12:58

投稿

think49
think49

スコア18189

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
 
46
46
 
47
- 「ブロックレベル要素」と「インライン要素」は元々、HTML4.01由来の言葉ですが、HTML Standard(HTML5)になって失われました。
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
- これらはCSSの用語として使用する人がいるのですが、正直かなり違和感があります。
61
+ 行内要素とは**インライン要素(inline element)**のことです。
62
+
56
-
63
+ HTML4.01Strictではbody要素直下にはブロックレベル要素のみを配置できます。
57
-
58
-
64
+
65
+
66
+
59
- ---
67
+ ---
60
-
61
-
62
-
63
- その昔、「HTML4.01Strict」には「インライン要素はブロックレベル要素を子孫要素に出来ない」という制約がありました。
68
+
64
-
65
- そこである開発者が考えました。
69
+
66
-
67
- 「`display: block` を宣言してインライン要素をブロックレベル要素に変化させれば、この制限を回避できるのではないか」と。
70
+
68
-
69
-
70
-
71
- ```CSS
71
+ CSS仕様。
72
-
73
- span { display: block; }
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` を宣言すると、**block-level block container(略称:block box)**に変化します。
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

2020/11/03 05:20

投稿

think49
think49

スコア18189

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

ブロックレベル要素とインライン要素

2020/11/01 14:48

投稿

think49
think49

スコア18189

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 さん