Home | 第95号 | 第96号 | 第97号 | 目次

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

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

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

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

＜第96号＞ 今週のおさらい
　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年6月24日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ 正しい文法のために  第１回 --- 論理構造
　　■ CSS講座　第16回 --- リスト
◆ 正しい文法のために --- 論理構造
「HTMLのようなマークアップ文書は、論理的な構造で記述すべきだ」 と述べる書籍や Webサイトが多くあります。 (当サイトもその１つ)
初心者にとって論理構造という意味が抽象的過ぎて理解に苦しむところでもあるでしょう。 「論理構造って何よ？」ってな具合に。
■ 論理構造とは
マークアップとは、コンテンツに示される各要素ごとを決められた手順とタグによって囲みます。HTMLとは Hyper Text Markup Lanhuage の略語で、他の文書との相互リンク可能なマークアップ言語です。
構造とは、コンテンツ要素の意味を明示的に示すもので、「見出し」、「段落」、「リスト」、「表組」などに区切られたひとつの「まとまり」を表します。
各コンテンツ要素は、それぞれに関連した脈絡の中で配置され、文書全体が階層 (ツリー構造) を持っています。
例えば、以下の構文を見てみましょう。
<body>
<font size="6">文書の論理構造</font><br>
<font size="3">マークアップ言語の本来の振る舞いは、
　　　 　論理的な構造を正しく伝えることである。</font>
</body>
この構文は、単にフォントの大きさを変化させただけの文字列 (テキスト) に過ぎません。一般的なグラフィカル・ブラウザでは「見出し」と「段落」のように見えますが、そう見えるだけであって決して見出しや段落が形成しているわけではありません。
言い換えれば、論理的な構造を持たない誤った構文であることが分かります。
正しい構文は以下のとおりとなります。
<body>
<h1>文書の論理構造</h1>
<p>マークアップ言語の本来の振る舞いは、
　 論理的な構造を正しく伝えることである。</p>
</body>
サンプルの実行結果
■ 階層構造
論理的な構造を持つ構文は、基本的に文書全体が階層構造で表されます。例えば以下の構文をツリー構造で表すとどうなるでしょうか。 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" 
             content="text/html; charset=Shift_Jis">
<title>サンプル</title>
</head>

<body>
<h1>HTMLの基本</li>
 <p>マークアップ言語の原点は以下の精神から出発しています</p>
 <ul>
 <li>物理的なレイアウトではなく文書の構造を反映する</li> 
 <li>コンピューターと人間の両方が理解可能な形式とする</li>
</ul>

<p>こうした観点から、マークアップの標準仕様として HTML4.01が
   Webの標準仕様を制定する機関である 
   <a href="http://www/w3.org/">W3C</a> より正式に勧告されて
   います。</p>
</body>
</html>
この構文は以下のような図で示すとおりの階層であることが分かります。

HTML構文のツリー構造図

この図を見てお分かりのとおり、すべてのコンテンツが論理的な構造の中で配置されてい、それぞれが意味のある要素で囲まれています。
■ マークアップの理念
HTMLというマークアップ言語の、そのルーツは SGMLにあります。HTMLは SGMLよりも洗練され、論理的な構造で示すことによりコンピュータと人間の双方に理解可能なマークアップ言語となっています。
「マークアップする」ということは、「意味付けする」ということであり、定義されたタグによって、要素内容を囲みことを指します。
作者は囲まれる要素内容が見出しであるのか、段落であるのか、それとも箇条書きであるのかといった「要素」を判断して、適切なタグによってマークアップします。
正しくマークアップされた文書は、コンピュータの OS (基本ソフト) や通信環境、ユーザエージェントの銘柄に関係なく、正しくレンダリングされます。
マークアップは、物理的なレイアウトを設計するものではなく、論理的な基本構造を持った文書を作成するためにあります。
マークアップの理念とは、
マークアップは、この２つの基本的な理念の基に設計されるものです。
◆ CSS講座 --- リスト
箇条書きなどのコンテンツを作成するために用いられるリストのスタイルシート応用について解説します。
リストには番号なし (順不同)と、番号付きリストがありますが、両方ともマーカーというリスト項目の行頭で表示されます。スタイルシートを利用することで、マーカーの形状を任意に変更することができます。
■ 番号なしリスト
一般的な視覚系ブラウザでは、番号なしリスト (ul要素) のマーカーは「黒丸」が初期値となっています。 (あくまでも一般的な視覚系ブラウザの仕様として)
スタイルシートを使ってマーカーの形状を変更をするためには、list-style-type属性を使います。
具体的な list-style-type属性の値は以下のとおりです。
スタイルシートではマーカーには画像を指定することも可能です。画像を指定するためには、list-style-image属性を用います。属性値には画像の所在の URIを指定します。
マーカー形状変更の具体的な書式は以下のとおりです。 
ul { list-style-type: circle }   白丸を指定
ul { list-style-image: url("makaer.gif") }  画像を指定
番号なしリストのマーカーのサンプル
■ 番号付きリスト
番号付きリスト (ol要素) では、一般的な視覚系ブラウザでは、1. 2. 3. … といったように、番号順にマーカーが振られます。
番号付きリストとはそのマーカーが順序をあらわすもので、番号付きリストのマーカー形状を変更するのは、番号なしリストと同様に list-style-type属性を使います。
番号付きリストの具体的な list-style-type属性の値は以下のとおりです。
番号付きリストのマーカーのサンプル
なお、番号付きリストのマーカーにも画像を利用することが可能です。番号付きリストのマーカー変更は、Webブラウザの実装によっては表現できないものがあります。その場合は通常の番号が付与されます。
This page is Valid HTML 4.01! 初版公開日 2004年6月27日
Copyright（C） 2002-2004 banban@scollabo.com