【実験1】画像でスペースを確保
HTMLでは、画像とテキストを同じ場所に配置しようとすると、テキストが画像の外に回りこむ性質があります。
そこでスペーサーを挿入することで、確実にスペースを確保しながらレイアウトすることが可能になります。
横に確保する場合と、縦に確保する場合でどういう使い道があるか実験してみます。
イメージしやすいように、全角スペースとスペーサーに色をつけてみました。
○横に確保する場合
□□□□□□□□□
横にスペーサーを入れないで
□□□□□□□□□ 画像スペースを確保する場合
□□□□□□□□□
スペースキーをいっぱい押して
□□□□□□□□□ ←この空白のスペースを
□□□□□□□□□
作っています | ＜タグ＞
横にスペーサーを入れないで<br>
画像スペースを確保する場合<br>
スペースキーをいっぱい押して<br>
←この空白のスペースを<br>
作っています<br> | |
 こちらはスペーサーを入れた場合。
イメージでわかりやすいようにうすく色をつけてみました。
←この薄いグレーのスペースです。
違いがわかりますか？ |
＜タグ＞
<img src="images/spacer.gif"
width="100"height="100" >
こちらはスペーサーを入れた場合。<BR>
イメージでわかりやすいようにうすく<BR>
色をつけてみました。<BR>
←この薄いグレーのスペースです。<br>
違いがわかりますか？ | |
□↓
□↓
□↓
□↓
□↓
□↓
□↓
これは改行でスペースを確保した場合です。 |
＜タグ＞
<br><br><br><br><br><br><br>
これは改行でスペースを確保した場合です。 | |
|
| これはスペーサーでスペースを確保した場合です | ＜タグ＞
<img src="../images/spacer.gif"
width="200" height="100"><br>
これはスペーサーでスペースを確保した場合です | |
| ▼レイアウトを考えながらテキストを配置する場合、全角スペースや改行で空間を空けるよりスペーサーの方がサイズがわかりやすく微妙なサイズ変更も簡単にできます。
スペースとスペーサーの違いがわかっていただけたでしょうか？ | | |
