■ 改行が出来るタグ

HTMLでは「改行します!」と宣言しなければ改行してくれません。

Webサイトをつくる前にあなたに、ぜひ憶えておいて欲しいタグがあります。

文章を改行するタグ。それが<br>です。

■ <br> (ビーアール)
<br>
文章を改行するには、<br>を使います。
逆に、<br>がなければ改行しません。






■ 完璧にマスターするために


Webサイトをつくるには主に、HTMLという言語を使いますが、
このHTMLでは、あなたが書いた通りのテキストが表示されるというルールがあります。

もう少し分かりやすいように、具体的な例を挙げてみます。


▼ 違いはどこにあるのでしょうか?


以下の2つは見た目にかなり違いがあります。

(例1)
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

(例2)
テキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキスト

では、この違いは一体何でしょうか?

それは、改行しているということです。


メモ帳やワードなどのことをテキストエディタといいますが、
テキストエディタでは改行したいときに普通エンターキー(改行キー)を押します。

しかし、HTMLでは、「改行しなさい!!」と指定しなければ、改行することができません。
例え、何度エンターキーを叩いても同じことです。まったく改行されません。


さっそく2つの例のソースコードを見てみましょう。



▼ 実際のソースにはこのように書いてあります。


(例2)の行の最後には<br>がくっついています。

(例1のソース)
テキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキスト

(例2のソース)
テキストテキストテキスト<br>
テキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキスト<br>
テキストテキスト<br>

いかがでしょうか?

(例1)では、エンターキーで何度も改行しているのに対して、
(例2)では、段落の最後に<br>が書かれています。

言い換えると、(例1)では改行を指示しておらず、(例2)では、改行を指示しています。
もっと言えば、(例1)では「改行しなくてもいいよ。」と言っているようなものです。

(逆に、ややこしくなってしまいました、、、(涙))



▼ 美しい文章レイアウトの秘訣は改行


あなたの改行で文章の読みやすさ、カッコ良さが決定します。

(例1)と(例2)を見比べていただければ、明らかだと思いますが、
改行がある、ないでは、「見やすさ」が断然変わってきます。

(もちろん(例2)の方が見やすいですよね?そして何よりカッコイイですよね?)


ex) 仮に、あなたが2000文字分の文章を書いたとします。

あなたがどれほど美しくデザインするためにエンターキーを叩いたとしても、
改行タグ<br>を書かなければ(例1)のようにただの1列、何の飾りもない文字列になってしまいます。

改行したいときには必ず<br>を入力しましょう。



以上で説明はおしまいですが、改行タグ<br>は何度も何度も繰り返し使う、
最も使用頻度の高いタグだ、ということができるでしょう!
あなたが書いた文章を生かすも殺すも「改行」次第です!使い方もふくめて、ぜひマスターしましょう。




■ 実は、他にも改行できるタグがあります。

<br>以外にも文章を改行する働きをもっているタグがあります。


■ <p> (ピー)
<p>
<p>は段落をあらわすタグです。
終了タグは省略できますが、キチンと閉じる習慣をつけておきましょう。
<p>ここに文章を書きます</p>
また、alignを使うことによってテキスト位置を指定できます。
値:center:中央表示 // right:右端表示 // left:左端表示(既定値) // justify:両端揃え

(例)テキストを右端に表示させます。
<p align=right>テキストを右端に表示させます。</p>
すると、このように表示されます。

テキストを右端に表示させます。



話は少し変わりますが、これはとても使いやすいので憶えておいた方が良いでしょう。

(例)画像とテキストを組み合わせます。
<img src="br.gif" width=88 height=48 align=left style="margin-right:15px;">
テーブルなんて使わなくっても<br>こんなレイアウトが可能です!
すると、このように文字が回りこんで表示されます。
テーブルなんて使わなくっても
こんなレイアウトが可能です!
ちなみに、あまり使いませんが解除したいときにはclearを使います。


■ <div> (ディブ ※)
<div>
<div>は特定のブロックを指定します。
指定した範囲に様々な設定を行うことができます。 (例)
<div style="font-size;13pt;color:#0000aa;">(1)ここに文章を書きます</div>
<div class="dbn">(2)ここに文章を書きます</div>
すると、このように表示されます。
(1)ここに文章を書きます
(2)ここに文章を書きます
※(1)にはスタイルシートを、(2)にはクラス要素を使用しています。

[ → スタイルシートについての詳しい説明はコチラをご覧下さい。 ]

※ これが正しい読み方なのかは分かりません(知っている方はぜひ教えてください。。。(笑))



繰り返しになりますが、改行タグは最も大切なタグです。
あなたが書いたテキストを生かすも殺すも改行しだい!

読みやすさとカッコ良さをかねそなえた改行をマスターしましょう!

(↑ 上手な改行を見つけたら、私にもぜひ教えてくださいね(笑))