ホームページの文章を読みやすくする

文章が長くなってくると段落に分ける必要が出てきます。またさらにページ作りに手が込んでくるとページの区分けが必要になってきます。
段落は、<p> ~ </p>
区分、境界は、<div> ~ </div>
で囲まれた部分に記述していきます。例として以下のように記述して見ましょう。<p></p>と<div></div>の違いがわかりやすいように改行は入れていません。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<p>ようこそ私のホームページへ。</p>
<p>私の趣味は写真です。仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。 日本は縦に長い国ですから一年中どこかで花が咲いています。</p>
<p>そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に 北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。</p>
<div>ようこそ私のホームページへ。</div>
<div>私の趣味は写真です。仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。 日本は縦に長い国ですから一年中どこかで花が咲いています。</div>
<div>そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に 北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。</div>
</body>
</html>

するとこんな風に表示されます。 ごらんのように<p></p>で囲んだ部分は、間に1行空白行が出来ますが、<div></div>で囲まれた部分は外見上は改行と同じように見えます。

この改行と、段落、区分を組み合わせて文章を読みやすいように記述していきます。しかし、これでは文字の大きさが単調ですね。見出しぐらいは付けたいですね。それでは見出しについて次のページで解説しましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録