> ホーム > Web ページを作る > CSSに移行しよう

CSSに移行しよう

Table of Contents

例によってだだっと大枠の列挙に留まっている感は否めませんが、とりあえず本当に必要な知識は網羅できたんじゃないかと思います。

何を思ったかコメントに触れていなかったので追加しました。（2002.01.）

HTML の要素に複数のクラスを指定する方法について、嘘を書いていたので修正しました。（2002.02.）

導入

手っ取り早く何がいいわけ？

今までの HTML にはない表現力

以下のような、今までの HTML になかった表現力を手に入れることができます。

どうです。すごいでしょう。ただし、ブラウザが完全に対応しているとは限りませんが。*2

[ ↑ content ↑ ]

シンプルな HTML - 表現と構造の分離がもたらすもの -

今までは例えば「1) 文字の色を緑にして、2) 太字で、3) 背景色を微妙にクリーム色にして、4) アンダーラインを引く」という指定をしようと思ったら、そのたびに <font face=""></font> なんてことをする必要がありました。エディタで書いていようが、WYSIWYG なホームページ作成ソフトで作ろうが、HTMLでの見た目のコントロールは「毎回毎回手間がかかる」ものでした。

しかし、これをスタイルシートにすればこの指定をセットにして、しかも HTML から追い出すことができます。指定をセットにできるということは例えば 「2番のスタイルね」と指定すれば上と同じ効果をすぐに適用できるということです。楽でしょ。また、 HTML の中から見た目の指定がなくなれば、それに伴うタグの数が減ります。これによって

といった効果が期待できます。

[ ↑ content ↑ ]

例えばどういうもの？

これまでの HTML では見た目も構造もすべてごちゃごちゃにタグとして使われていました。例えば

赤でアンダーラインつきのレベル２の見出し

というものを書こうと思ったら、今までは

<h2>
<font color="red">
<u>
赤でアンダーラインつきのレベル２の見出し
</u>
</font>
</h2>

という具合に、ページの中の構造である h2 も、装飾である font も u も同じように HTML のタグを使っていたわけですが、これをスタイルシートでは

HTMLでは意味を表す h2 要素だけを使い、文字色とアンダーラインはスタイルシートで実現している様子

図のように、ある HTML の要素に対してスタイルを指定する、という具合に二段構えにします。

例として行間の調整を行った比較用の表を見てみてください。（この翻訳は以前は http://www.nets.ne.jp/~okahashi/ 以下にあったのですが、ここのコンテンツはなくなってしまったようです。）

[ ↑ content ↑ ]

CSSです。

スタイルシートにはいくつか種類があるのですが、ここでは 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 を基本にしています。それ以前の仕様やそれ以降の仕様ではここに書いていることと矛盾があるかもしれません。（また、そもそも内容が間違っている可能性もあります。）

また、あまり細かい説明もしません。カスケーディングルールだとか、そんなことにはお構いなしです。本講座の基本方針ですが、向学心のある人は自分で調べてください。

[ ↑ content ↑ ]

実際、使うには？

まずスタイルシートに対応したブラウザを用意してください。これがないと効果を確認できません。*5

で、

を理解する必要があります。

HTML に CSS を適用する方法

基本的には三つあります。

最後のは裏技というかなんというか…。動的にスタイルシートに関する記述を生成するってことです。これを使えば例えば代替スタイルシートに対応していないブラウザでスタイルシートの切り替えを実現できたりするのですが、HTML や JavaScript などの文法と照らし合わせるとサーバサイドでプログラムを動かさない限りは「裏技」に過ぎません。

style 属性を使うのがいちばん手っ取り早いのですが、スタイルシートの本当のうまみを知ることができないのでここでは扱いません。（自分は使ってたりするんですが(^^;）

style 要素

<html>
    <head>
        <style type="text/css"><!--
        セレクタ {
            属性: 値;
        }
        --></style>
    </head>
    <body>
    </body>
</html>

head 要素（あるい body 要素）の中に style 要素を書きます。JavaScript なんかと要領は同じです。

ただし、この方法だと複数の HTML に一貫したスタイルを適用するのが難しくなるので特定の HTML にだけ適用したいスタイルを書くのがよいでしょう。基本的には次に説明する外部スタイルシートを使う方がよいと思います。

なお、コメントアウトの仕方は XHTML になると変わります。この辺を考えても、面倒がないのは外部スタイルシートでしょう。*6

[ ↑ content ↑ ]

外部スタイルシート

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 用の情報なので関係ないんですけど。

参考

[ ↑ content ↑ ]

文法

スタイルシートを記述するのに必要な文法はこれだけ。*9

セレクタ {
    プロパティ: 値;
}

改行が入っているのは見易さのためだけです。基本的には「セレクタ」でスタイルを指定する要素を特定し、そこに「プロパティ」（属性）と「値」の組み合わせでスタイルを決定する、という格好になります。プロパティと値の間は `:'（コロン）で区切ります。また、`;'（セミコロン）は複数のプロパティを書かなければ必要ありませんけど、つけるようにクセをつけておいた方が無難でしょう。

なお、個々のプロパティについてはいろんなところにリファレンスがあるのでそれを参照してください。

[ ↑ content ↑ ]

セレクタ

セレクタってのは具体的にどの要素に、プロパティと値で決めた表現効果を適用するかを決めるものです。これを書くためには 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 クラスのブラウザが対応。）

[ ↑ content ↑ ]

ID

ID属性はまさに「そのタグだけ」にスタイルの指定を行いたいときに利用します。DHTML などでおなじみかもしれません。

HTML タグでは

<要素名 id="名前"></要素名>

と書きます。スタイルシートでは

要素名#名前 {
    プロパティ: 値;
}

と書けば効果を指定できます。

ID属性はその HTML ファイル内で完全にユニークである必要があります。クラスのようなわけにはいきません。

[ ↑ content ↑ ]

文脈

セレクタをスペースで区切って書くと、その書いた順番の通りの親子関係になっているタグについて、スタイルを指定できます。例えば

p {
    line-height: 1.5em;
}

blockquote p {
    line-height: 1.2em;
    font-size: 85%;
    font-style: italic;
}

という具合に書いておくと、普通の段落では行間を文字の高さの半分で確保して、blockquote の中の段落では行間を控えめに、文字の大きさも小さめに、ついでに斜体で、という具合に指定できるということです。

これをうまく使うとなんでもかんでも span で挟んだりしなくても*10、狙ったタグを特定できるようになります。そのためには HTML の構造をしっかりさせないといけませんが、使えるとかなり便利です。この辺は「div, span の利用」も参照してください。

[ ↑ content ↑ ]

セレクタの優先度

セレクタには以上のようにいくつかの指定方法があり、ある要素についてのスタイル指定の情報が衝突する可能性があります。この場合、どのスタイルが適用されるかと言うと、

基本的にはより細かく指定してあるセレクタが優先される

ことになっています。例えば

の３つで同じ属性を指定していた（例えば文字サイズとか文字の色とか）場合、下に行く方がより細かい、つまり適用対象となる要素が限られているので、その指定が優先されることになります。

ま、比較的常識的というか直感的な優先順位だと思います。また、まるっきり同じ優先度のセレクタだった場合はあとで指定した方が有効になります。*11これもまぁ、常識的な挙動なのですが、一つだけ@import なんかを使う場合は注意が必要です。@import で指定したファイルが先に読み込まれるので、同じ内容を書いていた場合は @import の内容は上書きされてしまいます。（@import については「@import を使ったスタイルシートの分割」を参照してください。）

また、ちょっと意味合いが違いますが、一緒に説明しちゃうと親要素より子要素に指定したスタイルの方が優先されます。例えば

<p style="font-color: red;">
  <a href="ほにゃらら" style="font-color: blue;">ここの文字の色は青になります</a>
</p>

ということですな。これも当たり前と言えば当たり前です。

[ ↑ content ↑ ]

スタイルの継承

HTMLは要素の入れ子なので（「Web page を作る」の「基礎知識編」や「HTML基本構造編」参照）、それぞれの要素には親要素、子要素という関係があります。例えば table の中には tr, td が入りますが、この場合、tr は td の親要素であり、table の子要素になります。

で、スタイルは基本的に親から子へ引き継がれます。これが継承です。

プロパティによって継承されるものとされないものがありますが、原則的にスタイル指定は継承されると覚えておいてください。すると、個々の要素にいちいちスタイルを指定しなくても、かなり省略して書けることに気づくはずです。この継承をうまく利用して楽をしてください。スタイルシートは見栄えのコントロールが高度にできるだけでなく、楽にできることがメリットですから。

スタイルシートって、オブジェクト指向ですよねぇ…。

この話は次の「div, span の利用」に続きます。

[ ↑ content ↑ ]

コメント

HTML と同じようにスタイルシートの中にもコメントを書くことができます。CSS のコメントは /* で始まり、*/ で終わります。ただし、コメントを入れ子にすることはできません。

/* この部分はコメントです
P {
    color: #24211e;
}
ここまで無視されます。*/

[ ↑ content ↑ ]

CSS活用上の工夫

div, span の利用

「中級要素編」の「グルーピング」のところで紹介しましたが、div, span にクラスやIDを指定しておくと、スタイルシートからこれが便利に使えます。

HTML に当てはまる意味の要素がないとき

スタイルシートを使うメリットの最も大きなものの一つに、構造と表現の分離というものがあります。HTML が構造や意味を、スタイルシートが表現を担うわけです。スタイルシートは HTML 上の何らかの要素を対象に表現を当てはめていくわけですが、適切な意味を表す要素が HTML になかった場合、スタイルシートはどこに表現を当てはめていったらよいのでしょう？

これを解決するのが div, span です。

例えば HTML には作者を表す author という要素も監督を表す director 要素も、配給会社を表す distributor 要素もありません。はて、映画の話をマークアップするとき、どうしますか。答えは簡単。

を使います。で、span.author, span.director, span.distributor をセレクタにして好きなスタイルを指定すればよろしい、と。

また、小説なんかでも地の文を表す部分、会話の部分、回想シーンとかで全部スタイルを切り替えたいって要望があるかもしれませんね。ご安心を。<div class="present"></div>, <div class="dialog"></div>, <div class="past"></div> なんて感じでしょうか。

[ ↑ content ↑ ]

ある範囲の要素の表現をごっそり変えたいとき

HTML で書くのはシンプルな文章だけとは限りません。

何ページもの、何階層にも渡るページ群からなるサイト全体への適切な誘導のためには、適切なインターフェイスの設計が欠かせません。例えば多くのサイトではページの左端や右上にナビゲーション用のリンクを配置していて、そこがリンクの並んでいる場所であることが容易に分かるように工夫しています。まずその部分に本文に関係するような内容を入れることはありません。分かりやすいナビゲーションのためにははっきりと区別がついていることが重要ですから。

ということは。

そこは「構造的に明らかに特徴のある部分」ということになります。

これを HTML で表現するには。やっぱ <div class="navi"></div> なんて感じで区別するのがいいんじゃないですかね。こうすると何がいいかと言うと、

なんてなことができるわけです。

いわゆるレイヤー

DIV ブロックの位置を指定できるということは、これを使いこなせば TABLE による inaccessible なレイアウトではなく、accesible でなおかつ柔軟なレイアウト*12やダイナミックな効果を実現できます。

旧トップページの構造図

例えば本講座のトップメニューでは2002.01.現在、対応しているブラウザについてはいわゆる「レイヤー」の機能を使ってメニューを表示しています。これは細かく言うと

  1. DIV で囲んだ部分の位置（Y座標）を固定し、
  2. 普段は非表示にしておいて、
  3. 特定のアンカー（ここでは Contents のメニューの一つ一つ）にフォーカスがあったときに（念のためクリックなどの選択動作にも対応）
  4. サブメニューのクラス（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 {
    font-color: orange;
    font-size: 90%;
}
a.navi {
    font-color: gray;
    font-size: 90%;
}
div.navi {
    font-size: 90%;
}
div.navi p {
    font-color: orange;
}
div.navi a {
    font-color: gray;
}

これだけだとよさが分かりませんが(^^;、例えば左の DIV ブロックを使わないスタイルの設定例では、 p 要素が現われるたびに <p class="navi"> と一つ一つの p 要素に対してクラスを指定する必要がありますが、右の DIV ブロックを使った設定例ではナビゲーション関係の部分を DIV ブロックの中に入れてしまいさえすれば、あとは p 要素が現われてもシンプルに <p> と書くだけで済みます。HTML を手打ちしている場合はダイレクトに作業量に関わってきますし、便利なツールを使う場合でも設定し忘れを防ぎやすいという効果があります。

実際には、ブラウザのバグによって思ったように継承されない場合もありますし、継承されないばかりか、他の部分に不具合が出るなどなかなか難しい面もあったりします。そういう煩わしさを避けるために、ブラウザのバグを利用して不具合の出るスタイルが反映されないようにする方法がいくつかあります。詳しくは参考 URL などを当たってください。

[ ↑ content ↑ ]

出力メディアに応じたスタイル

CSS 2 では IE や Netscpae などの PC 上のグラフィカルなブラウザへの対応だけでなく、他のメディアへの出力に対してスタイルの指定を切り分けることができるようになっています。この出力メディアの指定にはメディア記述子というキーワードを使います。

メディア記述子対象としているメディア
screenページという単位に縛られない、GUI なコンピュータの画面
tty固定ピッチの文字ベースで成り立つテレタイプや端末画面、あるいは画面の性能の限られている PDA など
tvコンピュータ用でない TV など。解像度が低く、スクロールなどの操作性もよくないデバイス。
projectionプロジェクタ
handheldハンドヘルドPC や PDA などの画面が小さく、解像度も低く、色数もあまり再現できず、通信速度も遅いデバイス
printページ単位に区切られた印刷物や印刷プレビューモード
emboss印刷された点字（ページ区切りあり）
braille点字ディスプレイ（ページ区切りなし）
aural音声読み上げ装置
all文字通りすべて

将来的には3Dデバイスや解像度を指定した記述なんかもできるようにと考えられているようです。CSS 3 の策定作業も進んでいるようですし、メディア記述子はまだ増えると思います。

具体的にこれらの記述子を使ってメディアタイプを切り分けるには

の二つの方法があります。

[ ↑ content ↑ ]

HTMLの文法による出力メディアの限定

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の文法による出力メディアの限定

CSS の文法では“@規則”を使った @media ブロックで記述を分けます。

h1 {
  font-size: 150%;
}
@media print {
  h1 {
     color: black;
     background-color: white;
     background-image: none;
  }
}

セレクタに当たる部分に @media と出力メディアを指定するメディア記述子を書き、あとは普通のスタイル指定を { } を使って丸々その中に含めてしまう、といういたってシンプルな方法です。

上のサンプルでは印刷したときだけ h1 要素の中身の文字色が黒、背景を白にすることが期待されます。

この書き方は今のところ Windows版 IE 5 以降と Netscape 6 が対応しています。

[ ↑ content ↑ ]

@import を使ったスタイルシートの分割

スタイルシートを使っているうちに、段々と自分なりの定番スタイルというのが固まってきます。別なスタイルではあるんだけど、この部分は共通してるって部分。そうした部分は別なファイルに分けておくことができます。

で、外部スタイルシートファイルや style 要素の中でいちばん最初に

@import url("URL") メディア記述子;

のように分けたファイルを指定します。この際、

という具合に比較的自由度の高い書き方ができるのですが、困ったことにこの書き方に部分的にしか対応していないブラウザが多いのが現状です。*13

この @import で指定したファイルに書かれているスタイルと、実際にこれを書いて呼び出しを行った方に書かれているスタイルが衝突した場合は、呼び出しを行った側のスタイルの方があとに書かれているので有効になります。

仮にすべての方法でスタイルを指定していた場合、優先順位は以下のように

優先順位はstyle属性、style要素か外部スタイルシート、@importされたファイルの順
  1. HTML の style 属性
  2. HTML の style 要素と外部スタイルシート
  3. @import されたファイル

の順になります。style 要素と外部スタイルシートの優先順位は同じです。link 要素、style 要素の書いた順によってどちらがあとで指定したことになるか、つまりどちらが有効になるかが決まります。

[ ↑ content ↑ ]

余談 -- 意味と表現の分離に向けて --

これは別に W3C がこう言ったとかそういうことではないのですが、あれこれ試行錯誤したりアクセシビリティだなんだと勉強しているうちに感じたのは、意味と表現を分離した場合、一枚一枚のページについては、けっきょく古い一次元の巻物構造に戻ってしまうってことなんですよね。

派手派手で動的な効果という意味でなく視覚的な表現というのは、情報の伝わりやすさにとって非常に重要です。少なくとも視覚に頼っている我々にとっては。そこで文字や画像の大きさの対比、色合い、配置などのテクニックを使うわけです。

しかしこれが分離される、と。試しに見た目の情報をすべてスタイルシートで記述してスタイルシートをオフにしてみればよく分かるのですが、こうなると情報は「書いた順に」ユーザーに届きます。配置によってより多くの情報を効率的に見せるためのテクニックってのは全然通用しない世界なんです。順番にしか情報が伝わらない、つまり一次元の世界なんです。

そうなると、なるほど「オンライン・ハイパーテキストのためのスタイルガイド」にあるように、確かに一枚一枚のページを小さくした方がこの場合はいいですね。一覧性や印刷するときの便利さは落ちますが、一ページ当たりの情報量が多すぎるとこれを整理するのが難しくなりますし、だらだらと長いページでは巻物や本などの古い構造のテキストと変わらなくなってしまうからです。

しかし Web を小分けにするためには、ドキュメントの構造をしっかりさせないといけないんですよね。小分けにされ、相互にリンクされたページ群はあとから直すのが大変ですし、構造がちゃんとしていないとすぐに迷子になってしまいます。

そして構造の記述のために HTML が XML 化の方向をたどるのもまた当然だな、と。HTML は構造を記述するためのものだと言うけれど、その記述できる構造ったら、めちゃくちゃ粗雑ですものね。

構造と表現の分離の意味って、けっこう深いのかもしれないなーと、感じたのでした。おしまい。

なお、本講座では比較的古いブラウザでの利用を考え、見た目をスタイルシートだけでなく HTML でコントロールしようとしています。あと、印刷しやすさを考えてあえて一ページの容量が大きくなってもあまり分割しないようにしています。もう面倒なので説教講座はこの方針で行きます。新しい企画で新しいサイトを起こすときにまた考えることにします。

[ ↑ content ↑ ]

参考

学習

現実的な対処

Tipsとか

勧告とか

[ ↑ content ↑ ]

脚注

*1

TABLE を使って HTML だけで強引にレイアウトする方法のこと。現在最もよく使われているレイアウトテクニック。でも本来は表でもないものに TABLE を使うのは文法的にもおかしいし、音声で内容を読み上げているブラウザにとっては意味不明な情報の羅列になりやすいのでアクセシビリティ的にもオススメできない。（と、分かっていても多くのサイトでは各ブラウザの CSS 対応の“揺れ”をきらって TABLE でレイアウトをしています。）

*2

対応していないものは無視されるのでいいんですけど、厄介なのは「中途半端に対応している」ものですね。IE 3 は基本的に論外、Netscape 4 ではなんとかスタイルシートの気分を味わえる、IE 4 では本当の面白さはまだ…って感じで、IE 5 以降、Netscape 6 くらいからが使いものになるレベルでしょう。それでも CSS 2 くらいになると途端に対応が難しくなりますが。

*3

当たり前ですが、スタイルシートを使えばそれすなわちアクセシビリティの向上や確保を意味するわけではありませんし、スタイルシートを使わなければアクセシビリティが実現できないわけではありません。

*4

ほかにも XSL （XML Stylesheets Language）などありますが、HTML + CSS のようには（見た目をコントロールするという具合に）話がシンプルではないのですな、これが。

*5

IE 3 以降、NN 4 以降で対応していることにはなっていますが、どちらもひどい実装です。場合によってはページがまったく判読できなくなったり、ブラウザが落ちたりします。これらのブラウザを避けるテクニックがあるので、それを織り交ぜて利用するとよいでしょう。詳しくは参考 URL に当たってください。

こうしたブラウザを使わないように啓蒙するのも手ですが、それをやるとけっこう嫌がられたりします。もうさすがに IE 3 ユーザーはスタイルシートをオフにしていると思いますけど、Netscape はまだ 6 が実用段階にない（2002.01.）こともあり、4.x への対応は考えておく必要があるでしょう。

*6

style 要素を使う場合でも、link 要素を使った外部スタイルシートの場合と同じように title 属性、media 属性を使ったスタイルシートの使い分けが可能ですが、あんまりそんな使い方しないでしょう。

*7

これについては RFC 2318 でメディアタイプ text/css、拡張子は .css にしよう、というように話が出ていますので、技術的にはなんでもいいですけど、運用上はやはり「拡張子は .css」で合っているみたいです。

*8

ファイルの場所は URL で指定しますので、極端な話、別なサイトのスタイルシートも適用できます。だからといって他人のスタイルシートを勝手に拝借しちゃったりするのはやっぱまずいような気がしますけど…。

*9

各要素の style 属性を使う場合はセレクタを指定する必要がない（だってすでにどの要素にスタイルを適用するかは自明だから）んだけど、そもそもその使い方をオススメしないのでとりあえず端折ることに決定。

*10

なんでもかんでも span で挟んでたら font タグを使うのとたいして変わらないのでスタイルシートのメリット半減ですよね。

*11

そのはずなのですが、なんかどうもブラウザによってこの辺の解釈が揺れているようです。スタイル指定の競合で思ったような効果が得られていないような場合は、文脈セレクタを使ってはっきり分けるようにした方が安全でしょう。

*12

柔軟だから accessible なのではありません。もちろん TABLE で横幅を固定するよりも CSS で柔軟なポジショニングをした方が画面サイズの制限が減るという意味では確かに accessible です。しかしむしろ、スタイルシートを無効にしたときにレイアウトを除いた純粋な情報だけをユーザーが手にすることができるようにできる、つまり、レイアウト情報を CSS に追い出すことによって HTML を accessible な形にできる、ということの方が重要だと思います。

*13

ただ、おかげでブラウザの切り分けをこの @import 一つでできるというメリットもあります。実際、Netscape 4.x はこの書き方にまったく対応していないので、Netscape で問題の起きそうなスタイルをすべて @import で呼び出すようにするのは有効な方法です。

ときどきこの方法で Netscape 4.x を完全に無視するサイトもありますが、それはそれで個人的には残念ですね…。

 > ホーム > Web ページを作る > CSSに移行しよう