独学で極める “Webデザイン”の技と心

第9回 ValidなHTML,ValidなCSS

この記事を読むのに必要な時間:およそ 2 分

CSSはどのように考えるか

CSSにももちろんW3C validation serviceがあります。

もちろんCSSも正しいとされるものを目指して書くのが望ましいです。ただし,現実の閲覧環境のことをよく考えたうえで記述しなければなりません。

PCで閲覧されることが想定されるほとんどのWebページは,IEやFirefoxなどのブラウザソフトで閲覧をすることがほとんどです。そして,新しいブラウザソフトになるほど,CSSの仕様に準拠した正しい振る舞いをしてくれるものが多いです。一方,2008年4月の現時点でまだまだシェアが高いIE6は致命的な振る舞いの違いを起こしてしまうことが多いのです。いくら正しくCSSを書いていたとしても,どうしても意図どおりに表示できないケースが出てきます。 そこで,ブラウザごとにわざわざ違うCSSを書いて読み込ませたり,CSSハック※3と呼ばれる手法を利用して,特定のブラウザだけに読める記述をしたり,などという工夫がされてきました。

正しいCSSだけで意図通りに表示できるのがもちろん理想です。けれど正しいCSSだけに拘ることによって,意図する表示ができなかったり,レイアウトを崩してしまうことがあったらこれも本末転倒です。

正しいCSSでなければならない理由についてよく考察されている文章がありますのでご紹介します。

Lucky bag::blog: CSS が valid でなければいけない理由って何ですか?のコメント欄より

  1. よりシンプルな解決方法はないだろうか?
    validであってCSSの解釈の違いから解決することはできないか考える。
  2. 同じ表現になるような代替案は無いだろうか?
    スタイルを適用する要素を変えたりして同じような表現はできないか考える。
  3. ビジュアルデザインのほうに無理は無いだろうか?
    デザインを少し変えるだけで解決できるなら,同等か,さらに良い表現方法はないか考える。
  4. 1,2,3で解決できない場合は適したハックを選んで最小限使う。管理できるようにコメントをつける(そして,僕はここでその記述がvalidかinvalidかは気にしない。この段階ではアンダースコアハック万歳な気分になってる)。

http://www.lucky-bag.com/archives/2007/06/why-css-must-be-valid.html#comments

また,私の経験上,ハックの良し悪しということ以上に,記述したCSSを長く面倒見ることができるか。ということのほうが大切だと思っています。自分で責任持って面倒を見られるのであれば,先行実装で最新のコードを入れようが,invalidなハックをしようが大丈夫だと思いますが,実際の制作現場ではCSSは1人のものではありません。そうするとあとは共同作業をする上で必要なハックに関するルールや,適切なコメントを行う配慮が必要です。

※3)CSSハックとは
特定のブラウザだけが読み取り可能な書式を利用することで,振る舞いの違いを吸収する手法のことです。ブラウザごとに手法もいろいろ存在し,バリデータを通過する(仕様上では正しいもの)もあれば,仕様上正しくない記述をすることで特定のブラウザに対応する手法もあります。
参考1:
http://homepage1.nifty.com/VET06031/web/lint100.html
参考2:
http://www.akatsukinishisu.net/itazuragaki/css/invalid_css_and_webstandard.html
参考3:CSSハック一覧表
valid/invalidとブラウザ別の読み取りの可否が一覧で見ることができる便利な表となっています。
http://spreadsheets.google.com/pub?key=prvB_MFPHuEHOYL7ulKmYOQ&output=html

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/