改行とスペースを使いこなす - 超初心者向けHTML講座

改行とスペースを使いこなす - 超初心者向けHTML講座 2008/08/10 17:50

前回のラストで、次回は色々なタグを紹介しますと書きましたが、
それよりももうちょっと前段階の、HTML上での改行とスペースのルールについてお話します。

まず、以下の通りタグを打ち込んでみましょう。

すると、インターネットエクスプローラ上ではこのように見えます。
あんなにたくさん打ち込んだ改行がまったくされていません。

次にこのように打ち込んでみましょう。

今度は改行されました。

このように、HTMLでは<BR>を入力しないと改行されないというルールがあります。

それでは、今度は以下のように打ち込んでみましょう。

すると、今度はこのように表示されます。

このように、メモ帳上で全く改行をしなくても、
<BR>タグさえ入っていれば改行されるというのが確認できるはずです。

次は、「スペース」に関してのルールです。

まず、このように打ち込んでみましょう。

分かり辛いですが、4行目の「テスト」と「テスト」の間には
半角スペース（日本語入力をオフにしている状態で打ち込んだスペース）がたくさん並んでおり、
6行目の「テスト」と「テスト」の間には
全角スペース（日本語入力をオンにしている状態で打ち込んだスペース）がたくさん並んでいます。

これをインターネットエクスプローラで開くとこのようになります。
半角スペースはいくら打ち込んでも2つ以上並んで表示されることはありません。
それに対し、全角スペースは全てがちゃんと表示されました。

このように、半角スペースもHTMLタグや改行と同様に特殊な扱いがされています。

<半角スペースのルールについて詳しく>
半角スペースはオブジェクト（この用語の意味は後日）の次に入力された時にのみ1つだけ有効になります。
行の1文字目からオブジェクトまでの間に入力された半角スペースは全て無視されます。

HTML上での改行とスペースのルールをご理解いただけたでしょうか？

このルールは慣れるまではかなり戸惑うと思いますが、
使い方によってはとても便利に使うことができます。

その例を見てみましょう

例えば、こんなページを作りたかったとします。

下の二つのタグは、どちらも全く同じこのページが表示されます。

この2つのタグを見比べてみると、明らかに下のものの方が見やすいと思います。
文と文の間に行間を開け、タグと文字の間に半角スペースを入れて離してみるなど、
見やすくするための工夫をしています。

その反面、上の方はなんだかごちゃごちゃしている印象を受けます。
後からタグを打ち直すときに、これでは解読に時間がかかってしまいます。

どちらも全く同じ（厳密に言うと違うのですが）ページが表示されるのに、
改行やスペースを使いこなすだけでタグがこうも見やすくなります。

後からページを作り変える場合や、自分以外の人に見せる場合などを考えて、
見やすいタグを打ち込んでいくことを意識しましょう。

次回は、簡単な用語について解説したいと思います。

だんでぃ

web拍手を送る

定番のHTML辞典。僕も持ってます
HTMLタグ辞典第6版 XHTML対応

<<ã€€è¨˜äº‹ä¸€è¦§ã€€>>