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