例によってだだっと大枠の列挙に留まっている感は否めませんが、とりあえず本当に必要な知識は網羅できたんじゃないかと思います。
何を思ったかコメントに触れていなかったので追加しました。(2002.01.)
HTML の要素に複数のクラスを指定する方法について、嘘を書いていたので修正しました。(2002.02.)
以下のような、今までの HTML になかった表現力を手に入れることができます。
どうです。すごいでしょう。ただし、ブラウザが完全に対応しているとは限りませんが。*2
今までは例えば「1) 文字の色を緑にして、2) 太字で、3) 背景色を微妙にクリーム色にして、4) アンダーラインを引く」という指定をしようと思ったら、そのたびに <font face=""></font>
なんてことをする必要がありました。エディタで書いていようが、WYSIWYG なホームページ作成ソフトで作ろうが、HTMLでの見た目のコントロールは「毎回毎回手間がかかる」ものでした。
しかし、これをスタイルシートにすればこの指定をセットにして、しかも HTML から追い出すことができます。指定をセットにできるということは例えば 「2番のスタイルね」と指定すれば上と同じ効果をすぐに適用できるということです。楽でしょ。また、 HTML の中から見た目の指定がなくなれば、それに伴うタグの数が減ります。これによって
といった効果が期待できます。
これまでの HTML では見た目も構造もすべてごちゃごちゃにタグとして使われていました。例えば
赤でアンダーラインつきのレベル2の見出し
というものを書こうと思ったら、今までは
<h2>
<font color="red">
<u>
</u>
</font>
</h2>
という具合に、ページの中の構造である h2
も、装飾である font
も u
も同じように HTML のタグを使っていたわけですが、これをスタイルシートでは
図のように、ある HTML の要素に対してスタイルを指定する、という具合に二段構えにします。
例として行間の調整を行った比較用の表を見てみてください。(この翻訳は以前は http://www.nets.ne.jp/~okahashi/ 以下にあったのですが、ここのコンテンツはなくなってしまったようです。)
スタイルシートにはいくつか種類があるのですが、ここでは HTML との組み合わせで最も利用されている CSS(Cascading Style Sheets = カスケーディングスタイルシート)だけを対象とします。これを書いている時点ではそれしか知らないので。*4
Netscape 4.x では CSS は JSS(JavaScript Style Sheets)に変換されて実現されるのだそうですが、一応 CSS に対応していると判断します。(ご存知の通り、かなりバグだらけですが。)JSS をマスターしたい、という人はめったにいないと思いますが、これはこれで面白いと思います。見事に JavaScript なんだもの。
CSS には今(2002.01.)のところ Level 1 と Level 2 があるのですが、個々のプロパティについては扱いませんし、本講座を読んでいる限りでは特に気にする必要はありません。ま、そんなものがあるのか、くらいでいいです。扱っている話は CSS 1 も CSS 2 もごちゃごちゃですので、ものによってはブラウザの対応がバラついています。また、HTML の方は HTML 4.01 を基本にしています。それ以前の仕様やそれ以降の仕様ではここに書いていることと矛盾があるかもしれません。(また、そもそも内容が間違っている可能性もあります。)
また、あまり細かい説明もしません。カスケーディングルールだとか、そんなことにはお構いなしです。本講座の基本方針ですが、向学心のある人は自分で調べてください。
まずスタイルシートに対応したブラウザを用意してください。これがないと効果を確認できません。*5
で、
を理解する必要があります。
基本的には三つあります。
最後のは裏技というかなんというか…。動的にスタイルシートに関する記述を生成するってことです。これを使えば例えば代替スタイルシートに対応していないブラウザでスタイルシートの切り替えを実現できたりするのですが、HTML や JavaScript などの文法と照らし合わせるとサーバサイドでプログラムを動かさない限りは「裏技」に過ぎません。
style
属性を使うのがいちばん手っ取り早いのですが、スタイルシートの本当のうまみを知ることができないのでここでは扱いません。(自分は使ってたりするんですが(^^;)
<html>
<head>
<style type="text/css"><!--
セレクタ {
属性: 値;
}
--></style>
</head>
<body>
</body>
</html>
head
要素(あるい body
要素)の中に style
要素を書きます。JavaScript なんかと要領は同じです。
ただし、この方法だと複数の HTML に一貫したスタイルを適用するのが難しくなるので特定の HTML にだけ適用したいスタイルを書くのがよいでしょう。基本的には次に説明する外部スタイルシートを使う方がよいと思います。
なお、コメントアウトの仕方は XHTML になると変わります。この辺を考えても、面倒がないのは外部スタイルシートでしょう。*6
HTML とは別にスタイルシートのファイルを用意します。このファイルはテキストファイルですので、エディタを用意してください。スタイルシートの編集できるホームページ作成ソフトもあります。ファイルの拡張子は .css
が基本でしょう。別になんでもいいんですけど、意味が分からなくなったら拡張子の意味がありませんので。*7
で、このファイルを HTML の中から特定してやる必要があります。スタイルシートのファイルはこれだ、と。
方法は head
の中の link
要素で指定します。この場合、複数のスタイルシートファイルから選択できるようにしたり、複数のスタイルシートを同時に適用したりできます。
注意!! ここで指定したファイルは必ず実在するものにしてください。ファイルがないと Netscape 4 では HTML を表示することすらできません。
<html>
<head>
<link rel="stylesheet" type="text/css" href="URL*8"> ← 永続スタイルシート
<link rel="stylesheet" type="text/css" href="URL" title="名前"> ← 優先スタイルシート
<link rel="alternate stylesheet" type="text/css" href="URL" title="名前"> ← 代替スタイルシート
</head>
<body>
</body>
</html>
いちばん上の書き方は永続(persistent)スタイルシートで、ここで指定されたスタイルシートは、ユーザーがブラウザのスタイルシート機能をオフにしない限り有効です。スタイルシートが一つしかなければこの方法でよいと思います。(正直、複数のスタイルを考えるのは面倒な気が…。)
次が優先(preferred)スタイルシートで、何もしなければこのスタイルシートが適用されます。仮に永続、優先、代替のすべてのスタイルシートが指定してあった場合、何も選択しなければ永続スタイルシートと優先スタイルシートの両方が適用されることになります。
その次が代替(alternative)スタイルシートで、これが指定してあった場合、ユーザーは優先スタイルシート、代替スタイルシートの中から適用したいスタイルシートを選ぶことが可能になります。何らかの方法で(方法はブラウザ任せ)選んだスタイルシートが適用されます。永続スタイルシートは常に適用されているので選択対象外です。
選択はスタイルシートの「ファイル名」ではなく、「title 属性に書かれている名前」で行われるので、同じ「名前」の CSS ファイルが複数あった場合はそれらのスタイルシートがいっぺんに適用されます。
なお、複数のスタイルシートが適用された場合、スタイルの指定がぶつかってしまう可能性がありますが、その場合はより優先度の高いセレクタの方が適用されますし、仮にセレクタの優先度も何もかも同じ場合はスタイルシート間には優先順位はないので、単純に「よりあとで指定したものが有効になる」という原則に従います。というわけで、head 要素内でより後ろに書かれたスタイルシートの宣言が優先されます。「セレクタの優先度」も参照してください。
現在(2002.01.)のところ代替スタイルシートにまともに対応しているのは Netscape 6 / Mozilla だけのようです。WinIE はレジストリとかいじればイケるとか。CSS:「ス切リボ」 なんてのもあるようです。ただこのリンク、NC4.78日本語版 on Win2k ではうまくたどれませんでした。ま、IE 用の情報なので関係ないんですけど。
スタイルシートを記述するのに必要な文法はこれだけ。*9
セレクタ {
プロパティ: 値;
}
改行が入っているのは見易さのためだけです。基本的には「セレクタ」でスタイルを指定する要素を特定し、そこに「プロパティ」(属性)と「値」の組み合わせでスタイルを決定する、という格好になります。プロパティと値の間は `:'
(コロン)で区切ります。また、`;'
(セミコロン)は複数のプロパティを書かなければ必要ありませんけど、つけるようにクセをつけておいた方が無難でしょう。
なお、個々のプロパティについてはいろんなところにリファレンスがあるのでそれを参照してください。
セレクタってのは具体的にどの要素に、プロパティと値で決めた表現効果を適用するかを決めるものです。これを書くためには 4種類の書き方を覚える必要があります。
これは CSS1 で指定できる分です。CSS2 ではもう少し細かく指定できるのですが、まぁこんなもんで十分じゃないかと思います。
ところでこれに対応する HTML のクラス属性には日本語も使えるようなのですが、ID 属性の場合は「アルファベットで始まり、英数字と `-'
(ハイフン)、`.'
(ピリオド)、`_'
(アンダースコア)、`:'
(コロン)だけ」で構成されなければなりませんし、CSS 1 ではセレクタに使える文字は英数字、ハイフン、Unicode の一部の記号だけしか使えません。CSS 2 になればこの制限も緩和されます(`_'
アンダースコアも使えるように!)し、エスケープすればもっといろんな文字を使えるのですが、なんかブラウザが解釈しないような気がするし、エスケープしちゃったら人間にとって識別情報としての価値が減ってしまうので、やっぱ英数字と一部の記号だけに留めておいた方がいいと思います。ま、要するにこの手のやつは英数字で書く習慣をつけておけ、ってことですな。
ご存知の通り要素です。例えば h2
要素に対して、センタリングしてアンダーラインを引く、という指定を行う場合は
h2 {
text-align: center;
text-decoration: underline;
}
という指定を一度行えば、あとは h2
要素が現われるたびにこの指定が反映されます。
同じ要素でも別の指定を行いたいときがあります。また、別な要素でも同じ指定を行いたいときがあります。(もちろん要素の種類によっては同じ効果が出るとは限りませんが。)そういう場合にクラス属性を利用します。
要素名.クラス名 {
プロパティ: 値;
}
.クラス名 {
プロパティ: 値;
}
HTML タグでは class
属性を使って
<要素名 class="クラス名"></要素名>
と書きます。
スタイルシートの方では右のように書けばこのタグについて効果を指定できます。クラス名の指定は”.
(ピリオド)に続けてクラス名”です。この書き方では「素のクラス名だけを指定」することができます。こうしておけば違うタグでも同じクラスに属していれば同じスタイルが適用されます。この関係は表にするといくぶん分かりやすいかな。こんな感じ。
同じ要素 | 異なる要素 | |
---|---|---|
同じクラス | まったく同じ効果 | その要素で有効な部分だけ同じ効果 |
異なるクラス | 要素そのものに指定した効果は同じ | 異なるスタイル |
また、一つのタグが複数のクラスに属することもできます。
<要素名 class="クラスA クラスB"></要素名>
のように、複数のクラスをスペースで区切って指定します。この場合、ブラウザが対応していれば二つのクラスのスタイルが両方適用されます。(2002.01.現在では例によって IE 5, Netscape 6 クラスのブラウザが対応。)
ID属性はまさに「そのタグだけ」にスタイルの指定を行いたいときに利用します。DHTML などでおなじみかもしれません。
HTML タグでは
<要素名 id="名前"></要素名>
と書きます。スタイルシートでは
要素名#名前 {
プロパティ: 値;
}
と書けば効果を指定できます。
ID属性はその HTML ファイル内で完全にユニークである必要があります。クラスのようなわけにはいきません。
セレクタをスペースで区切って書くと、その書いた順番の通りの親子関係になっているタグについて、スタイルを指定できます。例えば
p {
line-height: 1.5em;
}
blockquote p {
line-height: 1.2em;
font-size: 85%;
font-style: italic;
}
という具合に書いておくと、普通の段落では行間を文字の高さの半分で確保して、blockquote
の中の段落では行間を控えめに、文字の大きさも小さめに、ついでに斜体で、という具合に指定できるということです。
これをうまく使うとなんでもかんでも span
で挟んだりしなくても*10、狙ったタグを特定できるようになります。そのためには HTML の構造をしっかりさせないといけませんが、使えるとかなり便利です。この辺は「div, span
の利用」も参照してください。
セレクタには以上のようにいくつかの指定方法があり、ある要素についてのスタイル指定の情報が衝突する可能性があります。この場合、どのスタイルが適用されるかと言うと、
基本的にはより細かく指定してあるセレクタが優先される
ことになっています。例えば
p
p.class
p#id
の3つで同じ属性を指定していた(例えば文字サイズとか文字の色とか)場合、下に行く方がより細かい、つまり適用対象となる要素が限られているので、その指定が優先されることになります。
ま、比較的常識的というか直感的な優先順位だと思います。また、まるっきり同じ優先度のセレクタだった場合はあとで指定した方が有効になります。*11これもまぁ、常識的な挙動なのですが、一つだけ@import
なんかを使う場合は注意が必要です。@import
で指定したファイルが先に読み込まれるので、同じ内容を書いていた場合は @import
の内容は上書きされてしまいます。(@import
については「@import を使ったスタイルシートの分割」を参照してください。)
また、ちょっと意味合いが違いますが、一緒に説明しちゃうと親要素より子要素に指定したスタイルの方が優先されます。例えば
<p style="font-color: red;">
<a href="ほにゃらら" style="font-color: blue;">ここの文字の色は青になります</a>
</p>
ということですな。これも当たり前と言えば当たり前です。
HTMLは要素の入れ子なので(「Web page を作る」の「基礎知識編」や「HTML基本構造編」参照)、それぞれの要素には親要素、子要素という関係があります。例えば table
の中には tr, td
が入りますが、この場合、tr
は td
の親要素であり、table
の子要素になります。
で、スタイルは基本的に親から子へ引き継がれます。これが継承です。
プロパティによって継承されるものとされないものがありますが、原則的にスタイル指定は継承されると覚えておいてください。すると、個々の要素にいちいちスタイルを指定しなくても、かなり省略して書けることに気づくはずです。この継承をうまく利用して楽をしてください。スタイルシートは見栄えのコントロールが高度にできるだけでなく、楽にできることがメリットですから。
スタイルシートって、オブジェクト指向ですよねぇ…。
この話は次の「div, span
の利用」に続きます。
HTML と同じようにスタイルシートの中にもコメントを書くことができます。CSS のコメントは /*
で始まり、*/
で終わります。ただし、コメントを入れ子にすることはできません。
/* この部分はコメントです
P {
color: #24211e;
}
ここまで無視されます。*/
「中級要素編」の「グルーピング」のところで紹介しましたが、div, span
にクラスやIDを指定しておくと、スタイルシートからこれが便利に使えます。
スタイルシートを使うメリットの最も大きなものの一つに、構造と表現の分離というものがあります。HTML が構造や意味を、スタイルシートが表現を担うわけです。スタイルシートは HTML 上の何らかの要素を対象に表現を当てはめていくわけですが、適切な意味を表す要素が HTML になかった場合、スタイルシートはどこに表現を当てはめていったらよいのでしょう?
これを解決するのが div, span
です。
例えば HTML には作者を表す author
という要素も監督を表す director
要素も、配給会社を表す distributor
要素もありません。はて、映画の話をマークアップするとき、どうしますか。答えは簡単。
<span class="author">名無権兵</span>
<span class="director">辺野辺野茂兵次</span>
<span class="distributor">Inchiki Works, inc.</span>
を使います。で、span.author, span.director, span.distributor
をセレクタにして好きなスタイルを指定すればよろしい、と。
また、小説なんかでも地の文を表す部分、会話の部分、回想シーンとかで全部スタイルを切り替えたいって要望があるかもしれませんね。ご安心を。<div class="present"></div>, <div class="dialog"></div>, <div class="past"></div>
なんて感じでしょうか。
HTML で書くのはシンプルな文章だけとは限りません。
何ページもの、何階層にも渡るページ群からなるサイト全体への適切な誘導のためには、適切なインターフェイスの設計が欠かせません。例えば多くのサイトではページの左端や右上にナビゲーション用のリンクを配置していて、そこがリンクの並んでいる場所であることが容易に分かるように工夫しています。まずその部分に本文に関係するような内容を入れることはありません。分かりやすいナビゲーションのためにははっきりと区別がついていることが重要ですから。
ということは。
そこは「構造的に明らかに特徴のある部分」ということになります。
これを HTML で表現するには。やっぱ <div class="navi"></div>
なんて感じで区別するのがいいんじゃないですかね。こうすると何がいいかと言うと、
なんてなことができるわけです。
DIV ブロックの位置を指定できるということは、これを使いこなせば TABLE による inaccessible なレイアウトではなく、accesible でなおかつ柔軟なレイアウト*12やダイナミックな効果を実現できます。
例えば本講座のトップメニューでは2002.01.現在、対応しているブラウザについてはいわゆる「レイヤー」の機能を使ってメニューを表示しています。これは細かく言うと
class
属性で指定)の中の特定の DIV ブロック(id
属性で識別)の表示を ON にするという方法を使っています。(残念ながら後方互換性のために大枠のレイアウトには TABLE を使っていますが。)実は、要素が存在したり消えてなくなったりしているわけではなく、見えるようになったり見えなくなったりしているだけなのです。
要素そのものが現われたり消えたりという操作は DOM(Document Object Model) というまた別なインターフェイスを利用します。W3C 勧告とは異なる独自の実装で実現している Dynamic HTML もありますけど、今後は徐々に DOM が基本になっていくんじゃないかと思います。(IE 5 以降、Netscape 6 以降でけっこう対応が進んでいます。)
もう一つは、継承を使って楽にスタイルを指定することができるようになります。
具体的には例えば、body
要素に指定した場合はすべての要素に引き継がれるので、基本となるフォント(タイプフェイス)設定はここで行えばよい、ということになります。現に本講座では基本となるフォント(タイプフェイス)設定は body
要素について行っているので、例えば見出し要素とかそういう部分を除いて、個々の要素に対してはフォントサイズだけを指定しています。(フォントの指定そのものに対応していないブラウザにとっては意味がないのですが。)
そして、表現を変えたい範囲について DIV でブロックを作るようにしていけばいいのです。例えば
なんて設定は DIV でブロックを作ることによってずいぶん楽に行えるようになります。
DIVを使わない例 | DIV を使った例 |
---|---|
p.navi { |
div.navi { |
これだけだとよさが分かりませんが(^^;、例えば左の DIV ブロックを使わないスタイルの設定例では、 p 要素が現われるたびに <p class="navi">
と一つ一つの p 要素に対してクラスを指定する必要がありますが、右の DIV ブロックを使った設定例ではナビゲーション関係の部分を DIV ブロックの中に入れてしまいさえすれば、あとは p 要素が現われてもシンプルに <p>
と書くだけで済みます。HTML を手打ちしている場合はダイレクトに作業量に関わってきますし、便利なツールを使う場合でも設定し忘れを防ぎやすいという効果があります。
実際には、ブラウザのバグによって思ったように継承されない場合もありますし、継承されないばかりか、他の部分に不具合が出るなどなかなか難しい面もあったりします。そういう煩わしさを避けるために、ブラウザのバグを利用して不具合の出るスタイルが反映されないようにする方法がいくつかあります。詳しくは参考 URL などを当たってください。
CSS 2 では IE や Netscpae などの PC 上のグラフィカルなブラウザへの対応だけでなく、他のメディアへの出力に対してスタイルの指定を切り分けることができるようになっています。この出力メディアの指定にはメディア記述子というキーワードを使います。
メディア記述子 | 対象としているメディア |
---|---|
screen | ページという単位に縛られない、GUI なコンピュータの画面 |
tty | 固定ピッチの文字ベースで成り立つテレタイプや端末画面、あるいは画面の性能の限られている PDA など |
tv | コンピュータ用でない TV など。解像度が低く、スクロールなどの操作性もよくないデバイス。 |
projection | プロジェクタ |
handheld | ハンドヘルドPC や PDA などの画面が小さく、解像度も低く、色数もあまり再現できず、通信速度も遅いデバイス |
ページ単位に区切られた印刷物や印刷プレビューモード | |
emboss | 印刷された点字(ページ区切りあり) |
braille | 点字ディスプレイ(ページ区切りなし) |
aural | 音声読み上げ装置 |
all | 文字通りすべて |
将来的には3Dデバイスや解像度を指定した記述なんかもできるようにと考えられているようです。CSS 3 の策定作業も進んでいるようですし、メディア記述子はまだ増えると思います。
具体的にこれらの記述子を使ってメディアタイプを切り分けるには
の二つの方法があります。
HTML では link
要素で外部スタイルシートを指定するときや、style
要素で media
属性を使うことで指定します。
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="URL">
<link rel="stylesheet" type="text/css" media="aural" href="URL">
<style type="text/css" media="print"><!--
ここに書かれたスタイルは印刷などのページメディアにしか適用されない
--></style>
</head>
<body>
</body>
</html>
上の例で言えば最初の link
要素で指定した外部スタイルシートは画面表示のときにしか適用されず、次の link
要素で指定した外部スタイルシートは音声出力のときにしか適用されず、style
要素の中に書いたスタイルシートは印刷のときにしか適用されないと、こういう具合です。
CSS の文法では“@規則”を使った @media
ブロックで記述を分けます。
h1 {
font-size: 150%;
}
@media print {
h1 {
color: black;
background-color: white;
background-image: none;
}
}
セレクタに当たる部分に @media
と出力メディアを指定するメディア記述子を書き、あとは普通のスタイル指定を { } を使って丸々その中に含めてしまう、といういたってシンプルな方法です。
上のサンプルでは印刷したときだけ h1
要素の中身の文字色が黒、背景を白にすることが期待されます。
この書き方は今のところ Windows版 IE 5 以降と Netscape 6 が対応しています。
スタイルシートを使っているうちに、段々と自分なりの定番スタイルというのが固まってきます。別なスタイルではあるんだけど、この部分は共通してるって部分。そうした部分は別なファイルに分けておくことができます。
で、外部スタイルシートファイルや style
要素の中でいちばん最初に
@import url("URL") メディア記述子;
のように分けたファイルを指定します。この際、
という具合に比較的自由度の高い書き方ができるのですが、困ったことにこの書き方に部分的にしか対応していないブラウザが多いのが現状です。*13
この @import で指定したファイルに書かれているスタイルと、実際にこれを書いて呼び出しを行った方に書かれているスタイルが衝突した場合は、呼び出しを行った側のスタイルの方があとに書かれているので有効になります。
仮にすべての方法でスタイルを指定していた場合、優先順位は以下のように
の順になります。style 要素と外部スタイルシートの優先順位は同じです。link 要素、style 要素の書いた順によってどちらがあとで指定したことになるか、つまりどちらが有効になるかが決まります。
これは別に W3C がこう言ったとかそういうことではないのですが、あれこれ試行錯誤したりアクセシビリティだなんだと勉強しているうちに感じたのは、意味と表現を分離した場合、一枚一枚のページについては、けっきょく古い一次元の巻物構造に戻ってしまうってことなんですよね。
派手派手で動的な効果という意味でなく視覚的な表現というのは、情報の伝わりやすさにとって非常に重要です。少なくとも視覚に頼っている我々にとっては。そこで文字や画像の大きさの対比、色合い、配置などのテクニックを使うわけです。
しかしこれが分離される、と。試しに見た目の情報をすべてスタイルシートで記述してスタイルシートをオフにしてみればよく分かるのですが、こうなると情報は「書いた順に」ユーザーに届きます。配置によってより多くの情報を効率的に見せるためのテクニックってのは全然通用しない世界なんです。順番にしか情報が伝わらない、つまり一次元の世界なんです。
そうなると、なるほど「オンライン・ハイパーテキストのためのスタイルガイド」にあるように、確かに一枚一枚のページを小さくした方がこの場合はいいですね。一覧性や印刷するときの便利さは落ちますが、一ページ当たりの情報量が多すぎるとこれを整理するのが難しくなりますし、だらだらと長いページでは巻物や本などの古い構造のテキストと変わらなくなってしまうからです。
しかし Web を小分けにするためには、ドキュメントの構造をしっかりさせないといけないんですよね。小分けにされ、相互にリンクされたページ群はあとから直すのが大変ですし、構造がちゃんとしていないとすぐに迷子になってしまいます。
そして構造の記述のために HTML が XML 化の方向をたどるのもまた当然だな、と。HTML は構造を記述するためのものだと言うけれど、その記述できる構造ったら、めちゃくちゃ粗雑ですものね。
構造と表現の分離の意味って、けっこう深いのかもしれないなーと、感じたのでした。おしまい。
なお、本講座では比較的古いブラウザでの利用を考え、見た目をスタイルシートだけでなく HTML でコントロールしようとしています。あと、印刷しやすさを考えてあえて一ページの容量が大きくなってもあまり分割しないようにしています。もう面倒なので説教講座はこの方針で行きます。新しい企画で新しいサイトを起こすときにまた考えることにします。
TABLE
を使って HTML だけで強引にレイアウトする方法のこと。現在最もよく使われているレイアウトテクニック。でも本来は表でもないものに TABLE
を使うのは文法的にもおかしいし、音声で内容を読み上げているブラウザにとっては意味不明な情報の羅列になりやすいのでアクセシビリティ的にもオススメできない。(と、分かっていても多くのサイトでは各ブラウザの CSS 対応の“揺れ”をきらって TABLE でレイアウトをしています。)
対応していないものは無視されるのでいいんですけど、厄介なのは「中途半端に対応している」ものですね。IE 3 は基本的に論外、Netscape 4 ではなんとかスタイルシートの気分を味わえる、IE 4 では本当の面白さはまだ…って感じで、IE 5 以降、Netscape 6 くらいからが使いものになるレベルでしょう。それでも CSS 2 くらいになると途端に対応が難しくなりますが。
当たり前ですが、スタイルシートを使えばそれすなわちアクセシビリティの向上や確保を意味するわけではありませんし、スタイルシートを使わなければアクセシビリティが実現できないわけではありません。
ほかにも XSL (XML Stylesheets Language)などありますが、HTML + CSS のようには(見た目をコントロールするという具合に)話がシンプルではないのですな、これが。
IE 3 以降、NN 4 以降で対応していることにはなっていますが、どちらもひどい実装です。場合によってはページがまったく判読できなくなったり、ブラウザが落ちたりします。これらのブラウザを避けるテクニックがあるので、それを織り交ぜて利用するとよいでしょう。詳しくは参考 URL に当たってください。
こうしたブラウザを使わないように啓蒙するのも手ですが、それをやるとけっこう嫌がられたりします。もうさすがに IE 3 ユーザーはスタイルシートをオフにしていると思いますけど、Netscape はまだ 6 が実用段階にない(2002.01.)こともあり、4.x への対応は考えておく必要があるでしょう。
style
要素を使う場合でも、link
要素を使った外部スタイルシートの場合と同じように title
属性、media
属性を使ったスタイルシートの使い分けが可能ですが、あんまりそんな使い方しないでしょう。
これについては RFC 2318 でメディアタイプ text/css
、拡張子は .css
にしよう、というように話が出ていますので、技術的にはなんでもいいですけど、運用上はやはり「拡張子は .css
」で合っているみたいです。
ファイルの場所は URL で指定しますので、極端な話、別なサイトのスタイルシートも適用できます。だからといって他人のスタイルシートを勝手に拝借しちゃったりするのはやっぱまずいような気がしますけど…。
各要素の style
属性を使う場合はセレクタを指定する必要がない(だってすでにどの要素にスタイルを適用するかは自明だから)んだけど、そもそもその使い方をオススメしないのでとりあえず端折ることに決定。
なんでもかんでも span
で挟んでたら font
タグを使うのとたいして変わらないのでスタイルシートのメリット半減ですよね。
そのはずなのですが、なんかどうもブラウザによってこの辺の解釈が揺れているようです。スタイル指定の競合で思ったような効果が得られていないような場合は、文脈セレクタを使ってはっきり分けるようにした方が安全でしょう。
柔軟だから accessible なのではありません。もちろん TABLE で横幅を固定するよりも CSS で柔軟なポジショニングをした方が画面サイズの制限が減るという意味では確かに accessible です。しかしむしろ、スタイルシートを無効にしたときにレイアウトを除いた純粋な情報だけをユーザーが手にすることができるようにできる、つまり、レイアウト情報を CSS に追い出すことによって HTML を accessible な形にできる、ということの方が重要だと思います。
ただ、おかげでブラウザの切り分けをこの @import 一つでできるというメリットもあります。実際、Netscape 4.x はこの書き方にまったく対応していないので、Netscape で問題の起きそうなスタイルをすべて @import で呼び出すようにするのは有効な方法です。
ときどきこの方法で Netscape 4.x を完全に無視するサイトもありますが、それはそれで個人的には残念ですね…。