HTML講習6 - tsuge development page

一つ前

[id:tsugehara:20060623:1151040204]

概要

昨日・・じゃなくなってしまったが、この前の続き。
私も色々忙しく出社自体していなかったため。遅れて申し訳ない。

定義済み属性-後編

共通イベント

共通イベントも、中心属性や国際化属性と同じようにほぼ全ての要素に指定出来ます。
DTDにおいては前述の「events」というもので定義されているもので、前項で解説したように「attrs」に含まれています。BR要素などには指定出来なかったりしますが、この属性も指定したい時に指定できないケースは皆無に近いので、より深い理解を得たい時だけDTDを参照すればよいでしょう。
共通イベントには以下のものが存在します。指定出来る値は全てスクリプト（後述）です。

属性名	解説
onclick	クリックされた時に発生するイベント
ondblclick	ダブルクリックされた時に発生するイベント
onmousedown	マウスのボタンが押された時に発生するイベント
onmouseup	押されていたマウスのボタンが離された時に発生するイベント
onmouseover	要素の上にマウスが重なった時に発生するイベント
onmousemove	要素の上でマウス（ポインタ）が動いた時に発生するイベント
onmouseout	要素の上からマウスが離れた時に発生するイベント
onkeypress	キーが押されて離された時に発生するイベント
onkeydown	キーが押された時に発生するイベント
onkeyup	キーが離された時に発生するイベント

※余談ですが、keypress〜keyupまでのキー入力イベントが共通イベントに定義されるのは奇妙な感じがします。onfocusといったフォーカス系イベントが共通イベントではないという事は、フォーカスは全ての要素が受け取れないという事であり、フォーカスを受けないでどうキー入力を受けるつもりだったのでしょうか？

さて、イベントというものは、詳細な説明は省略しますが、簡単に言うと「何かが起こった時に何かをする」ための仕組みです。
onclickは、「click」という動作が行われた時に発生するイベントを意味し、onclickに値を指定することでclickという動作が行われた時に発生するイベントの中身を記述出来ます。つまり、クリックと同時に「何か」を起こせます。
この「何か」を定義するために「スクリプト」というものを使用します。このスクリプトは特に制約を受けない自由書式で記述出来ます（正確にはCDATAという制約を受けます）。
このスクリプトは、一般的にはJavaScriptを記述します。
不思議なことにJavaScriptはHTMLに記述する形式になっているのですが、JavaScriptの解説はまた別の機会に行うとしましょう。今は共通イベントとして前述の表のイベントが定義されている、という点だけご理解下さい。

カスタム属性とカスタムイベント

カスタム属性やカスタムイベントは、全ての要素に指定出来るわけではない要素です。
例によってこれも種類が多すぎるので、詳細は後日オンラインの文献などで確認してください。
カスタムイベントは「onload」や「onchange」が該当し、カスタム属性には「rel」や「align」等が該当します。

カスタムイベントの記述内容は共通イベントと同じ内容を記述できるのですが、カスタム属性はそれぞれ記述出来る値に制限があります。
例えば色ですが、以下どれかの内一つ、

black	silver	gray	white
maroon	red	purple	fuchsia
green	lime	olive	yellow
navy	blue	teal	aqua

または、「#RRGGBB」形式のデータを指定できます。#RRGGBB形式とは、二文字の16進数を赤、緑、青の順に文字列で指定出来る形式の事で、例えば「#FF0000」なら赤、「#00FF00」なら緑、「#0000FF」なら青を指定できます。
この色はCSSの色とは別物であり、またHTMLでの使用は非推奨だったりするので、突き詰めていくとカスタム属性やイベントで覚えるべき事も沢山あるのですが、次項の「属性の使用ガイド」さえ把握しておけば推奨・非推奨の違いは大分見分けやすくなります。
これら値の制約に関しても、やはり地道にリファレンスを読んでいくしかないと思いますので省略します。

属性の使用ガイド

属性についてざっくりと解説し、本来の目的である「なんとなく使っていたけど属性にも色々あるのか」という漠然とした理解までは達成出来ているでしょうか。
さて、出来ているという前提で、属性に関してただ一点今後の指針となるべき項目を記しておきます。

HTMLの属性で文書の見た目を整えるべきではない

HTMLの歴史的な背景にも軽く触れておきますが、HTMLというのははじめそれだけで存在していたものです。WWWという仕組みについては始めの解説しましたが、そこにJavaScriptやCSSなどという概念は存在しなかったのを意識してください。
CSSの初版はW3Cが1996年12月に発表され、バージョン2は1998年5月に発表されました。ブラウザが本格的にCSSをサポートし始めたのはこの後であり、現在事実上の標準であるInternet Explorerにおいても、CSS2をサポートしたのは実にVer5.0のリリースまでかかっています。
※それでもマッキントッシュのIE5.0はCSS1のサポートさえ不十分という話です。
Netscapeに関しては4.7でもまだCSS1のサポートに尽力していた状態であり、Geckoエンジンが採用されたNetscape Navigater 6.0から、ようやくCSSがまともにサポートされた状態です。

では、これまでのHTMLではどのようにレイアウトを整えていたかというと、HTMLの属性でレイアウトを整えていたのです。何せCSSがサポートされていないのですから仕方ないことです。
しかし、我々プロの技術者は、これが古い技術である事を理解しなければなりません。
HTML4において、HTMLで文書レイアウトを整えることは既に推奨されていないのです。
理由はいくつかあるのですが、W3Cは「文書」と「レイアウト」と「スクリプト」を別に切り離すことを決断しました。よってレイアウトはスタイルシート、特に事実上の標準スタイルシートであるCSSで行う事を勧告しています。
CSSを採用することによるメリットは色々と述べることも出来ますが、本書はHTMLの解説資料なので詳しくは割愛します。HTMLでのレイアウトは何らかのデメリットがあって使用をやめるよう勧告されている技術であり、その技術を使ったプログラムを構築して納品するという事の意味を、プロであれば考えなければならないのだ、という事だけ、現時点では理解してください。

属性によるレイアウトが非推奨になることで、「align」や「color」といった属性が非推奨になる理由がご理解いただけるでしょう。
ややわかりにくいのは「border」属性ですが、これもレイアウトなので非推奨です。
逆にimgの「src」属性等は、CSSではなく文書に属するのでHTMLで記述する必要があります。
以上をまとめると、スタイルシートで出来ることはスタイルシートでやるのが昨今推奨されるHTMLである、という事になります。

まとめ

やばい、ちょっと忙しすぎて確認している時間がない。
後日確認するので、誤記あったら失礼。（後日修正したらここに書く予定）
一応属性はこんな感じにしておく予定。

2006/06/28 追記
一部文章の表現が粗雑な部分があったが、日記的にはこれでいいやという事にして完結。
後は講習資料で修正するものとする。
変な日本語が載っているのは恥ずかしいが、忙しいとこのレベルの日本語しか喋れないのが現状という事なのであえて修正はせず。