こだわりのHTML 空白編
戻るこだわりのHTML進む

空白
いきなりの話題が空白である。
何も見えない物に対してこいつは何を考えているんだと思われるかも知れませんが、インターネットや書籍でここまで空白について詳しく熱く語っているものは無いと思います。
このページを読み終えている頃には貴方も空白マニア?になっているかもしれませんよ。

では質問します。
HTMLで記述出来る空白文字は何種類あると思いますか?
答 (7種類
それでは、それぞれの空白を検証してみましょう。

 出力結果  HTML記述  &#xxxx  コメント 
 &#32;  &#32;  ASCIIコードの10進の32、16進の20です。<TABLE>タグ内で単体では表示されません。 
 &thinsp;  &#8201;  thin(薄い)sp(space:空白)という意味だと推測されます。 
 &ensp;  &#8194;  en(n:エヌの幅の)sp(space:空白)という意味だと推測されます。 
 &emsp;  &#8195;  em(m:エムの幅の)sp(space:空白)という意味だと推測されます。 
  &nbsp;  &#160;  nb(no break/non breaking:改行しない)sp(space:空白)という意味です。 
    &#32;?  俗に言う半角スペースです。<TABLE>タグ内で単体では表示されません。 
     &#????;  俗に言う全角スペースです。 
※出力結果は表内をドラッグしてみて下さい。


□□□ 検証1 □□□
ここでは、それぞれのスペースが文頭、文中、文末でどの様に変化するかを検証します。

 スペース  文頭  文中  文末  順位  コメント 
 スペース無し |||| 0/0/0  これを基準にして下さい。 
 &#32;  || ||  0/2/2  文頭では無視され、文中、文末では有効で、&nbsp;と等しい。 
 半角スペース  || ||  0/2/2  文頭では無視され、文中、文末では有効で、&nbsp;と等しい。 
 &thinsp;  || ||  3/1/1  総てにおいて有効。 
 &nbsp;  || | 4/2/2  総てにおいて有効。 
 &ensp;  || ||  5/5/5  総てにおいて有効。 
 全角スペース  || ||  6/6/6  総てにおいて有効。 
 &emsp;  || ||  7/7/7  総てにおいて有効。 
※確認は表内をドラッグしてみて下さい。
<FONT SIZE=xx>〜</FONT>タグや<Hx>〜</Hx>タグの中ではサイズが変化しますが、恐らく順位には変化が無いと思われます。


□□□ 検証2 □□□
続いては<INPUT TYPE=button VALUE="〜">タグでの表示について検証します。

 スペース  単体  挟込  前後  順位  コメント 
 スペース無し  0/0/0  これを基準にして下さい。 
 &thinsp;  1/1/-1  前後がスペース無しより小さいという不思議な結果です。 
 &ensp;  1/5/5  単体では&thinsp;と等しいという珍しい結果です。 
 &#32;  3/2/2  単体、挟込、前後が総て等しい結果になっています。 
 &nbsp;  3/2/2 
 半角スペース  3/2/2 
 全角スペース  3/6/6  単体では半角と全角が等しいという結果です。 
 &emsp;  7/7/7  いつでも大きい様です。 
<INPUT TYPE=button>にはSIZE=やWIDTH=といったパラメータが存在しない為、横幅を指定したり出来ません。
また、<FONT SIZE=xx>〜</FONT>タグや<Hx>〜</Hx>タグの中でもサイズの変化はありません。


□□□ 検証3 □□□
&thinsp;、&ensp;、&emsp;と半角アルファベット(A〜Z、a〜z)に特化して検証します。

&thinsp;とi(半角Iの小文字)とl(半角Lの小文字)とその他のアルファベット
ilABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghjkmnopqrstuvwxyz
&ensp;とn(半角Nの小文字)とその他のアルファベット
nABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmopqrstuvwxyz
&emsp;とm(半角Mの小文字)とその他のアルファベット
mABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklnopqrstuvwxyz
上下の箱をドラッグして両方とも箱の中が総て反転されれば等しい事になります。
検証の結果、&thinsp;は小文字のiやlよりも薄い様です。
&ensp;や&emsp;は私の予想した通り、nやmと等しい様ですが、それよりも薄い物に対しては等しくしてしまう様な結果でした。


これらの検証結果を踏まえて、それぞれのスペースの使い道を考えてみます。
[ &#32; | &thinsp; | &ensp; | &emsp; | &nbsp; | 半角スペース | 全角スペース ]

□□□ &#32; □□□
明示的な半角スペースという所でしょうか。
使い道を模索中です。良い使い道をご存じでしたら教えて下さい。

□□□ &thinsp; □□□
&thinsp;、&ensp;、&emsp;で微妙なスペース調整が出来るかもしれません。
私のページでは分数電卓のボタンが良い例です。

□□□ &ensp; □□□
&thinsp;、&ensp;、&emsp;で微妙なスペース調整が出来るかもしれません。
私のページでは分数電卓のボタンが良い例です。

□□□ &emsp; □□□
&thinsp;、&ensp;、&emsp;で微妙なスペース調整が出来るかもしれません。
私のページでは分数電卓のボタンが良い例です。

□□□ &nbsp; □□□
このスペースだけ唯一改行の対象になりません。
改行されたくない場所に半角スペースを入れるのであれば、&nbsp;を使えという事です。
また、文頭(行頭)、文中、文末(行末)の何処でも有効なので、一番便利だと思います。
私のページでは分数の四則演算に多用しています。

□□□ 半角スペース □□□
HTMLでの半角スペースの扱いは色々な所に現れて来ます。
検証1の結果より、文頭(行頭)や文末(行末)に使っても無視されてしまう性質があります。
これはHTMLが半角スペースをセパレータに使っているからだと思います。
これを逆手に取って、テキストエディタで開いた時にタグや文章を見やすくするという意味で半角スペースを使う事が考えられます。
また、文中に使うと場所によっては改行の対象になります。
正しく半角スペースを表示させたいのであれば&nbsp;を使います。

□□□ 全角スペース □□□
他の&xxxsp;は入力するのが大変ですし、半角スペースは無視される場合が多いので適当なスペースを置きたい時にかなり有効です。

ここまで読んでみて貴方の空白に対する世界観が変わりましたか。
もし、上記の7種類以外のスペースをご存じでしたら、メールにてお知らせ下さい。
追って調査します。

戻るこだわりのHTML進む