このページの先頭です
ここから本文です 実践ノウハウ

CSSの導入を阻む4つの難関
-大藤 幹の『Web標準の基礎知識』 第3回

以前より泥臭い作業は減ったものの

つい数年前までは、CSSレイアウトは非常に泥臭い作業が必要なものでした。特定のブラウザでの原因不明のバグに悩まされながら、洗練されていない裏ワザ的テクニックを使うなど、様々な試行錯誤を繰り返すことでやっと完成できるようなものだったのです。しかし、現在は違います。各種ブラウザで発生する問題の多くはすでに把握されていて、その対処法も広く知られるようになり、裏ワザ的テクニックもそれほど使わなくて済むような状況となっています。

とはいえ、CSSはXHTMLと比較するとやはり難しいと言わざるを得ません。実際問題として、CSSをうまく導入できない、なかなか上手に使いこなせないという人は意外に多いのではないでしょうか。その理由を考えてみると、CSSを難しくしている原因の主なものは、CSS自身ではなくCSSの外部にあることがわかります。つまり、CSSをマスターしたければ、CSSだけを一生懸命に勉強してもダメだということです。今回は、CSSの導入を難しくしている4つの要因について説明します。

CSSの第1の難関「構造を示すタグ付け」

CSSは「Web標準」の中の重要な規格の1つではありますが、そのコアとなっているものは何かと考えると、それはやはりXHTMLです。そして、CSSを適用する対象はというと、そのXHTMLの各要素です。したがって、XHTMLのタグをどう付けるかということは、CSSにも直接大きく影響してきます。前回までに「構造を示すタグを付ける」ことの重要性を説明してきましたが、その一つひとつの要素に適切なタグをつけていく作業は、CSSの適用先をきちんと用意するという意味でも非常に大事なことだったのです。そのため、XHTMLの構造を示すタグの付け方をマスターする前の段階で、いきなりCSSだけを始めようとしても当然うまくはいかないことになります。このことに気付かなければ、いくらCSSを勉強しても上手に使いこなすことはできません。

CSSの第2の難関「要素のグループ化」

本来、XHTMLには構造を示すタグを付ければそれでOKのはずなのですが、現実的にはその後にCSSでレイアウトをするためのdiv要素を加える必要があります。具体的に言えば、ヘッダやフッタ、ナビゲーションなどのまとまった範囲をdiv要素でグループ化して、id属性またはclass属性で名前を付ける作業です。こう書くと意外に単純な作業のように思えるかもしれませんが、実はこの部分は構造的なタグを付ける作業と比較すると自由度が高い反面、制作者の実力があからさまに現れる部分でもあります。簡単に言えば、上級者であればあるほどシンプルでスマートにグループ化できるのですが、そうでなければdiv要素を何重にも入れ子にしたり、内容が空のdiv要素を多用したりと、CSSで表示指定をするためタグの割合が徐々に増えていきます。これについては、うまく作られた実際のサイトを参考にしたり、良質な解説書を読むなどして少しずつ覚えていくしかありません。

CSSの第3の難関「ブラウザのバグ対策」

たとえXHTMLとCSSを適切に書けるようになったとしても、ブラウザ側の問題で意図した通りに表示されないことはよくあります。多くの問題がすでに把握され、その解決方法もほぼわかっているとはいえ、うまく対処できるようになるにはある程度の経験が必要となってきます。ただし、経験を積むことで、今度は逆に問題の発生しないソースコードの書き方がわかってきます。CSSは、少しでも早く始めて経験を多く積み、とにかく慣れることが上達への早道だと言えるでしょう。

CSSの第4の難関「CSS2の限界」

ここまではCSSの外部の要因について説明してきましたが、CSS自体にも問題がないわけではありません。現在、主に使われているCSS2は1998年に作られた仕様で、不十分な機能や問題のある機能もたくさん含まれています。現時点でそれを補うためには、制作する側が様々な工夫をしなければなりません。ただし、そのための手法の多くはすでに広く知れ渡っているため、それほど大きな問題となることはないでしょう。

このように、CSSを使いこなせるようになるまでにはいくつもの難関があるのですが、最も大きなハードルはCSSの適用先であるXHTMLを適切に作っておくというごく当たり前の簡単なことです。その重要性に気付きさえすれば、あとはそれほど困難もなくCSSをマスターできることでしょう。

[次回へ続く]

筆者プロフィール

写真:大藤幹

大藤幹(おおふじ みき)
ZSPC代表。札幌市在住。1996年よりWebの基本技術に関する書籍の執筆を開始し、2000年に独立。現在は、XHTML+CSS、Webアクセシビリティを中心としたテクニカルライティングのほか、セミナー講師、Webサイトの制作やコンサルティングなど多岐に渡り活動している。主な著書は、『詳解HTML&XHTML&CSS辞典 改訂版』(秀和システム)、『世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル』(毎日コミュニケーションズ)など。雑誌Web Designingにて『CSS Analysis』を長期連載中。

大藤 幹の『Web標準の基礎知識』

このページの先頭へ▲