HTML と CSS

自分がメインに使っている Netscape 4.x は、 CSS の対応についてはかなりアレなので、通常は「スタイルシートを使う」のチェックをはずして使っています。また、ドリームキャストのドリームパスポートのようにそもそも CSS に対応していないブラウザなどもあります。

そういったブラウザでは CSS でページの装飾を行っているサイトなどはかなりシンプルな見栄えになることもあるわけですが、そのことについては(自分は)別に気になりません。ただ誤った CSS の使い方をしているサイトもあったりして、たまに困ることがあります。正確に言えば、「 CSS 抜きでは閲覧が困難になるようなサイト」なんですが。

と、その前に。例えば、よく使われている( HTML では不可能な)「リンク部分の下線消し」などから CSS に興味を持たれた方の中には、 HTML の要素や属性と CSS のプロパティに、なぜ同じような働きを持つものがあるのだろうと疑問に思われた方もいらっしゃるのではないかと思います。

例えば、以下のような例ですね。

こういった記述がなされていた場合、 CSS に対応した視覚系のブラウザなら、どちらも本文が「赤く」「太字で」表示されると思われます。もちろんこういったもの以外に、 HTML ではできないけど CSS にはできることも多いですし、 CSS でならより細かい制御ができたりする場合も多いですけど(フォントサイズ、マージン等)。

このあたりについては、 CSS でできることは CSS で行うというのがいちおう理想なんですが。

このあたりの話については、必ずしも全ての制作者がそうしなければならないと強く考えているわけではありませんし、そういった意図で記述しているわけではありません。が、そのあたりの事情は知っておいて損にはならないと思いますし、間違いは避けるにこしたことがないと思いますので。

なぜ HTML と CSS の両方で似たような指定(文字色、書体など)ができるのかということですけれども。要するにこれは( HTML の規格を勧告している W3C によれば)今まで HTML で指定していた装飾に関する部分は、 CSS で指定するように移行するのが望ましいとされているからですね。

例えば HTML の要素には、 p 要素なら「段落」、 h1 - h6 要素なら「見出し」といったように、その要素の意味を示すだけのもの(表示自体はユーザーエージェント依存)や、各要素の align 属性、 table 要素、 tr 要素などの bgcolor 属性、あるいは font 要素など、どのように表示されるかを決めている要素などがあります。後者は前者と対照的に、意味的には内容に何の影響もあたえません。

左寄せ・センタリング・右寄せのいずれかを選択することで文章の意図が代わるわけではありませんし、本人が「強調するつもりで」色を変えていたとしても、見る方が同じように解釈するかはわからないということですね。

で、後者のような要素・属性については今後は CSS で指定して、 HTML では前者のような内容の意味・構造を示すもののみ記述していく方向で、ということですね。 CSS について説明してあるページで、「見栄えと構造の分離」という言葉を見かけたことがある方もいらっしゃるかもしれません。

ただ実際このあたりがいちばん説明に困る部分のような気がします。特に今まで <font color="red">〜</font> や <td bgcolor="blue">〜</td> 、 <center>〜</center> といった記述が当たり前のようになされてきて、大きな間違いさえなければ実際それで大部分の閲覧者は不自由しない(と思われる)わけで。

普通に考えれば上記のような方針に移行した場合、 HTML 文書そのものはシンプルになり、 CSS で指定する個所が増えることが考えられます。で、自分のところのように大量の文書を抱えていて、それらの再利用も行うような場合には、 HTML 文書自体がシンプルな方が、何かと便利なことははっきりしています。

例えば見出しの色を変えたいといった場合に、目的の見出しが <h2>〜</h2> で統一されていれば、リンクされているスタイルシートの h2 {color:#ff0000;} の #ff0000 の部分を書き換えるだけで済みます。

これが <p><font color="#ff0000">〜</font></p> のようになっていると、一つ一つ書き換える必要がありますし(エディターで置換はできるでしょうけど)、そもそもそれが「見出し」なのか「本文」なのか区別がつけづらくなりますですね。

といったことは実際にあります。が、単に絵なりに文章なりを発表したいだけで、現在の手法を変える必要を感じない方のほうがやはりかなり多いんじゃないかと思ったりするわけです。特に Windows の IE ユーザーが圧倒的な現状では、その環境で見られるなら大部分の人が見られることがほぼ約束されているようなものですし、後で手を加えるつもりが全く無ければ、それこそアップロードしたままでも本人は困らないわけで。

そんなわけで、自分自身は以上のような方針に移行しつつも、こういった話のときには微妙な言い回しに終始するわけですが(笑)。とはいえ明らかに誤った CSS の使用法などもときおり見かけることがありますので、全面移行とかそういった話ではなく、ちょっとしたポイントというかそのあたりを。

文字色や背景色、フォントの指定等、装飾部分を全面的に CSS で行うか、それとも HTML ではできないことだけ CSS を利用するのかはともかくとして。 HTML のみでの記述でなく HTML + CSS で記述する場合に気をつけないといけない点があります。

といってもそんなに大げさなことではなくて、「 CSS が適用されない(しない)場合でもきちんと閲覧できる」ことですね。もともと CSS という規格が作られたのは、文書の構造と装飾を分けることで(様々な環境での)アクセス性を高めるという意味もありますので、 CSS 対応のブラウザでないとまともに閲覧できないのでは本末転倒ということです。

アクセス性

アクセス性について補足しますと、 UA や環境によっては( HTML か CSS かを問わず)あまり飾り付けがない方が閲覧しやすいこともありうるということです。よく引き合いに出されるのは音声ブラウザですが、それ以外にも、例えば低解像度のモニターや携帯機器などで表示する場合、検索エンジンや巡回ソフトなどでインデックスを作る場合などが考えられます(他にも考えられるとは思いますが)。

極端な話、単なるテキストだけであれば、誰でもどんな機器でも確実に閲覧できるわけです。そこに様々な要素を追加していくことで、少しずつ環境による違いが大きくなっていきます。色については機器の色数が、幅の固定やフォントの大きさの変更なら解像度やウィンドウの大きさが、スクリプトを使った場合はそのスクリプトへの対応やオンオフが、それぞれ影響するといった具合ですね。そのあたりが装飾について HTML では最低レベルにとどめて、 CSS で指定することが望ましい理由の一つでもあります。

なおこういったときの「まともに閲覧」というのは、色や配置など何から何まで同じように見えることを意味しません。要は内容に応じて見出しや本文、強調部分や注釈、あるいはブロック分けなどが適切に行われていれば、たとえ CSS に対応していなくても、それぞれの環境に応じて意味が通るように表示されるということですね。

それとは逆に、装飾用の要素や属性を多用したり、 table 要素で幅や配置などをがちがちに固めてしまうと、ちょっと環境を変えたときに閲覧すら困難になりかねないと。

注意点と簡単な例

つまりは CSS が適用されることを前提に HTML を記述するのではなく、まず文書として意味の通る HTML を作り、そこに CSS で飾り付けを追加していくという手順を踏む必要があります。

ごく簡単な例を挙げますと、 CSS で背景画像や背景色を指定することを前提に、 HTML で文字色のみを指定している場合などがあります(あるいはその逆)。ブラウザのデフォルトの設定では、背景色は白で文字色は黒のことが多いと思うんですが、 CSS で背景を黒にするからといって、 <body text="white"> なんてやってしまいますと、 CSS をオフにした状態では何も見えなくなってしまいます。

ので、 CSS で文字色や背景色を変えたりする場合は、 HTML のほうも文字色や背景色などをセットで指定しておくか、あるいは HTML のほうでは指定しないなどの手段をとる必要があります。なお、ここではわかりやすく <body> を例にとっていますが、 <table> や <td> などに背景色を指定する場合ももちろん同じ理屈です。

とまあ、このあたりはちょっと注意すればすむ話なんですが。現実にはもっと複雑な例があったりします。とりあえずご覧になってもらえれば一目瞭然なので、サンプルページを作ってみました。

良くない例( CSS あり)

IE でも Netscape でも、 CSS が適用されていれば画像と説明が横に並んでいて何の問題もないように見えるかもしれません。ですが、このページから CSS での指定のみを取り除くと以下のようになります。

良くない例( CSS なし)

この場合はまだ項目が少ないですし、それぞれ画像と文章だけなら順番に並んでいるので関連を推測できないこともないんですが、実際には項目がもっと多かったり、間に他のイラストや文章が入っていたりすることがあります。そうなるとそれらが延々と左端に縦に(それも順不同で)並んでしまって、もう何がなにやら。

というか、そっちの間違いの方がはるかに難しいと思うんですが。こういう記述をするくらいなら、それこそ table 要素を使う方が(個人的には、ですが)まだましだと思いますし、それ以前に「画像→説明」の順番で各項目を記述していって、それに対して CSS を適用したほうがはるかに簡単です。

作成ソフトと Internet Explorer

結局こういったことは、作成ソフトと Internet Explorer の影響が大きいのではないかと思います。詳しい文法を知らなくても作れることを売りにするのであれば、そのあたりもソフトが面倒を見るべき(というより前述のようなソースを生み出さないようにすべき)だと個人的には思います。

IE については、 CSS への対応度がどうこうではなくて、そもそも「 CSS が適用される、されない」というのを意識する場合があまりないんじゃないかと。 IE の場合、簡単に CSS をオフにできないみたいですし、ユーザースタイルシートというのも使えますが実際に使用している方はそう多くないでしょうから。

Netscape 4.x の場合、 CSS への対応については前述のようにかなりアレなんですが、そのぶん逆に CSS について意識する必要があるといいますか(笑)。それと設定で簡単にオフにできますので、 CSS 無しの状態もすぐに確認することができますし。