ブロック要素とインライン要素
○ブロック要素とインライン要素
・XHTML で使用されるタグは，すべてどちらかの要素に分類される（中には両方の性質をもつものもある）．
・XHTML はすべてブロック要素で構成される．ページは「ブロック（block）」に分けて記述される．
・ブロック要素内には，別なブロック要素やインライン要素を含むことができる．
・インライン要素はまさに「インライン（in-line）」すなわち行の中で使用されるタグである．
○各要素のイメージ
ページ全体
ブロック要素 インライン要素
○ブロック要素の例
文書構造の枠組みを指定するもの．
<h1> , <h2> , … , <h6> , <p> , <div> , <hr /> , <ul> , <ol> , <table> などのタグがある．
<body>（ページ本文）内に直接記述できるのは，ブロック要素だけである．
○インライン要素の例
文章中の一部の文字列などに指定するもの．
一般のテキスト , <span> , <a> , <img /> , <br /> などのタグがある．
<body>（ページ本文）内にインライン要素を直接記述すると，Validation エラーとなる．
Appendix
○講義内で登場する主なXHTMLタグ一覧（登場順）
ページ タグ 説明 ツールメニュー 教科書
1 <html> 〜 </html> HTML文書の開始と終了 31
1 <head> 〜 </head> 文書情報を記述（TITLEなど） 34
1 <title> 〜 </title> ウィンドウのタイトルバーに表示されるタイトル 39
1 <body> 〜 </body> ブラウザに表示される本文を記述 36
1 <div> 〜 </div> ブロック要素を作るための汎用タグ 文書構造・宣言→<div>ブロックレベル要素 43 1 <div id="○"> 〜 </div> 他のブロック要素と区別．ページ内で1度しか使えない 文書構造・宣言→<div>ブロックレベル要素 43
1 <!-- 〜 --> コメント（注釈） コメント 13
3 <h1> 〜 </h1>，… 見出しを付ける（サイズは1〜6．1が最大，6が最小） 見出し→h1 見出し1，… 46
4 <br /> テキストを強制的に改行させる 本文→<br> 強制改行 50
9 <div class="○"> 〜 </div> 他のブロック要素と区別．ページ内で何ヶ所も使える 文書構造・宣言→<div>ブロックレベル要素 43
20 <table> 〜 </table> 表を作成 テーブル→2行2列 133
20 <tr> 〜 </tr> 表の1列分を定義 テーブル→<tr> 1行 138
20 <td> 〜 </td> 表データの1セル分を定義 テーブル→<td> データ1セル分 141 20 <th> 〜 </th> 表見出しの1セル分を定義 テーブル→<th> 見出し1セル分 141 29 <span> 〜 </span> インライン要素を作るための汎用タグ 文書構造・宣言→<span> インライン要素 45 31 <img src="○" /> 画像を表示．○の部分にファイル名を入れる <img> イメージ 96
33 <li> 〜 </li> 箇条書きの各項目 箇条書き→<li> 126
34 <ul> 〜 </ul> 単純なリスト（箇条書き） 箇条書き→<ul> 箇条書きリスト 122
34 <ol> 〜 </ol> 番号付きリスト 箇条書き→<ol> 番号付きリスト 124
41 <a href="○"> 〜 </a> リンク．○の部分にリンク先のアドレスを入れる <a> ハイパーリンク 114
○講義内で登場するスタイル一覧（登場順）
ページ スタイル 説明 ツールメニュー 教科書
5 color 文字色（前景色）を指定する 文字色（color） 344
5 background-color 背景色を指定する 背景色（background-color） 346
12 font-size 文字の大きさを指定する フォント（font）→font-size（文字の大きさ） 361
12 font-weight 文字の太さを指定する フォント（font）→font-weight（文字の太さ） 364
12 line-height 行の高さ（行間）を指定する テキスト（text）→line-height（行間） 375
14 padding パディングに関する指定をまとめて行う パディング（padding）→padding（一括指定） 402
15 padding-left 左パディングを指定する パディング（padding）→left（左パディング） 400
15 margin-left 左マージンを指定する マージン（margin）→left（左マージン） 395
15 border ボーダーに関する指定をまとめて行う ボーダー（border）→border（一括指定） 419
15 margin-bottom 下マージンを指定する マージン（margin）→bottom（下マージン） 395
16 margin-top 上マージンを指定する マージン（margin）→top（上マージン） 395
16 font-family 文字の字体を指定する フォント（font）→font-family 359
16 border-color ボーダーの色を指定する ボーダー（border）→border-color（枠線の色） 406
16 border-style ボーダーのスタイルを指定する ボーダー（border）→border-style（枠線の種類） 414 16 border-width ボーダーの太さを指定する ボーダー（border）→border-width（枠線の太さ） 410
26 width 幅を指定する 幅・高さ→width（領域の幅） 420
26 height 高さを指定する 幅・高さ→height（領域の高さ） 424
26 border-collapse セルのボーダーの表示の仕方を指定する テーブル→border-collapse（セルボーダー表示方式） 460 28 vertical-align 縦方向の揃え位置を指定する テキスト（text）→vertical-align（縦方向位置揃え） 379
36 list-style-type マーカー文字の種類を指定する リストマーカー→type（マーカーの種類） 449
文書構造・宣言→基本構造(XHTML10)
授業テキストに登場する XHTML タグ・CSS スタイル一覧
Appendix
Validation
○ Validation とは
テキスト２ページで説明しているように，「Validation」とは「確認／検証」などという意味．ここでは，記述した XHTML や CSS が正しいか．検証すること．
○ XHTML の Validation
・mi で XHTML ファイルを開いている時に，【ツール↓ Validation → W3C Markup Validation Service を開く】を 選択する．
・「Validate by File Upload」欄の「ファイルを選択」ボタンをクリックし，検証したいXHTMLファイルを選択したら，
「Check」ボタンをクリック．
・結果が表示される．緑色で「This Page Is Valid XHTML 1.0 Strict!」と表示されれば問題なし．
・XHTML が正しく記述されていない場合には，赤色で「This page is not Valid XHTML 1.0 Strict!」と表示されるので，
エラーを修正する．
○ XHTML Valiadation エラーの修正
エラーの内容については，mi で XHTML ファイルを開いている時に，【ツール↓ Validation → Validation エラーに ついて】を選択すると，エラーメッセージの内容と簡単な対処方法が書かれている文書が開くので，参考にする．
なお，エラーについて多くの項目が表示されても原因はごく少ない場合が多い．まずは先頭のエラーの解決を目指 すこと．エラー項目には行番号が表示されるので参考にし，その行だけではなく，その行より上の部分に問題があ る場合が多い．問題の原因がわかったらまず 1 ヶ所だけでも修正して，再度 Validation すること．
○ CSS の Validation
・mi で CSS ファイルを開いている時に，【ツール↓ Validation → CSS 検証サービスを開く】を選択する．
・「アップロード」欄の「ファイルを選択」ボタンをクリックし，検証したい CSS ファイルを選択したら，「検証 する」ボタンをクリック．
・結果が表示される．「エラー及び警告は見つかりませんでした。」と表示されれば問題なし．
・CSS が正しく記述されていない場合には，赤色で「エラー」と表示されるので，エラーを修正する．
Appendix
○ CSS Valiadation エラーの修正
エラーの内容については，mi で CSS ファイルを開いている時に，【ツール↓ Validation → Validation エラーについて】
を選択すると，エラーメッセージの内容と簡単な対処方法が書かれている文書が開くので，参考にする．CSS のエ ラーについては，Validation ページで表示された部分に誤りがあることが多いので，行番号などを参考にしてエラー を修正する．なお，CSS Validation では，エラーのほかに警告が表示される場合がある．警告はエラーほど重大で はないが，修正する方が望ましい．
○「正しい」ページを示すアイコン
XHTML Valiadation や CSS Validation に問題がない場合，W3C 公式のアイコンによって，作成した XHTML ページ や CSS が（文法的に）正当であることを対外的にアピールすることができる．このアイコンを自分のページ内に 表示させたい場合には，その XHTML ファイルを開き，表示させたい位置（一般的にはページの一番下）で，【ツー ル↓ Validation → XHTML Validator ロゴを挿入／ CSS Validator ロゴを挿入】を選択する．ブラウザで確認すると，
以下のようなアイコンが表示される（これらのイメージには，class="validation" が設定されているので，スタイル シートで適当なデザインを設定する（幅は 88px，高さは 31px とすること）．
，
Appendix
XHTML+CSS によるページ構築がなぜよいのか？
○ HTML（XHTML）のみでのページ構築
［書類／大渕担当授業用／プログラミング１／演習用データ／ XHTML+CSS のメリット／ XHTML のみ］フォルダ のファイルで説明する．ここには，page1.html，page2.html，page3.html の 3 つのファイルがある．３ページと もブラウザで確認すると，すべて同じようなページ構成である．
ページ本文先頭の見出し部分のタグ「<h1><font color="red">XHTML に関する用語集 </font></h1>」を見ると，
文字色を赤に設定していることがわかる．この記述が各ページに存在している．つまりページのデザインを，それ ぞれのファイル内で指定していることになる．
この見出し部分の色をすべて黒に変更するとしたらどうだろうか．３つのファイルの「red」を「black」に変更す ればよい．が，これが 100 個のファイルがあるとしたら…．手間がかかるのは明らかである．
○外部ファイル CSS を使用するメリット
次に［書類／大渕担当授業用／プログラミング１／演習用データ／ XHTML+CSS のメリット／ XHTML+CSS］フォ ルダのファイルを見る．ここにも page1.html，page2.html，page3.html の 3 つのファイルがあり，ブラウザで見 ると，前述のものとまったく同じ表示になる．XHTML ファイルを見ると，ページ本文先頭の見出し部分のタグは
「<h1>XHTML に関する用語集 </h1>」となっており，この部分ではデザインが指定されていない．そのかわり，
スタイルシート（style.css）が指定されていることがわかる．
つまりすべてのページのデザインを，１つのスタイルシートだけで指定している．この見出し部分の色をすべて黒 に変更したいと思えば，スタイルシート内のたった 1 ヶ所を変更するだけである．ファイルが 100 個でも 1000 個 でも一瞬で変更可能である．
○もう１つのメリット
従来は HTML でページの論理的構造と視覚的構造をすべて記述していた．そのため，上記のようにデザインの汎 用性が失われていた．また，HTML でダイナミックな表現をするために，ブラウザ独自のタグ（例えば，Netscape Navigator の <blink> タグ／文字の点滅，Internet Explorer の <marquee> タグ／文字のスクロールなど）が登場し，
ページの統一性が失われることになった．同様にブラウザ独自の裏技も数多く登場した．
CSS は古くから存在していたが，ブラウザの対応がバラバラで，使い物にならなかった．しかし，XHTML というしっ かりとした規格が制定され，大手のサイトが XHTML+CSS でのページデザインを採用したことで，どんなブラウザ でも同じように見えるページを作る，という機運が高まった．また，多くのブログが XHTML+CSS でのサイト構築 を採用している．
現在ではモダンブラウザと呼ばれる，Firefox [Mac/Win]，Safari [Mac]，Opera [Mac/Win] であれば，ほぼページ表 示は同一になる（フォントを除く／ Safari では一部異なる場合あり）．特別なことをせず，基準通りにページを制 作するだけでよい．しかも XHTML+CSS で制作したページは，検索エンジン（Google，Yahoo など）で上位にラ ンキングされることが知られている．これに対し，従来主流であった，Netscape Navigator や Internet Explorer は レガシーブラウザと呼ばれる．CSS でも多くの裏技があるがその多くは，圧倒的シェアをほこる Internet Explorer 対策のためのものである．なお，Internet Explorer はバージョン 7 になって，ほぼ XHTML+CSS に対応するようになっ た．
※ 2007 年 8 月末現在のブラウザのシェア：Internet Explorer 78.7%，Firefox 14.6%，Safari 4.7%．