Big Bang

パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる

HTMLでの空白

| 2件のコメント

HTMLでは半角スペースや改行がいくつ続いても半角スペース1個分として扱われます。

説明はしませんが、全角スペース、つまり日本語はこの限りではありません

つまり、半角スペースを10個続けた後に「あいうえお」と書いても表示結果は下のとおりですが

あいうえお

全角スペースを10個続けた後に「あいうえお」と書くとこうなります。

          あいうえお

便利ですが、これでは欧米人は困ってしまう。
もちろん半角スペースを使ってでも空白を長く取ることは可能です。
今回は、「HTMLで空白を作る方法、いろいろ」の巻。

そのまんま東示する 「preタグ」

preタグというのがあって、<pre>から</pre>の間に書かれた事は書いたまんまに表示します。
つまり先ほどのように半角スペースを10個並べても、通常は空白は出来ませんが、

<pre>          あいうえお</pre>

と書くと、こんな風にそのまんま表示されます。

          あいうえお

全角スペースは西洋の文字には出てこないので、万国共通の表示をさせるには、半角で入力するほうが望ましいです。

半角スペースの代わり 「エンティティ &nbsp;」

&nbsp;は半角スペースのエンティティです。
エンティティの説明はハートマークを表示するの巻を見て欲しいのですが、
この&nbsp;をたくさん並べても個数分の空白は作れます。(ただし幅がpreとは変わってしまうようです)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;あいうえお

表示結果

          あいうえお

しかし、これが単にレイアウトとして空間が欲しいだけなら、別の方法があります。
データとして無意味な半角スペースを入れるよりもこれから説明するやり方の方がいいです。

隙間レイアウト 「marginとpadding」

marginは自分自身と、自分以外の間隔指定に使います。
「あいうえお」という文字の左に5センチ空間が欲しいなら

<span style=”margin-left:5cm;background:#fcf”>あいうえお(色は説明用につけただけ)</span>

と書けばOKです。

実行結果

あいうえお(色は説明用につけただけ)

paddingは自分自身の内側の隙間です。

<span style=”padding:0″>paddingがゼロの状態&lt;/span>

表示結果
paddingがゼロの状態

<div style=”padding:1em 0 0 5em”>上が1文字分のpadding、下はpaddingなし、そして左が5文字分のpaddingという状態で表示。</div>

表示結果

上が1文字分のpadding、下はpaddingなし、そして左が5文字分のpaddingという状態で表示。

marginとpaddingの指定の仕方は以下の通りです。

上に空白ゼロを指定 margin-top:0 padding-top:0
右に1文字分を指定 margin-right:1em padding-right:1em
下に1ピクセルを指定 margin-bottom:1px padding-bottom:1px
左に1センチを指定 margin-left:1cm padding-left:1cm
上下がゼロ、左右に10ピクセル margin:0 10px padding:0 10px
上にゼロ、右に1文字分
下に1ピクセル、左に1センチ
margin:0 1em 1px 1cm padding:0 1em 1px 1cm

数値を2つ指定した時は1つ目の値が上下の値、2つ目の値が左右の値になります。
数値を4つ指定した時は1つ目から順に上、右、下、左の値となります。

2件のコメント

  1. こんにちわ。

    http://fanblogs.jp/mikannoheya/archive/671/0

    説明が下手ですが 記事にしてみました。

    お暇な時でいいので 見てくださいm(__)m

  2. みかんさんの所に返事を書こうとしましたが、みかんさんのブログに行くとJavaScriptのせいでブラウザが動かなくなるので、こっちに書きます。

    やりたいことはわかりました。
    恐らく引用タグはblockquoteを使っていると思うのですが、
    みかんさんの他のブログの引用部分をブラウザで開いて、「ソースを見る」を選択してください。

    そのソースのblockquoteの中はどうなっていますか?

    僕の別ブログで、blockquoteを使っているところを見てみました。
    http://cpro.wp1.comuu.jp/archives/1

    その中では、エンティティの&lt;と&gt;を使っています。

    以前、ブログは改行を自動でbrに変換すると説明したことがありますが、みかんさんの別のブログでは、自動で<を&lt;に、>を&gt;に変換しているのではないでしょうか?

    とにかく、みかんさんが言っている部分の実際のソースがどうなっているのか見てください。

コメントを残す

Top