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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第62号> 今週のおさらい
                    毎週金曜日配信 What's New 2003/8/8
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第10回 --- 見出しと段落の正しい使い方
   ■ XML講座 第2回 --- XMLの決まりごと
HTML講座 --- 見出しと段落
HTML文書を作成する上で、「見出し」や「段落」の利用頻度は非常に高い要素です。むしろ、なくてはならない存在でもあり、文書構造を構成する重要な要素です。
見出し
見出しとは、アイ・キャッチの働きがあります。当サイトのようなテキスト中心としたページでは、見出しは大変重要な役割を示しています。
訪問するユーザは、こと細かく内容を読むわけではありません。そのほとんどが目に止まった見出しを見て、興味あるものだけを抽出して読み始めるのが一般的です。
一般的な視覚系ブラウザでは、見出し要素は強調した大きめの文字で表示されます。

見出しタグによる文字の大きさのサンプル

しかし、見出しに供するタグを文字の大きさのために使うことは文法違反です。決してそのような使い方をしないようにしましょう。
見出しを使う場合、必ず h1タグから使わなければなりません。決して h2、h3 から初めてはいけません。見出しタグは文書の構造を提供するものですから、その構造上、いきなり第二見出しや第三見出しが登場することは、欠陥構造になってしまいます。
同様に、h1タグのあとに見出しタグが登場する場合、h3タグも欠陥構造となります。文書の論理的な構造とは、誰が見ても理解可能な構造でなければならないのです。
文字の大きさという都合上、順序や規則を曲げて利用することは決して好ましくありません。文字の大きさを気にするのであれば、スタイルシートを使えば簡単に設定することが可能です。
段落
段落とは、まとまった文章の集合です。この文章の集合体の要約が「見出し」とも解釈されます。段落を表すタグは、pタグを用います。
HTMLでは、<p> の終了タグを省略することが可能ですが、XHTMLでは許されておりません。できるだけ終了タグを記述するように心がけましょう。
一般的な視覚系ブラウザでは、段落を設定した場合、1行分の余白を持たせています。これは、1993年、最初の視覚系ブラウザである NCSA Mosaic がそのように表現したことが起因となっています。しかし、仕様書にはそのような記述はありません。つまり、視覚的にここは段落、と分かりやすくするための表現方法だったといえるでしょう。
段落も見出しと同様に、論理的な文書構造を構成する重要な要素です。見出しと段落を自由に使いこなせることができれば、ある意味では「初心者」脱出です。
段落と改行
文章の途中で強制的に改行させるタグは、<br> です。しかし、段落は文章の集合であるわけで、途中で改行させることの意味がありません。どうしても途中で改行させたい場合は、別途段落を用いれば済むはずです。
また、brタグを連発して、そこがあたかも段落のように見せるのは非常にみっともない構文になってしまいます。それは段落とは呼べません。特に初心者が安易に使ってしまう落とし穴です。
また、強制改行させる場合、文脈の途中で改行させないよう十分注意しなければなりません。できることなら、強制改行を使わなくても済む設計を考えるようにしましょう。
XML講座 --- XMLの決まりごと
XML文書の本文を XMLインスタンスと呼びます。これは、アプリケーションが XMLを処理するためのプロセスを記述するという意味があります。
つまり、XMLは、それ自体で何かをするのではなく、XMLが解釈できるアプリケーションによってはじめて処理できるための文書であることを知ってください。XMLが、HTMLのように表現を主体としたマークアップ言語と大きく異なる1つの要素です。
XMLは、ホームページを作成するためのマークアップ言語ではありません。しかし、ブラウザで処理できるアプリケーションさえあれば、Webページとして処理できる可能性を秘めています。
XML初級講座では、XML文書を Webブラウザで表示するまでのプロセスを解説します。
XMLの構造
SGML のアプリケーションとして、HTML および XML が定義されました。その意味で、両者はあくまで SGML の原則を引き継いでいます。
「文書は論理的な構造で記述する」、ということは何度となくこの講座で述べてきた通りです。構造は階層的な記述、つまり木(ツリー)構造を構成しています。
ツリー構造では、要素の親子関係 が発生します。そのため、XML文書では、正しくタグの対応についての記述が求められます。これは、HTMLでも同様です。
間違った記述
<p><em><a href="index.html">Home</em></p></a>

正しい記述
<p><em><a href="index.html">Home</a></em></p>
ツリー構造を達成するためにも、タグは Well-Formed(開始タグと終了タグの正しい対応)で記述しなければなりません。
上記の場合、最初の親となる要素は <p> であり、直接の子要素は <em> です。そして、<em> の子要素が <a> になります。したがって、<p> からの <a> は孫要素となります。
XMLインスタンスを作成する上で、タグの対応やツリー構造は、厳格な記述が求められています。その理由は、XMLを解釈するアプリケーション(XMLパーサ)が、正しく処理を可能にするための約束事です。間違ってしまうと、XMLインスタンスを処理できなくなってしまいます。
HTMLでは、特に Microsoft Internet Explorer (MSIE) では、多少間違った記述でも寛容にブラウザ側で補完してくれますが、XMLではそううまくいかないのです。
HTMLを学ぶ初心者の方には、特にタグの対応については十分に気をつけて、正しい記述に慣れるよう勉強してください。HTMLさえ、正しい文法の基に書き上げることができれば、XHTMLXML の作成は決して不可能なことではありません。


Valid XHTML 1.1! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp