ウェブランサー

HTMLの改行と半角スペースの扱い

HTMLでは<br>と記述すると改行になる

HTMLを記述する際に、普通のメールやブログ記事を書く時とは異なる点があります。それは、「改行」と「半角スペース」の扱い方です。HTMLでは、「Enterキー」を連打して何回改行しても、半角スペースをいくつ打っても、「半角スペース1つ分」と認識されます。今回は、それらの特徴について詳しく説明します。

HTMLは改行と半角スペースをキーボードで打っても画面に表示されない

HTMLは、ソースコード上に改行と半角スペースを連続していくつ記述しても、ブラウザには半角スペース一個分しか表示されません。何故そうなるのか、サンプルを使って実際に確認してみましょう。以下のソースコードをコピーして、ノートパッドやメモ帳などのテキストエディタに貼り付けてみて下さい。それが出来たらファイルを上書き保存をします。

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

HTMLでは


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


</body>
</html>

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

表示確認
HTMLでは 改行とスペースを何回書いても 「半角スペース1つ分」

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

HTMLで改行や半角スペースを連続で記述するのは、あくまでソースコード上で編集しやすいように見た目を調整するためにしか使えません。逆に、改行や半角スペースをブラウザがその通り認識してしまったら大変です。不要な隙間ができないように、ソースコードを一行で書く必要が出てきてしまうからです。

改行する

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

HTML
HTMLの改行コードは <br>

HTMLの中に<br>タグを配置すると、一つにつき改行が一回行われます。色々なウェブサイトのソースを見てみると沢山使われていることが確認できます。これを「改行タグ」と言い、HTMLを記述する上で最も良く使うタグの一つなので暗記しておきましょう。

半角スペースを表示させる

次に、連続した半角スペースをブラウザで表示させたい場合の解説です。コンピューターにとって「半角スペース」は、文字ではなく記号として認識されます。そのため、コンピューターに「半角スペースという文字」を読ませるには、特殊な命令を記述する必要があります。それが、以下に示す特殊文字コードです。

HTML
&nbsp;

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

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

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

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

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

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

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

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

HTMLリファレンス

HTMLって何? 初めての方でも分かる超基礎知識を解説します
HTMLの書き方 HTMLタグの書き方と基本的なルールについて
HTMLファイルの作り方 HTMLファイルを作成してから保存するまで
改行と半角スペース HTMLで改行や半角スペースを扱う際のルール
ハイパーリンクについて ドキュメントをリンクでつないでみましょう
ヘッダー情報について HTMLドキュメントのヘッダー情報について
ディレクトリの意味 「ディレクトリ」という言葉の意味
HTMLとXHTMLの違い XHTMLでWebサイトを作る際の特徴とルール