サイト内検索  

ちょっと詳しい話

ここでは本編では取り上げなかった詳細事項について説明をします。

第1章関連

要素、属性値の大文字・小文字について

HTML4.01では、要素、属性値の記述は大文字・小文字いずれでもかまわないとされています。ただし、XHTMLでは、要素、属性値とも小文字でないとされていますので、XHTMLに移行する可能性を考えると、最初から小文字で記述しておいた方がよいかと思われます。

属性値の引用符について

HTML4.01の仕様では、特定の条件下では引用符を省略出来るとなっていますが、XHTMLでは省略できませんし、例外事項をわざわざ覚えるよりも、属性値には引用符を必ずつけると習慣づけるほうがよいでしょう。

W3C

正式名称はWorld Wide Web Consortium。Webに関する様々な技術に関する標準化を行っている組織です。。HTMLはもちろん、CSSやXHTML、XMLなどの仕様もここで決定されました。

W3Cのサイトを見てみる(英語)

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要素で指定した言語と違うものになる場合は、その要素ごとに対してlang属性で指定を行います。英語はen、フランス語はfr、中国語はzhといった具合に言語ごとに指定する内容は異なります。

タグの省略

HTML4.01の場合、いくつかの要素では終了タグのみ、開始タグ・終了タグ両方の省略が出来ます。第1章で説明をした要素では、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属性のちがい
属性名 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要素、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>

CGIとは

Common Gateway Interfaceの略称。Webサーバが、Webブラウザからの要求に応じて、プログラムを起動するための仕組み。

プログラムに使用される言語がPerlっていうのが昔は多かったので、CGI=Perlっていうプログラミング言語で書かれたプログラムの事を指すこともある。

掲示板や、メールフォーム、ショッピングカートなどなどいろいろな場面で活用されるが、その仕組みとしては以下のような感じです。

CGIの仕組み。ブラウザからWWWサーバー上のCGIスクリプトで処理をし、処理結果をブラウザに返す。

メールフォームの場合は、上の図のCGIプログラムからメールサーバー上にあるメール送信用のプログラムにも処理結果を渡して、メールサーバーからメールを送るという仕組みになります。

それと、環境変数ですが、WWWサーバーに対してアクセスしてきたIPアドレス、時刻、ブラウザなどなどの情報のことです。

第10章関連

FTPの仕組みとパッシブモード

ファイル転送に使うFTPは、2つのポートを使ってやりとりしています。1つはデータの転送に使うポート(通常20番)。もう1つが制御用のポート(通常21番)。なお、Webで使うHTTPは1つのポート(通常80番)を使ってやりとりしています。

詳しい説明は、5.4 FTP によるファイル転送の仕組み(Nagano Solutionのサイト内)を参考にして下さい。

転送モードを間違えるとどうなる?

以下のようなGIF形式の画像を、テキスト(ascii)モードで、サーバーにアップロードしてみます。今回は実験用のため、同じ画像をリネームしたモノをアップしています。

今回の実験に当たっては、付属のFTPツールではなく、筆者が愛用しているFFFTPというFTPソフトを使っています。

オリジナルの画像

アップロードされた画像を確認してみます。

テキストモードでサーバーに転送した後

原形をとどめていません。この後、いずれの転送モードでファイルをPCに転送しても、ファイルは壊れたままです。

テキストモードでPCへ転送した場合
テキストモードでサーバーに転送したファイルをテキストモードでPCへ転送した後の画像

バイナリモードで転送した場合
テキストモードでサーバーに転送したファイルをバイナリモードでPCへ転送した後の画像