初心者のためのホームページ作り 第110号

初心者のためのホームページ作り

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

<第110号> 今週のおさらい
              毎週金曜日配信 What's New 2005年2月10日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ やさしいHTML入門 第4回 --- 見出しと段落
やさしいHTML入門 --- 見出しと段落
「Webページの命はコンテンツである」と言われるほど表示される内容、デザイン、レイアウトなどは作成側の気になる部分でもあるでしょう。豊富で分かりやすい詳細な情報、使い勝手のよさなどページ作成についての課題はたくさんあります。
今回はその中の一部である「見出し」と「段落」の正しい作法について解説します。
見出しとその役割
文字コンテンツを情報として提示するとき (文字コンテンツに限らないが) 、いきなり提示することは特別な事由がない限り少ないでしょう。その内容の要約を「見出し」としてコンテンツの冒頭に配置するのが一般的であり望ましいことです。
閲覧者がページないコンテンツの中から求める情報を探し出すときに「見出し」は有効であり親切というものです。また、検索サーチ型ロボットも見出しを拾ってくれることが期待されます。
私たちが新聞などを読むとき、最初に目を通すのが「見出し」であり、興味ある記事を探し出します。いわゆる「ナナメ読み」をするとき、見出しは大変ありがたい存在です。
HTMLにおける「見出し」の作法
HTMLでは「見出し」は6段階に分類され、「第一見出し」から「第六見出し」までのタグが定義されています。 見出しタグのサンプル
サンプルのとおり見出しタグは、h1 から h6 まで定義されていますが、大切なことは使い方です。文字サイズの変化のために利用するのは明らかな文法違反です。見出しタグは文字サイズ変更のために利用するものではありません。
また最初に登場する見出しタグは必ず第一見出し h1 です。大見出しがなくていきなりの中見出し、小見出しでは視覚的に、あるいは文法的に考えて不自然であり、これも明白な文法違反です。
段落とは
見出しが提示されれば、それに対応するコンテンツが必要になります。段落とは、あるまとまった1つの集合体です。もだしで定義された要約の詳細が段落に配置され、見出しと段落の対になります。
また、段落は当ページのようにいくつか区切って利用することが考えられます。段落の基本的なテーマは見出しに準じますが、複数の段落が存在しても決して変ということではありません。
HTMLにおける段落の作成
HTMLでは「段落」の作成は <p> を用います。このタグはコンテナタグで終了タグが必要になりますが、省略することも可能です。
(当講座では終了タグの省略は推奨していません。)
段落タグは一般的な視覚系ブラウザでは前後に1行分の余白を持たせますが、それはあくまでソフトウェア側の使用であり、標準仕様では表示方法を規定していません。
段落が連なる場合には、1行分の余白が見やすくなるという効果がありますので、一概に否定する気はありません。ただし、余白はスタイルシートで十分にコントロールすることができますので、ブラウザ側の仕様に任せることなく作者が任意に設定すればいいでしょう。
段落を定義する pタグはブロックレベル要素として分類され、この範囲に他のブロックレベルを配置することができませんので注意してください。考えてみればリストや表組などは、段落を抜ければ十分に作成可能なわけですから、終了タグの位置さえ気をつければ十分でしょう。
段落と改行
文章の途中で改行したい場合は強制改行タグ br を使います。これを使えばどのような状況であれ、とりあえず改行できます。
私の場合は強制改行タグを使うことがめっきり少なくなってきました。何故ならば、改行したい場合は段落を区切れば済むので必要としません。むしろ構文がすっきりして後々のメンテナンスが楽になります。特殊な使い方を除けば強制改行を使う必要がないのです。
また、強制改行タグを連発してそこがあたかも別の段落のように見せるのは間違いです。構文全体が何となくみっともなく感じられます。段落はあくまで段落ですから正しい使い方を覚えてください。強制改行による余白の取り方は別の方法があります。


This page is Valid HTML 4.01! 初版公開日 2005年2月11日
Copyright(C) 2002-2005 banban@scollabo.com