改行とスペース

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

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

HTMLでは


改行とスペースを何回書いても        『半角スペース一つ分』

</body>
</html>

上のソースをコピーしてノートパッドやメモ帳などのテキストエディタに貼り付けてみて下さい。それが出来たら、上書き保存をします。
新規テキスト ドキュメント.txt】というファイル名を【index.html】に変更して下さい。
このファイルをブラウザで表示してみましょう!そうすると…

HTMLでは 改行とスペースを何回書いても 『半角スペース一つ分』

真っ白なページに上の文字列が表示されましたか?
HTMLの改行とスペースは、自分がソースを編集する時に、見やすくするためのものとして覚えておきましょう!

改行のしかた

では、実際に改行したい場合ですが、下にあるタグを書きます。
<br> (<br />の意味については慣れてきてから調べてみましょう)

<br>一つにつき、一回改行が行われます。色々なサイトのソースを見てみると、沢山使われていますね!これを『改行タグ』と言い、HTMLを記述する上で最も良く使うタグの一つなので、暗記しておきましょう!

連続したスペース

次に、連続したスペースを、実際に表示させたい場合です。コンピューターにとって『半角スペース』は、文字ではなく、記号として認識されます。そのため、コンピューターに『半角スペースという文字』を読ませる必要があります。それが下に示す特殊文字です。

&nbsp; (はい、ここでちょっと引いた人…深く考えなくて大丈夫ですよ!)

この文字列でコンピュータに『半角スペースという文字』を伝える事が出来ます。もちろんこれを連続して記述すれば、その分空白が表示されます。
空白を表示させる方法としてもう一つ、全角スペースを記述する、というものがあります。これは、日本語表記の『文字』として認識されるため、連続して全角スペースを記述すれば、空白を空ける事が出来るのです。

改行とスペースのおさらい

では上に書いたソースの、改行や空白をそのままの状態で表示させたい場合の記述例を下に載せておきます。

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

分かりましたか?これをコピペして表示するとどうなるか、やってみて実際に確かめてみて下さい!

世界をつなぐハイパーリンク≫

戻る