HTMLで半角スペースを挿入する方法

PDF形式でダウンロード

共著者 : wikiHow編集チーム

PDF形式でダウンロード

この記事では、HTMLで半角スペースと改行を挿入する方法を紹介します。半角でスペースキーを何度押してもHTMLでは半角スペースが1つしか表示されないので、一度に複数の半角スペースを挿入したいときは、HTMLタグを使用しましょう。

方法 1

方法 1 の 3:
HTMLを使用する

1
HTMLファイルを開く　HTMLファイルを編集するには、メモ帳（Windows）やテキストエディット（Mac）などのテキストエディタを使用します。Adobe DreamweaverなどのHTMLエディタを使用することも可能です。HTMLファイルを開くには、以下の操作を行います。
- Windowsの場合はエクスプローラー、Macの場合はFinderでHTMLファイルが保存されているフォルダを開きます。
- 編集したいHTMLファイルを右クリックします。
- プログラムから開く（Windows）またはこのアプリケーションで開く（Mac）にカーソルを合わせます。
- HTMLファイルを編集したいプログラム（アプリケーション）をクリックします。
2
spaceキーを押して、通常の半角スペースを挿入する　通常の半角スペースを挿入するには、半角スペースを挿入したい場所をクリックし、半角でスペースキーを押します。通常、HTMLでは半角でスペースキーを何度押しても、文字と文字の間には半角スペースは1つしか表示されません。
3
 と入力して、もう1つ半角スペースを強制的に挿入する　これは、その場所での改行を防ぐことから「ノーブレークスペース（非分割空白）」と呼ばれます。^{[1]
X
出典文献}
- 例えば、Hello   there!（こんにちは！）と入力すると、「Hello」と「there!」の間にもう1つ半角スペースが挿入されます。
- この文字コードを使用すぎると、ブラウザできちんと読みやすい形で改行が挿入されなくなります。^{[2]
  X
  出典文献}
- また、 と入力して半角スペースを強制的に挿入することも可能です。
4
半角スペースを多く挿入する　連続した半角スペースをより多く挿入するには、以下のいずれかの文字コードを使用します。^{[3]
X
出典文献}
- 2タブ（半角スペース2つ分）：&ensp;と入力します。
- 4タブ（半角スペース3つ分）：&emsp;と入力します。
- インデント（字下げ）：    と入力します。
広告

方法 2

方法 2 の 3:
CSSを使用する

1
HTMLまたはCSSファイルを開く　CSSはHTMLファイルのヘッダーに適用することも、外部CSSファイルとして記述することもできます。
- HTMLファイルのヘッダーは、ファイル先頭の<head>タグと</head>タグの間に記述されています。
2
CSSスタイルシートを作成する　スタイルシートはHTMLファイルのヘッダー、または外部CSSファイルに作成します。以下のタグを使用してHTMLまたはCSSファイルにスタイルシートを作成しましょう。
- スタイルシートの記述を開始するときは、<style>と入力しましょう。CSSコードはすべてこの開始タグの後に記述します。
- スタイルシートの記述を終了するときは、</style>と入力しましょう。CSSコードはすべてこの終了タグの前に記述します。
3
インデント（字下げ）幅を指定するコードをスタイルシートに入力する　p {text-indent: 5em;}というコードをスタイルシートに入力しましょう。HTMLコードが正しければ、半角スペース5つ分のインデントスが挿入されます。
- 「text-indent:」の後に別の数字を入力すれば、半角スペースの連続する幅を調整することができます。
- 「em」という単位は、指定したフォントサイズでの半角スペース1つ分に相当します。パーセンテージ（例：「text-indent: 15%;」）や長さ（例：「text-indent: 3mm;」）など、他の単位を使用することも可能です。
4
インデントを挿入したい場所に<p>と入力する　HTMLファイルの本文でテキストをインデント（字下げ）したい場所に入力すると、スタイルシートで指定したフォントサイズに合わせてインデントがテキストに挿入されます。

広告

方法 3

方法 3 の 3:
整形済みテキストを使用する

1
HTMLファイルを開く　HTMLファイルを編集するには、メモ帳（Windows）やテキストエディット（Mac）などのテキストエディタを使用します。また、Adobe DreamweaverなどのHTMLエディタを使用することも可能です。HTMLファイルを開くには、以下の操作を行います。
- Windowsの場合はエクスプローラー、Macの場合はFinderでHTMLファイルが保存されているフォルダを開きます。
- 編集したいHTMLファイルを右クリックします。
- プログラムから開く（Windows）またはこのアプリケーションで開く（Mac）にカーソルを合わせます。
- HTMLファイルを編集したいプログラム（アプリケーション）をクリックします。
2
整形済みテキストにしたいテキストの前に<pre>と入力する　これが整形済みテキストの開始タグです。
3
<pre>タグの後に正確にテキストを入力する　テキストを整形済みテキストにすることで、Enterキーを押したときに挿入される半角スペースや改行がHTMLページに表示されるようになります。^{[4]
X
出典文献}
4
テキストの後に</pre>と入力する　これで整形済みテキストの記述が終了します。

広告

ポイント

ブラウザで半角スペースが変な記号になってしまう場合は、おそらくブラウザでの表示を想定していないワープロソフトで保存された余分なデータが原因です。このような場合は、メモ帳やテキストエディットなどのテキストエディタを使用しましょう。
CSSを使用すれば、テキストの文字間隔を含むページのレイアウトをより確実に行うことができます。
ノーブレークスペース（非分割空白）「 」は文字実体参照の一例で、キーボードで入力できない文字を参照するコードです。