HTMLで空白を追加する方法
Webページを作成する際に空白を追加したい場合、HTMLではキーボードの半角スペースをいくつ入力してもブラウザ上では1つ分しか表示されません。HTMLで空白を追加するには以下の3つの方法があります。
- 特殊文字を使う
- 全角スペースを使う
- preタグを使う
それぞれの方法には異なる特徴があり、用途に応じて使い分けることで思い通りに空白を追加できます。以下では各方法について詳しく解説していきます。
特殊文字を使う
HTMLで半角スペースを追加する場合は という特殊文字を使用します。特殊文字とは、HTMLに直接記述してもブラウザにそのまま表示されない文字や記号を表すための記述方法です。 は&と;で囲まれた形式で記述し、この特殊文字をHTML上で使うことによってブラウザに半角スペースが表示されます。
<p>空白を 追加します</p>
は「non-breaking space」の略で、本来は改行させないスペースという意味を持っています。連続して使えばその数だけ半角スペースが追加されるため、複数の空白を入れたい場合にも使用できます。
<p>空白を 追加します</p>
全角スペースを使う
日本語入力モードでスペースキーを押すと全角スペースが入力され、入力した数だけブラウザに表示されます。半角スペースと異なり、全角スペースは複数入力してもそのまま反映されるため、感覚的に使いやすい方法です。
<p>空白を 追加します</p>
ただし全角スペースは閲覧する環境によって空白の幅が異なる場合があり、後から見た時に何個のスペースを入れたのか判断しづらいというデメリットがあります。また意図せず入力したものなのか判別しにくいため、実務では推奨されない方法です。
【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」
preタグを使う
文章を<pre>タグで囲むと、その文章内の空白や改行がそのままブラウザに表示されます。preタグは「preformatted text」の略で整形済みテキストを意味し、半角スペースや改行もすべて入力したままの形式で反映されます。
<pre>
空白を 追加します
改行も そのまま反映されます
</pre>
preタグはHTMLソースやプログラムのコードをそのまま表示する際によく使用されますが、ブラウザの横幅に合わせた自動折り返しが行われないため、スマートフォンなどの幅が狭い画面では文字が切れる可能性があります。
HTMLで使える空白の種類
HTMLでは 以外にも異なる幅の空白を表す特殊文字が用意されており、用途に応じて使い分けることができます。以下の4種類の特殊文字があります。
- （半角スペースと同じ幅）
-  （半角より広い幅）
-  （全角スペースとほぼ同じ幅）
-  （ より狭い幅）
それぞれの特殊文字は異なる幅の空白を表現できるため、細かな調整が必要な場合に活用できます。以下では各特殊文字の具体的な使い方を解説していきます。
（半角スペースと同じ幅）
は半角スペースと同じ幅の空白を追加できる特殊文字で、最も一般的に使用されます。複数連続して記述することによって、必要な数だけ半角スペースを追加できます。
<p>テキスト テキスト</p>
 （半角より広い幅）
 は「en space」を意味し、 より少し広い空白を追加できます。en spaceはフォントの「N」の文字幅と同じ大きさで、半角と全角の中間程度の幅になります。
<p>テキスト テキスト</p>
【PR】『Python』を学べる企業・個人向けのプログラミングコース
 （全角スペースとほぼ同じ幅）
 は「em space」を意味し、全角スペースとほぼ同じ幅の空白を追加できます。em spaceはフォントの「M」の文字幅と同じ大きさで、 の約2倍の幅になります。
<p>テキスト テキスト</p>
 （ より狭い幅）
 は「thin space」を意味し、 より狭い空白を追加できます。細かな調整が必要な場合や、文字間隔を微調整したい場合に使用します。
<p>テキスト テキスト</p>
HTMLで空白を追加する際の注意点
HTMLで空白を追加する際には、いくつかの注意すべき点があります。適切に使用しないとレイアウトが崩れたり、コンテンツの品質が下がる可能性があるため、以下の3つのポイントに注意する必要があります。
- 半角スペースは1つ分しか表示されない
- 特殊文字の本来の用途を理解する
- 文字間隔の調整はCSSを使う
それぞれの注意点を理解することによって、適切な方法で空白を追加できるようになります。以下では各注意点について詳しく解説していきます。
半角スペースは1つ分しか表示されない
HTMLではキーボードのスペースキーで半角スペースを何度入力しても、ブラウザ上では1つ分の空白しか表示されません。これはHTMLの仕様で、コードの可読性のために入れたインデントや改行が実際の表示に影響しないようにするためです。
<p>テキスト テキスト</p>
<!-- 半角スペース5つ入力しても1つ分しか表示されない -->
複数の半角スペースを表示したい場合は、特殊文字の を使用する必要があります。半角スペースとタブと改行は連続していても1つの空白として解釈されるため、意図した通りに空白を追加するには特殊文字を活用しましょう。
特殊文字の本来の用途を理解する
は半角スペースを追加する特殊文字として広く使われていますが、本来は改行させないスペースという役割を持っています。英文では単語の間で自動改行が行われますが、 で繋がれた単語の間では改行されません。
<p>Children Come</p>
<!-- ChildrenとComeの間で改行されない -->
日本語でも問題なく使用できますが、文字調整のために多用すると単語が正しく認識されないなどの問題が起こる場合があります。スペースを追加する特殊文字としては や が用意されているため、用途に応じて使い分けることが推奨されます。
文字間隔の調整はCSSを使う
文字間隔を調整する目的で特殊文字を多用するのは推奨されません。デザイン上の空白調整を行う場合は、CSSのmarginやpaddingプロパティを使用することが実務では一般的です。
<p style="margin-left: 2em;">テキスト</p>
CSSを使用すれば空白の幅を細かく自由に設定でき、あらゆる環境でも同じように表示されるというメリットがあります。同じスタイルを複数の箇所に適用する場合も、クラス名を設定しておけば一度に変更できるため、保守性も高くなります。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
【AWS】認定資格12種類の一覧や難易度、費用などを解説
Canvaとは？使い方やアカウント登録などを初心者向けに解説
git configで設定情報を確認・表示する方法
「Pythonはやめとけ」と言われる理由と学習するメリット
Ubuntuのversionを確認する方法
