ちょっと詳しい話
ここでは本編では取り上げなかった詳細事項について説明をします。
第1章関連
要素、属性値の大文字・小文字について
HTML4.01では、要素、属性値の記述は大文字・小文字いずれでもかまわないとされています。ただし、XHTMLでは、要素、属性値とも小文字でないとされていますので、XHTMLに移行する可能性を考えると、最初から小文字で記述しておいた方がよいかと思われます。
属性値の引用符について
HTML4.01の仕様では、特定の条件下では引用符を省略出来るとなっていますが、XHTMLでは省略できませんし、例外事項をわざわざ覚えるよりも、属性値には引用符を必ずつけると習慣づけるほうがよいでしょう。
W3C
正式名称はWorld Wide Web Consortium。Webに関する様々な技術に関する標準化を行っている組織です。。HTMLはもちろん、CSSやXHTML、XMLなどの仕様もここで決定されました。
HTMLについては4.01が最終バージョン（1997年12月18日仕様勧告）で、以後はXMLであるXHTMLとなります。ちなみにXHTMLはバージョン1.1が最新（2003年7月29現在）です。
W3CのHTML4.01文書型宣言
本編ではHTML4.01 Transitonalの文書型宣言を使用していますが、W3CのHTML4.01の場合、文書型宣言は3種類あります。詳しくはHTML4.01仕様書（日本語訳）を参照のこと。
- Strict DTD
- 本来の理想的なHTML4.01の文書を作成する場合に使用します。非推奨の要素や属性、フレームは使用できません。要素の配置にも制限があります。
文書型宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd"> - Transitional DTD
- ブラウザの実装などの理由によって、Strict DTDの定義に従うことが出来ない場合に使う暫定的な文書型。非推奨の要素や属性も利用することが出来ますが、フレームは使用できません。要素の配置も自由度が高いです。
ブラウザの実装などの問題がまだまだある現状では、最も多く使われている文書型です。
文書型宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - Frameset DTD
- Transitonal DTDからフレーム関連の要素を使えるようにしたもの。
文書型宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Freamset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
なお、いずれの文書型宣言でもURL部分は省略可能。ブラウザによっては、文書型宣言の種類・方法で見映えが変化します。
文字コードの指定
日本語HTML文書の文字コードとして現在よく利用されているのは、Shift-JIS,EUC,JIS,UTF-8といったところです。指定方法は以下の通りになります。
HTML文書での指定方法は、<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">というように、charset=の後に指定したい文字コードを記述します。
| 文字コード | meta要素内での記述 |
|---|---|
| Shift-JIS | Shift_JIS |
| EUC | EUC-JP |
| JIS | ISO-2022-JP |
| UTF-8 | utf-8 |
meta要素で文字コードを指定する理由は、文字化け防止というのがもっとも大きな理由です。本来なら、サーバー側で適切な文字コードを設定すべきものなのですが、適切に設定されていないことも多く、その救済措置としてHTML文書側で文字コードを設定しておくことも可能になっています。
ちなみに、サーバー側で設定がされていない場合、ISO-8859-1と解釈されてしまいます。このままで、meta要素で文字コードを指定していない日本語HTML文書を読み込ませると確実に文字化けしてしまいます。
サーバー側の設定を変更するといっても、変更が許されていない場合も多いですからね。現状では、meta要素で文字コードを指定しておくのが無難でしょう。
HTML文書の言語コードを示す
html要素内で指定されたlang属性の内容が主に使われている言語となります。主に日本語で書かれているHTML文書は<html ang="ja">と指定します。
ただし、ページ編集画面からはできないので、以下の方法で示すことになります。
- HTMLソース編集画面で直接入力する
- ドキュメントアウトライナでhtml要素を選択後、lang属性の部分で（未指定）をjaと上書きする
なお、文書の途中で英語になったりなど、html要素で指定した言語と違うものになる場合は、その要素ごとに対してlang属性で指定を行います。英語はen、フランス語はfr、中国語はzhといった具合に言語ごとに指定する内容は異なります。
タグの省略
HTML4.01の場合、いくつかの要素では終了タグのみ、開始タグ・終了タグ両方の省略が出来ます。第１章で説明をした要素では、li要素やdt要素、dd要素が終了タグの省略が可能です。html要素,head要素,body要素は開始タグ・終了タグ両方の省略が可能です。
ただし、XHTMLへの移行を考えるとタグの省略はしない方が無難です。XHTMLではいっさい省略が許されていません。
q要素のブラウザ上での表示
Windowsと一緒にインストールされるInternetExplorerはq要素に対応していないので、ブラウザ上では通常部分と同じように表示されてしまいます。Gecko系のブラウザ（Netscape6以降やMozilla）やOpera6以降、Mac版のInternet Explorerは対応していて、q要素の前後に引用符をつけて表示します。
第2章関連
name属性とid属性
リンクに関して言えば、いずれも要素の固有の名前を表す識別子として使われます。
name属性はリソース指定やフォーム関連のみに使われますが、id属性は汎用属性として用意されているモノです。
XHTMLとname属性
XHTMLでは要素を識別するためにはid属性を使うことになっています。しかし、id属性に対応していないブラウザとの互換性を考慮して、XHTML1.0ではname属性も使えるようになっています。id属性とname属性を併記し、属性値は同じものを指定して下さい。
第3章関連
スタイルシートとコメント
古いブラウザの場合、スタイルシートのソースが表示されてしまうことがあるので、コメントをつけることによって、スタイルシートのソースを表示させないようにすることがあります。
XHTMLの場合は、コメントをコメントとして解釈し、スタイルが適用されない危険性があります。
クラスとIDの違い（class属性とid属性のちがい）
クラスは分類名のことです。同一の文書中で複数の要素が同じクラス名を持つことができます。主にスタイルシートで使われます。
一方で、IDは固有の名前です。一つの文書中の複数の要素に同じID名をつけることはできません。文書内の特定の部分を示すために使われます。
class属性、id属性いずれの値も大文字小文字を区別しますので要注意です。
link要素の使い方
link要素は、他の文書との関係を示すために用意された要素です。PC版Operaなどのブラウザでは、link要素で指定された内容を表示することも可能です。
rel属性は、この文章から見たhref属性で指定される別文書との関係を指定します。rev属性はhref属性で指定される別文書から見た、この文書との関係を示します。rel属性、rev属性ともに空白で区切ることで複数のリンクタイプを指定可能です。
| リンクタイプ | 内容 |
|---|---|
| alternate | 別バージョンの文書 |
| stylesheet | 外部スタイルシート |
| start | 最初の文書 |
| next | 次の文書 |
| prev | 前の文書 |
| contents | 目次 |
| index | 索引 |
| glossary | 用語集 |
| copyright | 著作権 |
| chapter | 章 |
| section | 節 |
| subsection | 項 |
| appendix | 付録 |
| help | ヘルプ |
| bookmark | 文書内のジャンプ先 |
alternateはmedia属性と同時に指定された場合は、その出力媒体のバージョンであることを示します。hreflang属性と同時に指定され場合は、その言語の翻訳バージョンであることを示します。
bookmarkのジャンプ先情報はtitle属性で示すことが可能です。
media属性を利用したブラウザ振り分け
Netscape4.xには、CSSの解釈に関するバグが非常に多いため、他のブラウザと同じCSSを適用しないほうが良いです。
Netscape4.x系にはmedia=screenと指定されたモノ以外は読み込まないと言うバグを利用し、media=allやmedia=screen,tvなどを指定する方法です。これにより、Netscape4.xではCSSが適用されず、それ以外のCSS対応ブラウザではCSSが適用された状態になります。
第5章関連
href属性とsrc属性
| 属性名 | href属性 | src属性 |
|---|---|---|
| 使われる要素 | a | img、script、frame、iframe |
| 指定された リソースとの関係 |
在処を示すだけ | 在処を示し、その内容をブラウザに表示する （埋め込み） |
リソースという聞き慣れない言葉が出てきましたが、Webにおいては、HTTPによってアクセスが可能なHTML文書や画像ファイルなどのことをいいます。
alt属性は説明用ではない
ブラウザによっては、alt属性の内容をポップアップとして示すものがあります。しかし、これは、そのブラウザ（Windows用 Internet Explorer）が持つお節介機能です。ポップアップで画像に対する説明が必要であれば、title属性で示すべきです。
alt属性はあくまで画像を表示できない場合に「代わりに表示されるテキスト」を示すためのものです。
第6章関連
name属性とid属性の命名規則
HTML4.01の仕様書（日本語訳）を見てみると、以下のように書いてあります。
IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。
トークンは名前のことです。
HTMLで規定されていない表に関する属性
ホームページ・ビルダーでは指定できてしまうのですが、実は、W3CのHTMLでは定義されていない属性があります。
- table要素
- background属性
- height属性
- td、th要素
- background属性
table要素、td要素、th要素のbackground属性は、表やセルの属性変更画面で背景画像を選択してしまうと挿入されてしまいます。
table要素のheight属性は、表の属性変更画面で高さの部分に数値を入力すると挿入されてしまいます。
第7章関連
チェックボックスとラジオボタンを入力しやすくする
通常、チェックボックスやラジオボタンは、その部分にだけにしかフォーカスがあたっていません。それを、label要素をつけることで、ラベル部分にもフォーカスをあてることが可能となります。ラベル部分にlabel要素をつける方法には明示的な方法と暗示的な方法がありますが、暗示的方法（label要素のみつける）はWinIEに未対応です。
明示的方法を使う場合には、入力部品側のid属性名とラベル側のfor属性名を同じにします。
(通常状態）
あなたはホームページビルダーを使っていますか？
はい
いいえ
（改善後）
あなたはホームページビルダーを使っていますか？
改善後のソース（明示的な方法で関連づけ）
<p>あなたはホームページビルダーを使っていますか？<br>
<input type="radio" checked name="hbpradio2" value="1" id="yes"> <label for="yes">はい</label><br>
<input type="radio" name="hbpradio2" value="2" id="no"> <label for="no">いいえ</label></p>第10章関連
FTPの仕組みとパッシブモード
ファイル転送に使うFTPは、２つのポートを使ってやりとりしています。１つはデータの転送に使うポート（通常20番）。もう１つが制御用のポート（通常21番）。なお、Webで使うHTTPは１つのポート（通常80番）を使ってやりとりしています。
詳しい説明は、5.4 FTP によるファイル転送の仕組み（Nagano Solutionのサイト内）を参考にして下さい。
転送モードを間違えるとどうなる？
以下のようなGIF形式の画像を、テキスト（ascii）モードで、サーバーにアップロードしてみます。今回は実験用のため、同じ画像をリネームしたモノをアップしています。
今回の実験に当たっては、付属のFTPツールではなく、筆者が愛用しているFFFTPというFTPソフトを使っています。
アップロードされた画像を確認してみます。
原形をとどめていません。この後、いずれの転送モードでファイルをPCに転送しても、ファイルは壊れたままです。
テキストモードでPCへ転送した場合
バイナリモードで転送した場合
