CSSの現実-ホームページにCSSを活用するにあたって

HTML&CSSガイド

ホームページ作成にCSSを活用するにあたって、気になることやクリアしなければならないこともあります。このページが、これからホームページ作成にCSSを活用されたい方に少しでもお役立てば幸いです。

ホームページにCSSを活用するにあたっての現実問題

魅力がたくさんあるCSSですが、実際にホームページ作成に活用する為には、クリアしなければならない問題もあります。以下はホームページ作成にCSSを活用する場合に、特に注意が必要なことを何点がご説明いたします。

ブラウザのバージョンと様々なバグ対策

ブラウザのバージョンの違いは深刻な問題点

多くの利点を持つCSSですが、実際にホームページ作成にCSSを使うとすべてうまくいくか?といえば、現時点でいくつかの問題点があります。特にWindowsのIEの場合、IE6以前のバージョンで指定したとおりにデザインが表示されないことが多くあります。IE以外にもOpera独自のバグなど、ホームページ作成者が、いくら間違いなくCSSを指定しても場合によっては、正しく表示されないことがあるのは、非常に大きな問題です。

この原因は、ブラウザのバージョンごとの仕様による表示の違い、ブラウザの持つ様々なバグ、ドキュメント宣言の違いによる各ブラウザの表示の違いなどが考えられます。

その対策はときに、バージョンごとに対処しなければならず、その対応に悩まされることになります。つまり、CSSを変更するたびに、多くのブラウザ環境で表示テストを繰り返すことになり、原因の究明やその対処方法などに多くの時間を使うことになります。

いったん、CSSに慣れてしまえば、そもそも問題が発生しにくいコードを書くようになりますし、問題が発生しても、解決できるようになります。しかし、そうなるまでの間は、それなりの数と量の実践的な経験が必要となってきます。

つまり、これからホームページ作成にCSSを導入しようとした場合、効率的な作業はできないかもしれない、ということを覚悟しなければなりません。

CSSデザインの理想と現実

実際にWeb業界の現実は、CSSの多くのメリットはわかっていても、コストや時間的な面で難しい、といった制作サイトの問題から、CSSのメリットを100%活かした、テーブルを一切使わないCSSデザインに踏み切れていない、というホームページ制作会社も多く存在するのが現状です。

ホームページ作成にCSSを使う方法として、2つの方法があります。1つは、CSSのメリットを100%活かした、テーブルを一切使わないCSSデザインという理想的な方法。もう1つの方法は、一部にテーブルレイアウトを使って残りのデザインをCSSで作るという「ハイブリッドデザイン」という方法です。この方法は最近はかなり浸透してきています。ハイブリッドデザインについては、次ページで簡単にご説明いたします。

ご自身でホームページを作成される場合どちらを選ばれるかは、そのホームページの完成までの期間やご自身がホームページ作成に費やすことができる時間の都合など、実際に制作に携わる方の判断で選択されるとよいでしょう。

いずれにしても、新しくホームページを作成されるときは、従来のテーブル依存型のデザインやフレーム使用のデザインは、避けたほうがベストです。

テーブルを一切使わないCSSデザインの場合でも、テーブルをまったく使わないということではありません。本来のテーブルの役割としての使い方は必要です。数値やデータの「表」を作るときは、テーブルを使うのが最も効果的です。

このページの先頭へ

古いブラウザをどうするか?

CSSサイトで問題となるのがNetscape(ネットスケープ)4.xのような古いブラウザの対応です。古いブラウザを新しいブラウザと同じように見えるようにというご希望の場合、CSSサイトでは対応が難しくなります。なぜなら、古いブラウザはバグも多く、CSSに部分的対応しかしない、またはCSSの解釈ができなかったりするため、どうしてもCSSサイトにはできないわけです。

作ろうとするホームページのターゲットユーザーやターゲットブラウザをどこに設定するかによってその対応方法も変わってくるでしょう。年々新しいブラウザを使う人は増えています。逆に古いブラウザを使っている人たちの比率は年々低くなっていきます。だんだん使われなくなってきている過去のブラウザのために、CSSを使わないか?は、作り手各自の判断です。

表示を同じにしなくてもどのブラウザからでも情報にアクセス

古いブラウザ表示を同じにしなくても、どのブラウザからも情報にアクセスできるようにすることで、現在広く使われているモダンブラウザ(2000年以降登場したブラウザ)を犠牲にせず、CSSを活用したサイトにするという方法選択が始まっています。

2002年、アメリカの大手ニュースサイトであるWired Newsがサイト全体をこの方法でリニューアルしました。このリニューアルは業界に大きな影響を与え、特に2003年以降は、デザインをCSSへ分離するサイトが徐々に増えてきています。
参考:Wired Newsサイト(http://www.wired.com/

この方法は、古いブラウザにはCSSを適用しない、つまりNetscape(ネットスケープ)4.xなどの古いブラウザで見たときは、特にレイアウトをしていない状態で表示させることになります。HTMLをweb標準にそって記述しておけば、デザインはなくとも、そのページが伝えたい情報はしっかり相手に届くという考え方です。

アクセシビリティとユーザービリティ

ユーザーの違いとアクセシビリティ

CSSでデザインするとアクセシビリティの向上!もするといいますが、その設定の仕方によっては、逆にアクセシビリティを損ねる場合もあります。ユーザーの違いは、アクセシビリティを考える上で重要なポイントです。

たとえば、文字サイズをCSSで設定する場合、その設定の仕方でブラウザによって文字サイズが変更できない場合があります。多くのシェアを持つWindowsのIEの場合、「ピクセル単位」で文字サイズを指定するとブラウザ本来の文字サイズ可変機能が使えません。

ホームページの制作者側は、レイアウトの崩れを懸念してデザイン重視で文字サイズ設定をしたいというのが本音でしょうが、これはホームページを見る側のアクセシビリティを損ねることにつながる場合があります。

ユーザーが高年齢の方の場合、小さな文字では読みづらくなり、情報を得られない可能性も出てきます。そのため、ページの文字サイズの設定を大きくしたり、文字サイズを変更してもレイアウトが崩れないようにするといった配慮が求められます。

また、健常者だけでなく、さまざまな障害を持ったユーザーにもWebページが閲覧できるように、CSSを設定するときには、アクセシビリティの基準をどこにおくかなど、考慮する必要もあるでしょう。

このページの先頭へ

受信環境の違いとアクセシビリティ

Webページの配信では、受信環境の違いもアクセシビリティに影響します。フォント(書体)を設定する場合、Webページの制作環境(自分のPCに入っているフォント)が見る側の環境(相手のPC)と違うと言うことを考慮せず、独自のフォント指定のみをCSSで設定すると、見る側の環境で表示が崩れたりする場合もあります。

OSの違い・ブラウザの違い・ネットワーク環境の違いなどを考慮して、どのような環境に対してアクセシビリティを確保するか検討し、CSSを使いましょう。

ユーザービリティの高いページ

ユーザービリティとは、ページの使いやすさです。ユーザービリティはアクセシビリティの延長線上に存在します。せっかくSEOやアクセシビリティに気を使っても、そのWebページが「読みにくい、使いにくい」ページでは、利用してもらえなくなるでしょう。

たとえばCSSで文字色や背景を設定する場合、その組み合わせによっては、背景が文字を邪魔して、読みづらかったり、目が疲れるような配色を設定すると、ユーザービリティに欠けたページとなってしまいます。

CSSを活用し、HTMLから表示の為のタグを取り除いた構造化されたHTMLにすることは、ユーザービリティにも繋がりますが、ユーザービリティの高いページをつくるには、いかにページをデザインするかがポイントとなります。

以上のようにCSSを利用する場合、今までとは違ったホームページ作成の苦労も出てきますが、ホームページの構造化とCSSの活用にできるだけ早く取り組んでおくことが、今後のお客様ご自身のホームページをより良くすることは間違いありません。

ウェブササドットコムはホームページにCSSを有効活用

ウェブササドットコムはホームページ制作にCSSを有効活用することにより、HTML構造からデザインを切り離しCSSの持つ魅力をお客様のサイト制作に活かします。

このページの先頭へ