ホームページ作成講座 -入門編-第5講

第5講では、文章の改行や段落について解説します。 第4講をまだお読みでない方は、先に第4講をお読みください。

スポンサーリンク

改行しよう

タケシ 表示させる文章を改行させるには <br> を使うんだ
「brタグ」は「終了タグ」は要らないんだ
サトシ へえ

文章の行を改めることを「改行」といいます。 しかし「HTML文書」中で改行を行っても、無視されてそのまま表示されるか、ただのスペースとなってしまいます。 そこで表示させる文章を改行させたい場合は、次のように <br> タグを用います。

<html><body>1行目<br>2行目</body></html>

「brタグ」には「終了タグ」はありません。実行すると、次のようになります。

1行目
2行目

通常、「brタグ」を使った場合は合わせて「HTML文書」も改行を行った方が見やすくなります。 表示には影響しませんので、自分が作っていく上で見やすいように工夫しましょう。 次のようにしても、上記と同じ結果になります。

<html>
<body>
1行目<br>
2行目
</body>
</html>


サトシ 2つ連続で使うと2回改行されるのか?
タケシ そういう事だ
でも複数改行を「brタグ」でするのは好まれないらしいぞ
サトシ え・・・  じゃあどうやるんだ?
タケシ そういう時は「段落」を作るんだ

段落」は <p>〜</p> タグで作ることができます。
段落を作ると、通常は2行分の隙間を空けて表示されます。

<html>
<body>
<p>1段目</p>
<p>2段目</p>
</body>
</html>

1段目
 
2段目

段落の中で改行を行うことも出来ます。

<html>
<body>
<p>
ボクはマサラタウン出身の<strong>サトシ</strong>です<br>
このホームページではボクについて紹介しています
</p>
<p>
出場したポケモンリーグは「<font color="#ff0000">セキエイ大会</font>」・・・
</p>
<p>見てくれてありがとうございました</p>
</body>
</html>

ボクはマサラタウン出身のサトシです
このホームページではボクについて紹介しています
 
出場したポケモンリーグは「セキエイ大会」・・・
 
見てくれてありがとうございました


サトシ 色々出来るようになってきたぜ!
タケシ その調子だ
サトシ でもさ 前から気になってたんだけれど
<html>〜</html> や <body>〜</body> って何なの?
タケシ そうだな  じゃあそろそろ そこについて教えてやるか

第6講:背景に色を付けようへ続く

まとめ

  • 「HTML文書」中では改行しても、表示には影響しない
  • 改行するには <br> タグを用いる
  • 段落を作るには <p>〜</p> タグを用いる

スポンサーリンク