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