HTMLで改行や半角スペースを表示させる方法
改行や半角スペースを連続で書き込んでもブラウザには表示されない
HTMLを記述する際、メールやワードプロセッサで文字を書く時と同じ感覚で「改行」や「半角スペース」を打っても、思い通りには表示されません。ソースコード上で何回も「Enterキー」を連打しても、半角スペースをいくつ打っても、ブラウザ上には「半角スペース１つ分」しか表示されないのです。
なぜそうなるのでしょうか。今回は、その特徴について詳しく解説していきます。
ソースコードとブラウザに表示される見た目の違い
HTMLのソースコードには、改行や半角スペースがいくつも含まれています。特に、タグとタグの間に隙間を空けてコーディングしやすくする場合が多いです。例えば、日本語の文章の中に改行と半角スペースを連続で記述しても、ブラウザには半角スペース一個分しか表示されません。慣れてくるまで不思議に思うかもしれませんが、これにはちゃんとした理由があります。
実際にサンプルを使って確認してみましょう。以下のソースコードをコピーして、メモ帳などのテキストエディタに貼り付けてみて下さい。それが出来たらファイルを上書き保存します。
<html>
<head>
<title>改行と半角スペース</title>
</head>
<body>
HTML では
改行とスペースを何回書いても 「半角スペース一１つ分」
</body>
</html>
新しく作ったテキストファイルは、「新規テキスト.txt」のような名前になっていると思うので、これを「index.html」に変更して下さい。変更し終わったら、このファイルをブラウザで表示してみましょう。その結果は……
真っ白なページに上記のような文字列が表示されたと思います。HTMLに記述した改行と半角スペースは、ソースコード上に記載したからといって、その通りにブラウザが解釈してくれるわけではありません。
改行は、あくまで人間が見た目で判断する能力を持っているから機能する表現であって、ブラウザがそのまま解釈を行ってはいけないのです。逆に改行や半角スペースが、そのまま画面に映し出されてしまったら大変です。不要な隙間ができないように、全てのソースコードを一行で書く必要が出てきてしまうからです。
改行する
それでは、HTMLをブラウザに表示した時に期待通り改行させたい場合はどうすれば良いのでしょうか。HTMLはマークアップ言語ですから、改行を宣言するタグを書きます。
HTMLの改行コードは <br>
HTMLの中に<br>というタグを配置すると、一つにつき一回の改行が行われます。色々なウェブサイトのソースを見てみると沢山使われていることが確認できます。これを「改行タグ」と言い、HTMLを記述する上で良く使うタグなので覚えておきましょう。
半角スペースを表示させる
次に、連続した半角スペースをブラウザで表示させたい場合の解説です。コンピューターにとって「半角スペース」は、文字ではなくプログラム上の命令として働きます。そのため、コンピューターに「半角スペースという文字」を読ませるには、別の命令が必要になります。それが、以下に示す特殊文字コードです。
この「 」という文字列が、ブラウザに「半角スペースという文字」を伝えるための命令になります。もちろん、これを連続して記述すれば、その分半角スペースが表示されます。
この特殊文字コードは、HTMLのタグではなく、コンピューターの文字セット内で定義されている特殊な文字情報です。特殊文字には「&キーワード;」のように、記号を呼び出すためのルールが用意されています。ブラウザに表示される時には、人間が目で見て認識できるシンボルが表示されますが、HTMLの実態にはルールに従った文字列を記述することになります。
空白を表示させるもう一つの方法として、「全角スペース」があります。全角文字は、日本語表記の「文字」として認識されるため、連続して記述すれば空白を空ける事ができます。ただし、この方法はあくまで「マルチバイト文字」の特性を利用したものです。単なるレイアウト目的の場合は、スタイルシートを使いましょう。
連続した改行と半角スペースを表示させるには
HTMLのソースコード内における改行と半角スペースの扱いについて、なんとなく分かって頂けたでしょうか。
それでは、最初に書いたソースコードの改行や空白をそのままの状態でブラウザに表示させるための記述例を試してみましょう。
<html>
<head>
<title>改行と半角スペース</title>
</head>
<body>
<br>
HTML では<br>
<br>
<br>
改行とスペースを何回書いても 「半角スペース１つ分」<br>
<br>
</body>
</html>
これを、先ほど作ったHTMLファイルにコピペして上書き保存しましょう。それをブラウザで表示するとどうなるのか、実際に試してみて下さい。