回答編集履歴
5
見出し追加
test
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
101
|
-
### 返答 liタグの左
|
|
101
|
+
### 返答 liタグの左側のスペースはどうなるのか？
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
4
見出し追加
test
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
### 返答 liタグの左のテキスト側のスペースはどうなるのか？
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
3
見出し追加
test
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
101
|
-
**返答 liタグの
|
|
101
|
+
**返答 liタグの左### ヘディングのテキスト側のスペースはどうなるのか？**
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
2
インデント説明
test
CHANGED
|
@@ -89,3 +89,99 @@
|
|
|
89
89
|
インライン要素とインラインブロック要素をまとめたデモがこちらです↓
|
|
90
90
|
|
|
91
91
|
[https://codepen.io/Higemura/pen/zmgZNK](https://codepen.io/Higemura/pen/zmgZNK)
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
**返答 liタグの右側のスペースはどうなるのか？**
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
**"この部分"**が空白として認識されるか？と言うことですよね？
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
<ul class="list1">
|
|
110
|
+
|
|
111
|
+
"この部分"<li>リスト3</li>
|
|
112
|
+
|
|
113
|
+
"この部分"<li>リスト3</li>
|
|
114
|
+
|
|
115
|
+
"この部分"<li>リスト3</li>
|
|
116
|
+
|
|
117
|
+
"この部分"<li>リスト3</li>
|
|
118
|
+
|
|
119
|
+
"この部分"<li>リスト3</li>
|
|
120
|
+
|
|
121
|
+
</ul>
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
これはHTMLやそれ以外のプログラム全般に言えることなのですが、
|
|
128
|
+
|
|
129
|
+
**コードの行の左側はどんだけスペースを開けても空白と認識されません。**
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
一般的に左側の空き部分は**"インデント"**として認識されるので、ブラウザに出力されても**"半角スペース"**のような扱いにはならないんです！
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
**"インデント"**がある理由はコードの可読性を高めるものとして実装します。
|
|
138
|
+
|
|
139
|
+
**解答欄にはli行の左側に半角スペース2個**入れています。「ulタグの中にliがあるんだよ〜」って意味ですね！
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
<ul class="list1">
|
|
146
|
+
|
|
147
|
+
"インデント"<li>リスト1</li>"空白"
|
|
148
|
+
|
|
149
|
+
"インデント"<li>リスト2</li>"空白"
|
|
150
|
+
|
|
151
|
+
"インデント"<li>リスト3</li>"空白"
|
|
152
|
+
|
|
153
|
+
"インデント"<li>リスト4</li>"空白"
|
|
154
|
+
|
|
155
|
+
"インデント"<li>リスト5</li>"空白"
|
|
156
|
+
|
|
157
|
+
</ul>
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
なので"インデント"はソースコードに影響しないので
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
```ここに言語を入力
|
|
168
|
+
|
|
169
|
+
<li>リスト2</li>"空白""空白""空白"<li>リスト3</li>
|
|
170
|
+
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
のようにはならず、
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
```ここに言語を入力
|
|
180
|
+
|
|
181
|
+
<li>リスト2</li>"空白"<li>リスト3</li>
|
|
182
|
+
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
になっていると言うことになります！
|
1
追記
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
inline-block要素の仕様によるものなのですが
|
|
1
|
+
inline-block要素の仕様によるものなのですがinline-blockだとHTML上での改行にスペースを保持してしまうという性質があります。
|
|
2
2
|
|
|
3
3
|
なぜそんな仕様なのかと問われるとW3Cのに問い合わせるしかありませんが、HTMLソースをマウスで囲って見るとその理由がわかりやすいと思います。
|
|
4
4
|
|
|
@@ -60,7 +60,11 @@
|
|
|
60
60
|
|
|
61
61
|
なのでliタグがinlineやinline-blockの時は **見えない空白** を HTMLコードとして忠実に再現していることになります。
|
|
62
62
|
|
|
63
|
+
※imgタグもデフォルトがinline要素なので**見えない空白**の影響を受けて画像の下に隙間ができます。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
63
|
-
その理由にHTMLタグを改行せずに記述すると
|
|
67
|
+
その理由にHTMLタグを改行せずに記述すると**見えない空白**自体HTMLコードに存在しないので、崩れないで表示されるわけです。
|
|
64
68
|
|
|
65
69
|
```
|
|
66
70
|
|
|
@@ -78,7 +82,7 @@
|
|
|
78
82
|
|
|
79
83
|
|
|
80
84
|
|
|
81
|
-
逆に言うと
|
|
85
|
+
逆に言うと**block要素**が**親要素いっぱいまで幅を確保できる**ので **見えない空白** を無視できる特殊な要素とも言えるかもしれません。
|
|
82
86
|
|
|
83
87
|
|
|
84
88
|
|