基本的な文書構成
日常的によく目にする新聞、雑誌、書籍、Webページなどの文書では、
このような要素で構成されていることが多いです。もちろん例外もありますが、ここではこういった基本的な文書構成をWebページで再現する方法を紹介します。
何らかの部分とは、注意書きや、補足説明、要約部分等、他の文章とは独立、分割させたい部分のことです。このページの場合、入力例や、最後のまとめの部分が、そういった部分にあたります。
段落については<p>タグを使用します。この<p>タグについては、既にタグで定義で紹介しました。
見出しを定義する<h1>〜<h6>タグ
見出しを定義するには、
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
これらのタグを使用します。（Heading/Headlineの略）見出しを定義するタグは6つありますが、これは見出しには大見出し、それに準ずる小見出しといった「レベル」があるからです。HTML/XHTMLでは6段階のレベルを表現できるように<h1>〜<h6>が用意されています。
<h1>〜<h6>の中で最も優先されるのは<h1>で、最も優先されないのは<h6>となります。このため、通常、文書の最初に表示する大見出しには<h1>タグを使用することになるでしょう。
text.html
<html>
<head>
<title>はじめてのウェブページ</title>
</head>
<body>
<h1>はじめてのウェブページ</h1>
<p>これは、はじめて作成したウェブページです。うまく表示されるかな。
</p>
<h2>HTMLとXHTML</h2>
<p>HTMLあるいは、XHTMLを使用するとウェブサイトを作成できる。
</p>
<h3>タグとは</h3>
<p>大なり記号と小なり記号で囲まれた文字。
</p>
<h3>タグの役割</h3>
<p>タグを使用すれば何かを定義することができる。
</p>
<h2>CSS</h2>
<p>CSSで主にウェブページのビジュアル面を制御することができる。
</p>
</body>
</html>
ほとんどのブラウザでは<h1>〜<h6>でタイトルを定義すると、ボールド体（太い文字）で表示され、<h1>タグで定義したタイトルが最も大きな文字となります。一方、<h6>で定義したタイトルはかなり小さな文字となります。
多くのブラウザでは<h1>〜<h6>タグを使用すると、文字の大きさや太さといったスタイルが変更されます。しかし、単に文字を太くしたいという場合にこのようなタグを使用してはいけません。<h1>〜<h6>タグを使用しても大きな文字で表示されないブラウザも存在します。
しかし、何より大切なのは<h1>〜<h6>は見出しを定義するタグであって、文字を大きくしたりするためのタグではありません。つまり、そのような用途では文書として意味を成さないことになります。他にも文字のスタイルに影響を与えるタグが存在しますが、タグは基本的に何かの意味を定義するためのものですから、その意味を定義することにのみ使用するべきです。
例えば、目の不自由な人のために、Webページを点字として表現できるブラウザがあったと仮定してみてください。文字を大きくするために<h1>タグを使用していたなら、まったく意味不明な文書になってしまうでしょう。
文字のスタイルなどを変更するにはCSSを使用します。
何らかの部分を定義する<div>タグ
Webページに何らかのセクションを設けたい場合には、<div>タグ（Division）を使用します。
div.html
<html>
<head>
<title>はじめてのウェブページ</title>
</head>
<body>
<h1>はじめてのウェブページ</h1>
<p>これは、はじめて作成したウェブページです。うまく表示されるかな。
</p>
<h2>HTMLとXHTML</h2>
<p>HTMLあるいは、XHTMLを使用するとウェブサイトを作成できる。
</p>
<h3>タグとは</h3>
<p>大なり記号と小なり記号で囲まれた文字。
</p>
<div>
ただし、「<」、「>」、「&」などはエンティティ文字で表現する。
</div>
</body>
</html>
<div>タグを指定しても、改行されるだけで、<p>タグを使用したときと見た目の変化はありません。通常、CSSと組み合わせ、背景の色を変えたり、枠線をつけたりして、それが何らかの部分であることが分かるようにすることが多いです。
div_css.html
<html>
<head>
<title>はじめてのウェブページ</title>
</head>
<body>
<h1>はじめてのウェブページ</h1>
<p>これは、はじめて作成したウェブページです。うまく表示されるかな。
</p>
<h2>HTMLとXHTML</h2>
<p>HTMLあるいは、XHTMLを使用するとウェブサイトを作成できる。
</p>
<h3>タグとは</h3>
<p>大なり記号と小なり記号で囲まれた文字。
</p>
<div style="background: #ffc; border: 2px solid #333; padding: 8px">
ただし、「<」、「>」、「&」などはエンティティ文字で表現する。
</div>
</body>
</html>
始めのうちは<div>タグの使用は分かりにくいかもしれません。今のところは後からCSSと組み合わせることを頭に入れておいて、何らかの部分にこの<div>タグを記述しておいてください。CSSを使用する際にこの<div>タグの便利さに納得されると思います。
まとめ
- <h1>、<h2>、<h3>、<h4>、<h5>、<h6>要素は見出しとして定義される
- <div>タグは何らかの部分であることを定義する
基本的な文書構成
タイトル
ページの先頭
2022 Webデザインレッスン