2.■複数行の文字を表示させる(改行)

文字を記述していく際に、改行がない延々と続く文字列は
閲覧者の集中力を弱めてしまいます。

　長い距離を左右に移動させる目の運動は疲れますし、
次の行がわからなくなる事が起こりやすいものです。
適切に改行された短い文章は、読み易いものです。

悪い例：文字を記述していく際に、改行がない延々と続く文字列は閲覧者の集中力を弱めてしまいます。長い距離を左右に移動させる目の運動は疲れますし、次の行がわからなくなる事が起こりやすいものです。適切に改行された短い文章は、読み易いものです。

<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body>
ここに内容を記述していきます。<br>
二行目を記述していきます。<br>
三行目を記述していきます。
</body>
</html>

表示結果

<br>とは、改行を意味します。
これについては、かこむ必要はなく、単独で機能します。
<br>内容</br>とする必要はないわけです。

ステップアップ！ CSS:line-heght

以下のコードを記述すると、
文字の縦方向の行間を調整することができます。
文字を読み易くする際には効果的です。

<div style ="line-heght:120%">
改行が延々と続く長い文章は、例え折り返しても、
</div>

■line-heght:100%の場合
改行が延々と続く長い文章は、例え折り返しても、
次の行が見つけずらくなります。
そんな時は、「line-height」で
上下の行間を調整すると、とても読み易くなります。

■line-heght:150%の場合
改行が延々と続く長い文章は、例え折り返しても、
次の行が見つけずらくなります。
そんな時は、「line-height」で
上下の行間を調整すると、とても読み易くなります。

*横方向の行間には、「letter-spacing」があります。

文章が長くなると、 <br> のオンパレードで
コードが長くなってしまいます。
そんな時に便利なのが、<pre> タグです。

<pre>
これで囲んだ文字は、
入力したそのままの折り返し形式で
画面に表示されます。
中には各種タグも使えます。
<b>大文字</b>
</pre>

表示結果

これで囲んだ文字は、
入力したそのままの折り返し形式で
画面に表示されます。
中には各種タグも使えます。
大文字

入力を簡易にし、コードを短く抑えたい場合に最適です。