HTMLでは半角スペースや改行がいくつ続いても半角スペース１個分として扱われます。
説明はしませんが、全角スペース、つまり日本語はこの限りではありません。
つまり、半角スペースを１０個続けた後に「あいうえお」と書いても表示結果は下のとおりですが
全角スペースを１０個続けた後に「あいうえお」と書くとこうなります。
便利ですが、これでは欧米人は困ってしまう。
もちろん半角スペースを使ってでも空白を長く取ることは可能です。
今回は、「HTMLで空白を作る方法、いろいろ」の巻。
preタグというのがあって、<pre>から</pre>の間に書かれた事は書いたまんまに表示します。
つまり先ほどのように半角スペースを１０個並べても、通常は空白は出来ませんが、
と書くと、こんな風にそのまんま表示されます。
全角スペースは西洋の文字には出てこないので、万国共通の表示をさせるには、半角で入力するほうが望ましいです。
は半角スペースのエンティティです。
エンティティの説明はハートマークを表示するの巻を見て欲しいのですが、
この をたくさん並べても個数分の空白は作れます。（ただし幅がpreとは変わってしまうようです）
表示結果
しかし、これが単にレイアウトとして空間が欲しいだけなら、別の方法があります。
データとして無意味な半角スペースを入れるよりもこれから説明するやり方の方がいいです。
marginは自分自身と、自分以外の間隔指定に使います。
「あいうえお」という文字の左に５センチ空間が欲しいなら
と書けばＯＫです。
実行結果
paddingは自分自身の内側の隙間です。
表示結果
paddingがゼロの状態
表示結果
marginとpaddingの指定の仕方は以下の通りです。
数値を２つ指定した時は１つ目の値が上下の値、２つ目の値が左右の値になります。
数値を４つ指定した時は１つ目から順に上、右、下、左の値となります。
説明はしませんが、全角スペース、つまり日本語はこの限りではありません。
つまり、半角スペースを１０個続けた後に「あいうえお」と書いても表示結果は下のとおりですが
あいうえお
全角スペースを１０個続けた後に「あいうえお」と書くとこうなります。
あいうえお
便利ですが、これでは欧米人は困ってしまう。
もちろん半角スペースを使ってでも空白を長く取ることは可能です。
今回は、「HTMLで空白を作る方法、いろいろ」の巻。
そのまんま東示する 「preタグ」
preタグというのがあって、<pre>から</pre>の間に書かれた事は書いたまんまに表示します。
つまり先ほどのように半角スペースを１０個並べても、通常は空白は出来ませんが、
<pre> あいうえお</pre>
と書くと、こんな風にそのまんま表示されます。
あいうえお
全角スペースは西洋の文字には出てこないので、万国共通の表示をさせるには、半角で入力するほうが望ましいです。
半角スペースの代わり 「エンティティ 」
は半角スペースのエンティティです。
エンティティの説明はハートマークを表示するの巻を見て欲しいのですが、
この をたくさん並べても個数分の空白は作れます。（ただし幅がpreとは変わってしまうようです）
あいうえお
表示結果
あいうえお
しかし、これが単にレイアウトとして空間が欲しいだけなら、別の方法があります。
データとして無意味な半角スペースを入れるよりもこれから説明するやり方の方がいいです。
隙間レイアウト 「marginとpadding」
marginは自分自身と、自分以外の間隔指定に使います。
「あいうえお」という文字の左に５センチ空間が欲しいなら
<span style="margin-left:5cm;background:#fcf">あいうえお（色は説明用につけただけ）</span>
と書けばＯＫです。
実行結果
あいうえお（色は説明用につけただけ）
paddingは自分自身の内側の隙間です。
<span style="padding:0">paddingがゼロの状態＆lt;/span>
表示結果
paddingがゼロの状態
<div style="padding:1em 0 0 5em">上が１文字分のpadding、下はpaddingなし、そして左が５文字分のpaddingという状態で表示。</div>
表示結果
上が１文字分のpadding、下はpaddingなし、そして左が５文字分のpaddingという状態で表示。
marginとpaddingの指定の仕方は以下の通りです。
| 上に空白ゼロを指定 | margin-top:0 | padding-top:0 |
|---|---|---|
| 右に１文字分を指定 | margin-right:1em | padding-right:1em |
| 下に１ピクセルを指定 | margin-bottom:1px | padding-bottom:1px |
| 左に１センチを指定 | margin-left:1cm | padding-left:1cm |
| 上下がゼロ、左右に１０ピクセル | margin:0 10px | padding:0 10px |
| 上にゼロ、右に１文字分 下に１ピクセル、左に１センチ | margin:0 1em 1px 1cm | padding:0 1em 1px 1cm |
数値を２つ指定した時は１つ目の値が上下の値、２つ目の値が左右の値になります。
数値を４つ指定した時は１つ目から順に上、右、下、左の値となります。