ドリル式ホームページの作り方

見出しと段落

ドリル式ホームページの作り方TOP  >>  Lesson1〜HTMLの基礎〜  >>  見出しと段落

見出しと段落

見出しと段落の重要性

次は、見出しタグ(h)と段落タグ(p)について述べようと思います。

新聞や本をよく読む人はわかると思いますが、これらは、

大見出し(h1)
 小見出し(h2)
  段落(p)
  段落(p)
 小見出し(h2)
  段落(p)

のような構造で書かれていると思います。

私は昔、本が嫌いな上に、形式否定派でもあったので、このような型にはまった形式なんか知ったこっちゃなく、めちゃくちゃなhtmlを記述しておりましたが、本を読むようになってから、この構造がシンプルですが非常に読みやすいことがわかりました。

これは書き手の問題というより読み手の問題であり、最初に読み手は見出しをパラパラ眺めて、見出しに惹かれたときに、そこに含まれる段落を読もうと考えます。

また、魅力的なフレーズの見出しを小刻みに記述することは、必要な部分(興味ある部分)と不必要な部分を分けて読むこともでき、かつ大まかな内容を知りやすくなるなど、読み手にとって非常に読みやすいものになります。

もちろん、検索エンジンにとっても読みやすいものとなりますので、上位表示には必須となります。

見出しと段落の使い方

”h”は見出しを表すタグで、h1,h2・・・h6まであり、数字が大きくなるに従い重要度が下がります。また、h1は1ページに1回しか使えず、タイトルの次に重要なタグです。

”p”は段落を表すタグで、hタグの後に記述します。

hやpタグはデフォルトでフォントの大きさや太さ、文字間隔などがその重要度に準じて決められています。

今は述べませんが、スタイルシートでこれらのスタイルは変更できますので心配しないで下さい。

見出しタグ(h)も段落タグ(p)も、使い方はそのタグでくくるだけです。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
</head>
<body>
<h1>ホームページ作成講座</h1>
<h2>Lesson1:メモ帳を起動してみよう!</h2>
<p>ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</p>
<p>Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</p>
<p>さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</p>
<h2>LLesson2:タグを書いてみよう!</h2>
<p>ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。</p>
<h3>L<文字の大きさを変える></h3>
<p>文字の大きさは、font sizeタグを使用します。</p>
<h3>L<文字の色を変える></h3>
<p>文字の色は、colorタグを使用します。</p>
</body>
</html>

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson1〜HTMLの基礎〜

  1. ホームページを作るのは難しい?
  2. 拡張子を表示させる
  3. メモ帳を起動してみよう
  4. html骨格を記述する
  5. 文字を表示させてみる
  6. エンコードを指定する
  7. タイトルを指定する
  8. 見出しと段落
  9. 著作権情報を記述する
  10. 罫線を引く
Copyright(C) ドリル式ホームページの作り方 all right reserved.