必要な時だけ現れる影の存在 半角スペース

半角スペースのHTMLにおける特徴とそれを応用したCSSテクニック

公開日

HTMLとCSSを勉強しはじめた頃の「あるある」の一つに、記述した覚えのないところに空白が生じるというのがあります。

例えば、リストアイテム (li要素) をインライン (display: inline;) で表示させた際に、リストアイテム間に空白ができる場合があります。

今回は、この空白の正体である半角スペースのHTMLにおける特徴と、その特徴を生かしたCSSテクニックを紹介します。

リストアイテムをインラインで表示させると空白が生じる理由

次のようなHTMLコードをブラウザで表示させると、リストアイテム間に空白が生じます。

…
<style>
ul { padding: 0; }
ul > li { display: inline; }
</style>
…
<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
…

これは、ブラウザでウェブページを表示させる際、空白に関する次のような処理が行われるためです。

1. 改行やタブスペースは半角スペースに置き換えられる

HTMLコードを見やすくするために、改行やタブスペースでコードを整形するのが一般的です。その改行やタブスペースは表示される際、半角スペースに置き換えられます。

HTMLコードの改行を “↵”、タブスペースを “__” で可視化すると次のようになります。

<ul>↵
__<li>リストアイテム</li>↵
__<li>リストアイテム</li>↵
__<li>リストアイテム</li>↵
__<li>リストアイテム</li>↵
</ul>

これらが半角スペースに置き換えられることで、次のHTMLコードと同等になります。

<ul>  <li>リストアイテム</li>  <li>リストアイテム</li>  <li>リストアイテム</li>  <li>リストアイテム</li> </ul>

2. 連続する半角スペースは1つの半角スペースに省略される

連続する半角スペースは1つにまとめられます。

Microsoft Wordなどで文書を作成する要領で半角スペースを大量に打ち込み、ウェブページの余白を調整しようとしたが、意図した通りに反映されない、その理由がコレです。

これにより、先のHTMLコードは次のHTMLコードと同等になります。

<ul> <li>リストアイテム</li> <li>リストアイテム</li> <li>リストアイテム</li> <li>リストアイテム</li> </ul>

3. 行頭と行末にある半角スペースは省略される

行頭と行末にある半角スペースはブラウザでは表示されません。

段落の行頭をインデントさせようと半角スペースを打ち込んだが、意図した通りに反映されない、その理由がコレです。

これにより、先のHTMLコードは次のHTMLコードと同等になります。

<ul><li>リストアイテム</li> <li>リストアイテム</li> <li>リストアイテム</li> <li>リストアイテム</li></ul>

ブラウザでの表示

ブラウザでウェブページが表示される際、当然、HTMLタグは表示されないので、先のHTMLコードは次のように表示されます。リストアイテム間に半角スペースによる余白が生じています。

リストアイテム間に半角スペースが生じた状態

この余白をどうにかできないかと何度悩んだことか。

半角スペースを余白設定に有効活用する

リストアイテムを横並びにさせたいケースとしては、ウェブページのヘッダーやフッターなどに配置するリンク一覧などではないでしょうか？

リンク間には適度な余白が必要となります。任意の幅の余白を設定する際、邪魔になる半角スペースをどうにかするのではなく、半角スペースで任意の幅の余白を設定してみたらどうでしょうか？

半角スペースで余白設定する方法

半角スペースは通常、全角文字 (1em) の1/3程度 (約0.33em) で表示されます。つまり、0.167em足してあげれば約0.5emとなりエンスペース1つ分 (&ensp;)、0.67em足してあげれば約1emとなりエムスペース1つ分 (&emsp;) の余白になります。

半角スペースの幅の調整はCSSのword-spacingプロパティで行えます。word-spacingプロパティが子孫要素に継承される点だけ注意しましょう。

ul {
  padding: 0;
  word-spacing: 0.67em; /* 幅を約1emに広げる */
}
ul > li {
  display: inline;
  word-spacing: normal; /* 幅を元に戻す */
}

上記のCSSコードを適用すると、ul要素直下 (li要素間) の半角スペースの幅が広げられ、次のように表示されます。

リストアイテム間の半角スペースがエムスペース相当に広げられた状態

また、擬似要素を使用することで、区切り文字 (&#x7C;) を設定したり、半角スペースがない部分に半角スペース (&#x20;) を挿入することもできます。

ul > * + li:before {
  content: "\20\7C\20"; /* => "&#x20;&#x7C;&#x20;" => " | " */
  word-spacing: 0.67em;
}

上記のCSSコードを適用すると次のように表示されます。

リストアイテム間にエムスペース相当の余白と区切り文字が設定された状態

半角スペースで余白設定するメリット

marginプロパティなどで余白を設定した場合、リストの内容が一行に収まらず余白が行頭や行末になった場合、不自然な余白がある状態になってしまいます。

また、リストの内容を行揃え (text-alignプロパティを設定) する場合、リストアイテムの余白の設定を右側のみ・左右両側・左側のみといった具合に分ける必要も出てきます。

半角スペースで余白を設定した場合、行頭と行末にある余白は表示されず、常に文字間・要素間にのみ余白が作られるため、不自然に空いてしまう問題は発生しませんし、行揃えするために設定を分ける必要もありません。

半角スペースで余白設定するデメリット

半角スペースは全角文字の1/3程度で表示されますが、表示されるフォント毎に微妙な差異があるため、0.5emや1emといった狙ったサイズにならない場合があります。

また、半角スペースの幅はemなどの文字サイズを基準とする単位と相性が良い反面、pxなどの固定値とは相性が良くありません。

そのため、ピクセル単位で細かく設計されたデザインには向きません。

CodePen

See the Pen Compact list by nov (@numerofive) on CodePen.

〆

いかがでしたか？昔はリストアイテムを横並びさせるとき邪魔者だった半角スペースも、フレックスボックス (display: flex;) やグリッドレイアウト (display: grid;) の登場で影が薄くなりました。

しかし、逆転の発想で半角スペースを余白に活用すると、様々な閲覧環境に対応させなければならない現在において、非常に有用なCSSテクニックになるのではないでしょうか？

関連記事