HTMLで改行や半角スペースを表示させる方法

SNSでシェアする

改行や半角スペースを連続で書き込んでもブラウザには表示されない

HTMLを記述する際、メールやワードプロセッサで文字を書く時と同じ感覚で「改行」や「半角スペース」を打っても、思い通りには表示されません。ソースコード上で何回も「Enterキー」を連打しても、半角スペースをいくつ打っても、ブラウザ上には「半角スペース１つ分」しか表示されないのです。

なぜそうなるのでしょうか。今回は、その特徴について詳しく解説していきます。

ソースコードとブラウザに表示される見た目の違い

HTMLのソースコードには、改行や半角スペースがいくつも含まれています。特に、タグとタグの間に隙間を空けてコーディングしやすくする場合が多いです。例えば、日本語の文章の中に改行と半角スペースを連続で記述しても、ブラウザには半角スペース一個分しか表示されません。慣れてくるまで不思議に思うかもしれませんが、これにはちゃんとした理由があります。

実際にサンプルを使って確認してみましょう。以下のソースコードをコピーして、メモ帳などのテキストエディタに貼り付けてみて下さい。それが出来たらファイルを上書き保存します。


<html>
	<head>
		<title>改行と半角スペース</title>
	</head>
	<body>

HTML     では


改行とスペースを何回書いても          「半角スペース一１つ分」


	</body>
</html>

新しく作ったテキストファイルは、「新規テキスト.txt」のような名前になっていると思うので、これを「index.html」に変更して下さい。変更し終わったら、このファイルをブラウザで表示してみましょう。その結果は……

真っ白なページに上記のような文字列が表示されたと思います。HTMLに記述した改行と半角スペースは、ソースコード上に記載したからといって、その通りにブラウザが解釈してくれるわけではありません。

改行は、あくまで人間が見た目で判断する能力を持っているから機能する表現であって、ブラウザがそのまま解釈を行ってはいけないのです。逆に改行や半角スペースが、そのまま画面に映し出されてしまったら大変です。不要な隙間ができないように、全てのソースコードを一行で書く必要が出てきてしまうからです。

改行を画面に表示させる

それでは、HTMLをブラウザに表示した時に期待通り改行させたい場合はどうすれば良いのでしょうか。HTMLはマークアップ言語ですから、改行を宣言するタグを書きます。


HTMLの改行コードは <br>

HTMLの中に<br>というタグを配置すると、ひとつにつき一回の改行が行われます。色々なウェブサイトのソースコードを見てみると、それなりの数が使われていることを確認できます。これを「改行タグ」と言います。


あいうえお<br>
かきくけこ<br>
さしすせそ<br>

半角スペースを画面に表示させる

連続した半角スペースをブラウザに表示させる方法を解説します。コンピューターにとって「半角スペース」は、文字ではなくプログラム上の命令として働きます。そのため、コンピューターに「半角スペースという文字」を読ませるには、別の命令が必要になります。それが、以下に示す特殊文字コードです。

&nbsp;

この「&nbsp;」という文字列が、ブラウザに「半角スペースという文字」を伝えるための命令になります。もちろん、これを連続して記述すれば、その分半角スペースが表示されます。


あいうえお&nbsp;&nbsp;&nbsp;&nbsp;
かきくけこ&nbsp;&nbsp;&nbsp;&nbsp;
さしすせそ&nbsp;&nbsp;&nbsp;&nbsp;

この特殊文字コードは、HTMLのタグではなく、コンピューターの文字セット内で定義されている特殊な文字情報です。特殊文字には「&キーワード;」のように、記号を呼び出すためのルールが用意されています。ブラウザに表示される時には、人間が目で見て認識できるシンボルが表示されますが、HTMLの実態にはルールに従った文字列を記述することになります。

空白を表示させるもうひとつの方法として、「全角スペース」があります。全角文字は、日本語表記の「文字」として認識されるため、連続して記述すれば空白を空ける事ができます。ただし、この方法はあくまで「マルチバイト文字」の特性を利用したものです。単なるレイアウト目的で空白を設けたい場合は、スタイルシートを使用しましょう。

連続した改行と半角スペースを表示させるには

HTMLのソースコード内における改行と半角スペースの扱いについて、なんとなく分かって頂けたでしょうか。

それでは、最初に書いたソースコードの改行や空白をそのままの状態でブラウザに表示させるための記述例を試してみましょう。


<html>
	<head>
		<title>改行と半角スペース</title>
	</head>
	<body>
<br>
HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;では<br>
<br>
<br>
改行とスペースを何回書いても&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;「半角スペース１つ分」<br>
<br>
	</body>
</html>

これを、先ほど作ったHTMLファイルにコピペして上書き保存しましょう。それをブラウザで表示するとどうなるのか、実際に試してみて下さい。

HTMLリファレンス一覧

HTML学習ガイド

入門用の解説から中級者向けの概念まで

詳細 〉

HTMLタグ一覧表

目的や頭文字からサンプルを検索

詳細 〉

特殊文字・特殊記号

HTMLで使える文字参照コード

カラーコード

HTMLやCSSで使える色指定