毎週金曜日配信 What's New 2004年6月25日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第96号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ 正しい文法のために 第１回 --- 論理構造
■ CSS講座 第16回 --- リスト
■ 属性の解説（第18回） --- nowrap
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆正しい文法のために（第１回） 論理構造
今回より今までの解説を踏まえて、HTMLを作成するための「正しい」文法につ
いて順次解説します。
今まで、作法やアクセシビリティに重きを置いて解説してきましたが、考え
てみれば文法については、明確にしてきませんでした。どちらかといえば、か
なり抽象的な持って回った説明に終始してきましたが、やはり文法は大切なフ
ァクターであり、ページ作成において避けて通れないところでもあります。
■正しい文法とは何か？
一言で言うなら「論理的な構造を持った文書」となりますが、これとて抽象的
で読者の中には、一向に意味が通じないところでしょう。
例えば、次の構文を見てください。
<body>
<font size="6">正しい文法</font><br>
<font size="3">マークアップ言語の本来の振る舞いは、論理的な構造を
正しく伝えることである。</font>
</body>
この構文を分析して解析してみましょう。
最初の「正しい文法」という文字列 (テキスト) に対する文字サイズを大きく
しています。それを改行して、次の文章の文字サイズを「普通の大きさ」に設
定しています。
ここでは、文字の大きさを変えているだけの文字列だけが記述されています。
視覚系ブラウザで閲覧すると「見出し」と「段落」に見えますが、そのように
見えるだけです。
これを、非視覚系ブラウザでレンダリング (描写) するとどうでしょうか。
つまり、この構文は文字列だけで構造的な意味がありません。「見出し」や
「段落」のない新聞を読むようなものです。これでは情報が正しく伝わるかど
うか疑問です。つまり、「絶対に悪い」というわけではなく文法上、問題とな
ります。文字列だけのコンテンツは、何らかの構造の中に配置しなくてはなり
ません。正しくは以下のとおりとなります。
<body>
<h1>正しい文法</h1>
<p>マークアップ言語の本来の振る舞いは、論理的な構造を、正しく伝え
ることである。</p>
</body>
サンプルの結果 (悪い例と正しい例)
http://www.scollabo.com/banban/magazine/ms/sample_96-1.html
■論理的な文書構造とは何か？
それぞれのコンテンツ構成の脈略が、ある「かたまり」として定義した構造の
中で配置することを論理的な文書構造と呼びます。
例えば、見出しとなる要素は「見出し」として定義し、当然ながらそれに伴
う段落は「段落」として定義します。
HTML4.01では、こうした構造を表わす要素型が幾つか用意されており、すべ
てのコンテンツはその構造上に配置されることが要求されています。
主だった構造を定義する基本的な要素型は以下のとおりです。
address アドレス要素
h1〜h6 見出し要素 (第一から第六見出しまで）
p 段落要素
blockquote 引用文要素
table 表組リスト (テーブル)
pre 整形済みテキスト要素
form フォーム要素
ol 番号つきリスト要素
ul 番号なしリスト要素
dl 定義済みリスト要素
■階層化された論理構造
HTMLは基本的の階層構造を持った構文となり階層構造とは、いわばツリー構造
を形成します。各構造では「親要素」と「子要素」「孫要素」といった親子関
係が成り立っています。
以下は簡単な階層を持ったHTML構文です。
<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
┏━━━━━━━━━┻━━━━━━━━━┓
head body
┏━━┻━━┓ ┏━━━━╋━━━━┓
meta title h1 p ul
┃ ┃
a li
この図のとおり HTML文書の最上位様子は html要素となります。html要素に
は２つの子要素が配置されています。
head要素には、meta要素と title要素が子要素として配置され、文書情報と
して Webサーバに伝えます。この部分を「ヘッダ」と呼びます。
コンテンツを配置する body要素には、幾つかの階層に分けられています。
つまり、body要素とはコンテンツを配置するための最上位として位置付けられ
ています。body要素の子要素として、h1、p、ul などの要素が配置され、また
それらの子要素として a、li という要素が配置されています。
文法上、a要素などのようなインラインレベル要素は独立して body要素直下
には配置することができません。必ずブロック要素の中で配置されなければな
りません。
■インラインクレベル要素
インラインとは、普通の文字列 (テキスト文字の集合) と同じ役割を持ち、前
後に改行や余白などは一切ありません。HTML文法では、インラインレベル要素
と呼ばれるタグは、必ずブロックレベル要素内で配置しなければなりません。
その理由とは？
以下の構文を参照してください。
<body>
<a href="http://www.scollabo.com/banban/">Web for begginer</a>
</body>
a要素はナビゲーションリンクを示すアンカー要素と呼ばれるインラインレ
ベル要素です。この構文では、当サイトのトップページのリンクを示したもの
ですが、このままでは、その文字列が構造上、何を意味しているのか分かりま
せん。
そこは段落としてリンクを張っているのか、リストとしてなのか、それとも
表組の中で示したものか明示的に確認されていません。HTTPという通信手順を
解釈する「ユーザエージェント」と呼ばれるソフトウェア (ブラウザやプロキ
シ、検索サーチロボットなど) では本来、文書の論理的な構造を解釈する振る
舞いを持っています。
インラインレベル要素は以下のとおり定義されています。
a、abbr、acronym、applet、b、basefont、bdo、big、br、button、
cite、code、dfn、em、font、i、iframe、img、input、kbd、label、
map、object、q、s、samp、select、small、span、s、strike、strong、
sub、sup、textarea、tt、u、var
なお、applet、basefont、font、iframe、s、strike要素は HTML4.01の厳格
仕様から非推奨 (Deprecated) として再定義されています。
■ブロッレベル要素
文書構造を提供するタグのほとんどがブロックレベル要素で占められています
が、必ずしもすべてのブロックレベル要素がそうであるとは限りません。
ここではごく一般的なブロックレベル要素について解説します。ブロックレ
ベル要素には、他のブロックレベル要素を配置できないタイプもあります。
以下のブロックレベル要素は、インラインレベル要素のみ配置可能です。
address アドレス要素
h1〜h6 見出し要素 (第一から第六見出しまで）
p 段落要素
pre 整形済みテキスト要素 (img要素は配置できない)
次のブロックレベル要素の直接の子要素は必然的に決められています。必ず
以下のとおりでなければなりません。
ol li要素のみ配置可能 (li要素内ではすべての要素型が利用可能)
ul li要素のみ配置可能 (li要素内ではすべての要素型が利用可能)
dl dt あるいは dd要素のみ配置可能
table 直接の子要素として tr、tbody、thead、tfoot要素のみ配置可能
次のブロックレベル要素は、子要素として必ず他のブロックレベル要素を配置
しなければなりません。
blockquote コンテンツを囲む要素としてブロックレベルを子要素とする
form 入力フィールドを配置するためにブロックレベルで囲む
汎用的に利用できるブロックレベル div要素は、そのタグ自体に意味を持って
おりません。その意味では論理的な構造を意味するものではないということに
なります。なお div要素には、ほとんどのタグを配置することが可能です。
※ 次回は、終了タグの扱い、及び子要素の扱いについて解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第16回） リスト
箇条書きコンテンツを作成するときに用いられるリスト要素のマーカー (行頭
で示されるマーク) や、余白をコントロールするときに使うスタイルシートに
ついて解説します。
■番号なしリスト
マーカーが番号ではないリストを作成するために、ul要素を使います。行頭の
マーカーは閲覧者の利用するソフトウェアによって異なりますが、一般的な視
覚系ブラウザでは、黒丸が標準的に表示されています。
スタイルシートでは、マーカーの形状を任意に変更して表示させることがで
きます。スタイルシートは、list-style-type属性を使います。
list-style-type属性の値と機能
disc 黒丸
circle 白丸
square 四角
decimal 数字
none マーカーの表示なし
list-style-type属性の書式
ul { list-style-type: circle }
タグに直接記述する場合は、
<ul style="list-style-type:circle">
マーカーに任意の画像を指定することもできます。
画像を指定するスタイルシートは、list-style-image属性を使います。
list-style-image属性の書式
ul { list-style-image: 画像の URI }
番号なしリストのスタイルシートサンプル
http://www.scollabo.com/banban/magazine/ms/sample_96-2.html
■番号つきリスト
行頭に番号が付与される番号つきリスト (ol要素) の番号マーカーを他の形式
の数字や記号に変更することができます。
記号の変更は、上記で説明したとおり list-style-type属性を使います。
数字や記号を表示する値は以下のとおりです。
decimal-leading-zero 頭にゼロのついた数字
lower-roman 小文字ローマ数字
upper-roman 大文字ローマ数字
lower-alpha 小文字アルファベット
upper-alpha 大文字アルファベット
lower-latin 小文字ラテン文字
upper-latin 大文字ラテン文字
lower-greek 小文字ギリシャ文字
hebrew ヘブライ数字
armenian アルメニア数字
georgian グルシア数字
cjk-ideographic 漢数字
hiragana あいうえお順のひらがな
katakana アイウエオ順のカタカナ
hiragana-iroha いろは順のひらがな
katakana-iroha イロハ順のカタカ
none マーカーの表示なし
ここに掲げた属性値は CSS Level 2 で定義されているものが多く、実装し
ている Webブラウザが少ないのが現状です。Mozilla、Netscape では、アルメ
ニアとグルジア以外を実装しています。MSIEでは上記のうえから４つくらいま
でを実装しています。
番号つきリストのサンプル
http://www.scollabo.com/banban/magazine/ms/sample_96-3.html
■リストの余白
番号なしリスト (ul要素) でも、番号つきリスト (pl要素) でも、リストの内
容はどちらもリストアイテムの li要素を使うことになります。
通常、li要素はインデント (字下げ) して出力します。
実際にはインデントではなく、一種の余白と考えられます。スタイルシート
では、margin属性によって余白を自由にコントロールすることができます。
余白をコントロールする書式
ul { margin-left: 0 } インデントのように見える余白を解消する
ul { margin-left: 2em } ２文字分のインデントのように見せる
※ 次回は定義リストについて解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML属性の解説 --- nowrap
テーブル内のセルで配置されるコンテンツ (主に文字列) の自動改行を禁止す
る属性です。HTML4.01Strict (厳格仕様) では非推奨として定義されているた
め、使うことができません。
■nowrap属性 セル内の自動改行を禁止する
DTD： 過渡仕様 (Transitional)、及びフレーム仕様 (Frameset)
属性値： なし
記述法： <td nowrap>セル内のデータの改行を禁止します</td>
関連要素： td、th
XHTMLの制限：XHTML1.0 Transitionalで利用可。ただし、属性の値として以下
のように記述する必要があります。
<td nowrap="nowrap">
XHTML1.1では、この属性は破棄されていますので使えません。
通常、視覚系ブラウザではテーブルのレンダリングは、ブラウザ固有の仕様
に委ねられます。１行のセルデータが横に長くなった場合、ブラウザ側で自動
的に調整して改行するのが一般的です。
作者のデザインを維持するときに利用することがある属性ですが、現在は非
推奨扱いとなっており、スタイルシートで利用するように求められています。
スタイルシートでは以下のように設定することで、セル内のデータを強制的
に改行を禁止することができます。
td { white-space: nowrap }
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明し
ています。あわせて過去の記事のおさらいも掲載しています。
今週のおさらい
http://www.scollabo.com/banban/magazine/rebiew_096.html
次回は、7月11日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
■配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
かります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
先日の台風にはひどい目にあいました。スーツを着て得意先に出かけたのです
が、突風が吹いて傘が壊れ全身びしょ濡れになってしまいました。
スーツがびっしょり濡れると惨めなものです。新調だったのに、トホホ・・
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年6月8日
Copyright(C) 2002-2004 banban@scollabo.com