属性
Table of Contents
今度は属性です。特定の要素でしか使わない属性ではなくいろんな要素で共通して使える属性を集めました。（とはいえ、説明の都合上完全にそうなってはいないのですが。）
また、全体をなんとなく俯瞰できる程度の情報しか書いてありませんし、よく説明を見かける属性はあえて後ろの方に回してあります ;)
Last Update 2002.01.
言語情報
lang属性
HTML はもともと日本語などの欧米で公用語として通用しないような言語には対応していません。それを国際化したのが HTML i18n（2.x）や HTML 4 です。（残念ながら 3.2 では対応していません。）その国際化の方法の一つに、この lang 属性があります。
HTML 4 ではすべての要素に lang 属性をつけることができます。これは「言語コード」を付加する属性です。言語コードとは、例えば日本語なら `ja' というコードですし、英語なら `en' という具合にアルファベット2文字で表現されます。またこの属性は親要素から子要素に引き継がれるものですから、ルート要素である HTML にこの属性をつけておけばページ全体の言語コードを設定することができます。だから <html lang="ja"> とつけておくと、ページ全体が日本語です、ということになります。*1
例えばこの属性がなくても日本語対応のブラウザでは普通に日本語の文書を表示できます。でもこれがあることでフォントのコントロールがより柔軟になったり、音声の読み上げにおいても日本語ネイティブの人の発音と英語ネイティブの人の発音が自動的に切り替わったりするだろうし、スペルチェックなどの文法チェックもしやすくなるだろうし、サーチエンジンのロボットにもすぐに何語で書かれたページなのか判別できます。
というわけなので、別に必須ではありませんが、ぜひ指定するようにしましょう。ちなみに、指定しない場合に何語が基準になるのかは、決まっていません。
dir属性
文章や table の表示方向を ltr（Left To Right）なのか、rtl（Right To Left）なのか指定します。
言うまでもなく世界には様々な言語があり、英語のように左から右に書く言語だけではありません。ただ、これで指定すると左から右へ書いていた文書が右から左への流れで表示されるようになるとか、そういうことではないようです。要するに完全に rtl で書きたければ作成ソフトもそういう仕様になっていないとダメだっちゅーことですね。考えたら当たり前ですな。
また、残念ながら縦書きの指定はできません。縦書きは美しい縦書き組み版の PDF にしろってことですかね。
識別属性
name属性
a の name 属性や img の name 属性が有名です。a 要素ではリンク先を表現するのに用い、img ではページ内の画像を特定し、JavaScript と連携してロールオーバー効果を実現するために利用されたりしています。
が、この属性は他のいろいろな要素で使えるわけではないので、要素の特定のためなら、より汎用に使える id 属性の方に徐々に移行していくことになるんじゃないでしょうか。（XHTML 1.1 では name 属性は廃止されました。）
id属性
要素を特定するための属性です。これはその HTML 文書の中で完全にユニークである必要があります。他の要素が同じ名前を持っていることは認められません。
要素が特定できると何が嬉しいかというと、JavaScript や CSS など、HTML とは違う文法の言語から HTML の要素を識別することができるんです。だから例えばたくさんある画像の中で特定の画像だけにある効果を掛けたいとか、いわゆるレイヤーのような機能を実現するために、この id 属性は大活躍します。
特定の要素だけで使えた name 属性に代わり、今後は要素の特定には id 属性が使われることになると思うのですが、name 属性と異なり、id 属性では「アルファベットで始まり、英数字と `-'（ハイフン）、`.'（ピリオド）、`_'（アンダースコア）、`:'（コロン）だけ」で構成されていなければなりません。なので、<a name=""> の書き方の代わりに id 属性を使おうと思う場合は注意が必要です。*2また、今のところすべての name 属性を id 属性で置き換えることができるわけではありません。
class属性
これは id 属性のように要素を特定するというよりは、「要素をあるグループに所属させる」ような感じで使います。同じ class に属する要素がいくつあっても構いませんし、同じ種類の要素でなくても同じ class に属することができます。
最もよく使うのはたぶんスタイルシートのためでしょう。
ただ、スタイルシートのために使う場合は若干注意が必要です。それは class 属性そのものはそこに書ける文字についての制限はあまりないのですが、スタイルシート（CSS 1 ）の方でセレクタに使える文字に制限があるからです。この制限は CSS 2 でかなり緩和されるのですが、ブラウザの実装もありますし、英数字と`-'（ハイフン）くらいに留めておくのが無難です。
また、仕様上は一つの要素が複数のクラスに属することが可能なんですが、ブラウザの実装がまだ（2002.01.現在）追いついていない感じです。
アクセシビリティ属性
title属性
その要素そのもの、あるいはアンカーの場合はリンク先などの情報を書いておくことのできる属性です。img などの場合は alt 属性がありますが、例えば hr などのように、見た目に強く依存しているのに空要素であるためその意味を伝える手段を持たない要素にはぜひ指定するようにしましょう。（なかなか面倒ではありますけれども。）div や span などにも書いておくと自分のためにも分かりやすいでしょう。この title 属性には id 属性のような制限はないので安心して日本語でメモを書いておけます。なお、この属性もすべての要素に指定することが可能です。
Win版 IE 5 などは対応していて、img の alt と同じようにマウスを合わせると説明がポップアップするようになっています。
summary属性
table の内容を伝えるためのテキストを書いておく、table 要素の属性です。non-visual media のためだとはっきり W3C の仕様書に書いてありますので、グラフィカルなブラウザには用がないものなのですが、音声環境では TABLE の内容はよくわけの分からない順番で発声されるため、ぜひ設定するようにしましょう。
これを書くようにするとレイアウト目的の table が自然と減るかもしれません。あんまり summary="for-layout" なんてばっかり書きたくないですものね。（と、これを読んでいるあなた。このページのソースを読まないように！）
accesskey属性
英数字一文字を指定し、マウスをクリックすることなくショートカットキーでリンクをたどってジャンプするなどの操作ができるようにする属性です。これを指定できる要素は a, area, button, input, label など、通常マウスを使ってそれを特定するものです。
この属性を上手に使うと、例えばトップページへのジャンプは [Alt] + [T] や [control] + [T] などに割り当てることができます。ただし、組み合わせるキーの割り当ても実際にリンクをたどるかどうかも、ブラウザの実装に依存します。
実際には accesskey に対応するキー操作を知らない人もかなり多いのですが(^^;、それはグラフィカルなブラウザをデフォルトの状態で使っている初心者の方々であって、中級以上の方やグラフィカルでないブラウザを使っている場合には重宝するものです。
なお、本講座では、こっそり
| 行き先 | accesskey |
|---|---|
| トップページ | H |
| 目次 | C |
のように accesskey が設定してありますし、トップページではリンク部分のうちアンダーラインの引いてある部分を accesskey に設定してあります。あと、Starting Up や Making Web Pages のように「続きもの」の場合は [N] で次のページに進み、[P] で戻ることができるようになっています。リピーターの方は（居んのか？）ご活用ください。
alt属性
HTML 4 では img 要素の alt 属性は必須です。その他にも applet や input 要素などにもこの属性はあるのですが、そもそもこれらの要素をここでは扱っていません。
ま、何はともあれお使いのブラウザで画像を表示しない設定にしてあちこちのサイトを巡ってみてください。どれだけこの属性が大事か、一発で分かります。
イベント属性
HTML 4 では JavaScript などを利用してインタラクティブなページ作りができるようになっています。そのために利用するのがこのイベント属性です。（script要素というものもありますが、ここでは扱いません。）ほぼすべての要素について利用できる共通のイベント属性は以下の通り。
| 属性 | 取得するイベント |
|---|---|
onClick / onKeyPress | その要素の上でのマウスのシングルクリック、あるいはキーを一度押して離す動作 |
onMouseDown / onKeyDown | その要素の上でマウスのボタンあるいはキーを押し下げる動作。上のイベントはボタンあるいはキーを「離さないと」取得できないが、こちらは押すだけで発生する。 |
onMouseUp / onKeyUp | その要素の上でマウスのボタンあるいはキーを離す動作 |
onMouseOver | その要素の上にマウスカーソルがきたとき |
onMouseOut | その要素の上からマウスカーソルが外れたとき |
onMouseMove | その要素の上でのマウスカーソルの移動 |
onDblClick | その要素の上でのマウスボタンのダブルクリック |
属性名の大文字小文字は読みやすさのために書き分けているだけで、別にこう書かないといけないというわけではありません。また、ユーザーが JavaScript をオフにしていたり、きちんと対応していないブラウザでブラウズしている場合もあるので、期待したイベントが発生しない場合にも困らないように使ってください。*3
使い方は、
<なんかの要素 onClick="スクリプト" onkeypress="スクリプト">てな具合です。
読んでもらえば分かる通り、マウス操作とキーボード操作が対になっている属性があります。これはマウス、あるいはキーボードを使わない／使えない環境への配慮ですのでぜひ両方併記するようにしましょう。（ペン操作はマウスに対応するのかな？）
なお、このイベント属性の中でスクリプトを記述する場合は meta 要素で利用するスクリプトの種類を指定しておく必要があります。ま、普通は <meta http-equiv="Content-Script-Type" content="text/javascript"> で決まりでしょう。この辺は「中級要素編」をどうぞ。
使いやすいけどオススメされない属性
HTML は現在、WWW の当初の目的であった世界規模の文書データベースのための役割に立ち返るべく、その機能を「意味」の方に特化させ、見た目の表現などの演出的側面を切り離そうとしています。それが「見た目はスタイルシートで」という話です。
さて、ということで今まで気軽に使っていたけど、今後の演出的側面切り離し作戦を進めるうえで障害になる属性がありますので、それを紹介しておきます。手軽に見た目に関する設定ができるけれども、見た目に関する設定だから HTML から追い出されようとしている属性です。使うなとは言わないけど、いつまでもこれにすがってたらいかんのちゃうか、というやつらですな。
背景
見た目の話ですが、背景は雰囲気の演出や読みやすさに欠かせない重要な属性です。例えばこのページではクリーム色の枠を用意して、その中に本文がありますが、これが例えば青い背景だったり、グレーの背景だったり、黒い背景だったりしたらどういう感じになるでしょう？
白い背景色 |
このページと同じ背景色 |
青い背景色 |
グレーの背景色 |
黒い背景色 |
これをコントロールするのが背景属性です。
bgcolor="色"
background="背景画像のURL"
WYSIWYG なソフトではだいたい「○○のプロパティ」などの項目で設定します。
注意事項として、背景画像を使う場合は、
- 画像をオフにする場合を想定して背景色の方にも同じ系統の色を指定するようにし、
- また、背景色に対し十分なコントラストを持つ色を文字色として指定
するようにしてください。
例えば背景色だけを白に指定した場合、そのページを訪れたユーザーがいつもは黒地に白の文字を標準としていたら、何も見えないページになってしまいます。だからきちんと文字の色も指定してあげる必要があるのです。で、ここまでは普通のアクセシビリティ情報ですが、もう一つ、背景色と文字色のコントラストが高けりゃ見やすいってもんじゃないのです。はっきり言ってPCの画面で真っ白の地に真っ黒の文字はまぶしいです。このことにきちんと触れてくれるデザインガイドは残念ながら多くありません。（Mac の画面ではそれほどまぶしくないのですが。）
ただ、HTML 4 では背景のコントロールはスタイルシートで行う方がよいとされています。代替スタイルシートを使えば様々な背景色を JavaScript とか使わなくても、しかもページ全体の様々な要素についていっぺんに変えることができますし、ユーザースタイルシートを使ったりスタイルシートをオフにすれば自分の好きなように色を設定できますので、確かにスタイルシートの方が嬉しいです。
配置（align, valign）
| align | ||||
|---|---|---|---|---|
| left | center | right | ||
| v a l i g n |
top | あいう | えおか | きくけ |
| middle | こさし | すせそ | たちつ | |
| bottom | てとな | にぬね | のはひ | |
要素によってはその中に入る情報（テキスト、画像、要素）を左寄せ、中央、右寄せにして表示することができます。例えば p, Hn(heading), hr など多くのブロックレベル要素に対してこの属性が指定可能です。また、場合によっては縦方向にも、上付き、中央、下付きの設定もできます。全部表すと右のようになります。
ここで、この表を書くためには、td に対してそれぞれの属性を設定しています。各セルの中で文字をどのような位置に表すかを決めるのが、align, valign という属性なわけです。表を見れば分かると思いますが、align が水平方向、valign が垂直方向の位置を決定します。
この場合は１つの文字列しか入ってませんが、同じセルに画像が入っていたらその画像も同じように位置の指定の影響を受けます。
また、上のようにテーブルを文章が回りこむようにするのにもこの align 属性を使います。上の表を書くために td の属性を指定したのとは違い、ここでは table そのものの align 属性が right に指定してあるので、文章の右側に表が描かれています。同じ属性ではあるのですが、この場合は先ほどと効果の意味が違いますので注意が必要です。（これは要素のフローティングを指定するもので、その中に入る要素の位置を指定するのとは意味が違うのです。）ま、HTML 4 以降ではそもそも align は使わず、スタイルシートで指定する方がよいとされていますので、このような意味のブレについてはそのうち問題なくなるでしょう。
多くの場合において、このような align, valign 属性を HTML 4 の仕様書では [deprecated = 反対される、非難される] ものだと述べています。ただ、上のように table の各セルに対して align, valign を指定することについては特に言及がありません。別に問題ないみたいです。
clear属性
br 要素の中で指定すると、上の align 属性を使った img や table のフローティングを解除することができます。
<br clear="right"> が書かれているので、この文章はその前にある align でフロート化しているダミーの画像の左に回りこまない。でも、clear="all" じゃないから 左にあるフロート化した文字ボックスの右側には回りこんでいる。と、こういう具合です。で、この下に <br clear="all">
するとこのように普通に文章が左寄りに表示されます。この部分はブラウザのウィンドウを広めにしてもらわないと分かりにくいかもしれません。
これ、例によってスタイルシートで書けということになってます。対応表は以下に。
| HTMLの場合 | CSSの場合 | |
|---|---|---|
| 左 float 化 | align="left" | float: left; |
| 右 float 化 | align="right" | float: right; |
| 左 float 解除 | br clear="left" | clear: left; |
| 右 float 解除 | br clear="right" | clear: right; |
| 両 float 解除 | br clear="all" | clear: both; |
all が both に変わること以外はこれといった注意点もないくらいに簡単な対応ですし、HTML の場合と違ってスタイルシートを使えば float させる要素、float 解除に使う要素の制限がかなり緩和されています。上のように文字だけのボックスを float 化させることも可能です。おまけに代替スタイルシートを使えば右に float したり左に float したり、切り替えられますし、もちろん float させなくすることも可能です。なんだか、いいことずくめ？
いやいや、例によって Netscape 4.x での対応が半端です。clear が効いたり効かなかったりするようです。この辺は margin の取り方が下手くそなのが関係しているのかも。Netscape 4.x はボックスの解釈がなんだかふにゃふにゃです。ま、でも他のバグに比べればかわいいもんです。致命的なことにはなりませんので。
style属性
これは別に W3C としては何の文句もないし、むしろ HTML 4 になってようやく使うことができるようになった便利な属性なのです。
が、これはあまり使わないようにした方がいいです。なぜなら、これを使っている限り
からです。style 属性で指定できるのは class 名のように意味のあるものではなく、「あくまでスタイルだけ」です。これではそのスタイルをどういう意図で指定したのかを意識することができません。これが意識できなければ表現と構造の分離なぞ夢のまた夢です。
もちろん最初のうちはこの属性を使って HTML にはできないスタイルを指定し、スタイルシートの威力を実感することもアリでしょう。でもその程度です。早いとこ外部スタイルシートに移行しましょう。
なお、style 属性を使ってスタイルを指定する場合は head 要素の中で meta を使ってスタイルシート記述言語の種類を指定しておく必要があります。ま、普通は <meta http-equiv="Content-Style-Type" content="text/css"> で決まりでしょう。
表と配置とレイアウトとスタイルシート
align, valign と table （もちろん colspan, rowspan も使います）を組み合わせることで、HTML を使って見た目のレイアウトに凝ることができるようになります。（もちろん本当は、、、）
具体的には、枠線のない table をレイアウト用に用意します。そして上に示したように横方向、縦方向の align を設定することでレイアウトを行います。ブラウザがきちんとスタイルシートに対応し、ユーザーがきちんとスタイルシートを使いこなさない限りは、これ以外にレイアウトに凝る方法はありません。
このとき、レイアウト用の table はあまり大きくしない方がよいようです。IE や Netscape 6 はともかく、Netscape 4.x などは table の中身を全部レイアウトし終わらないと表示できないんです。あまりテーブルが大きくて複雑になってしまうと表示するまでの間が長くなってしまうので、ヘッダ（タイトル部分）、本文、フッタなどに分けてレイアウトするとよいでしょう。
また、レイアウトに凝ろうと思うと画像のサイズが邪魔になったりします。大きな画像の場合は table の一つのセルに収まらなくなったりするからです。そこで画像を分割するという方法を取ったりします。Macromedia の Fireworks や Adobe の ImageReady を使えば割と簡単に画像を分割できます。ほかにも分割用のツールはいくつかありますので、レイアウト用の画像の分割はもうプロだけの技じゃないようですね。
ただ、この方法を使っても、ホームページ作りで思い通りの場所に思い通りの大きさでレイアウトすることは、難しいです。どこで妥協するかを考えるようにするのも大事です。もともと HTML にはそんなに高度なことはできないんだから。
一つの考え方として、レイアウトがなくなっても困らないように配慮するという方法があると思います。もちろんこれを完全に実現するのは難しいとは思いますが、もともとたいしたことができないと思えば気も楽です。
脚注
- *1
-
この言語コードは RFC 1766 に従うってことになってまして、RFC 1766 は ISO 639 から引っ張ってきているようです。
- *2
-
Netscape 4.x 以前 では ID 属性へのリンクは対応していないので、たどれるように見えて実際には機能しないという、困ったリンクができてしまいます。
- *3
-
例えば
a要素に用いる場合には<a href="スクリプトに依存しない部分" onclick="スクリプト; return false;" onkeypress="スクリプト; return false;">と書かないとまずいです。こうしておけば JavaScript が無効の場合でも href で指定された URL にジャンプしますし、JavaScript が有効な場合は
- イベント属性に書かれたスクリプトを実行し、
- 戻り値が false なので、その時点で動作終了
（スクリプト処理後に href に書かれた URL にはジャンプしない）
という動作をしますので、JavaScript の ON/OFF に関わらず問題なく動作します。よくある
<a href="javascript:スクリプト">なんて書き方だと、JavaScript をオフにしてあった場合、見事に何にも機能しないリンクの出来上がり、となってしまいます。アホすぎます。どうしてもというなら
<script type="text/javascript"><!--
document.write('< a href="javascript:スクリプト">')
// --></script>
<noscript>スクリプトに依存しないHTML</noscript>てな具合に JavaScript に依存するアンカーを JavaScript で動的に生成するという方法もあります。
また、ここで挙げている属性はほとんどの要素に書けますので、
body要素なんかに書いた日にゃページ内のどこでクリックしてもダイアログがポップアップするというめちゃくちゃなページが作れたりしますが、そういう使い方はいやがられるだけで何にもいいことないので、やめましょう。本格的なスクリプティングを行おうと思った場合、属性ごとにスクリプトを書くよりも JavaScript 側でイベントを拾った方が効率的だし、大規模なスクリプトを書きやすくなります。この辺はスタイルシートを HTML から切り離して外部に置いた方が何かとよいというのと似ています。が、お手軽な方法としてこのイベント属性は悪くないと思います。スクリプトの利用方法が自然と限定されるので問題の切り分けが簡単になるかもしれないし。
ちゅーかこの講座で JavaScript を取り上げる気はありませんので。悪しからず。