こんにちは。 livedoor Blogを担当しています石野と申します。

前職はマークアップエンジニア(HTMLコーダー)をしていました。 今回はその経験を踏まえ、ディレクターとして把握しておいた方が良いHTML/CSS関連のお話をご紹介しようと思います。
昨年からHTML5、CSS3、そしてInternet Explorer(以下IE)8のベータ2版発表と、バージョンアップに関するニュースが相次ぎました。 その違いを認識する上でも、また制作サイドのディレクションに活かす上でも本エントリーを参考にしてください。

▼ 構成
(1) HTML - 文書型について
(2) HTML+CSS - クロスブラウザについて

(1) 文書型について - ファイルの先頭に陣取っている「DOCTYPE」とは何か？

HTMLソースを開くと、こういった記述を目にしませんか？

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

もしくは「DTD(ディティーディ)」「互換(ごかん)モード」といったキーワードを耳にした覚えはありませんでしょうか？

同じに見えるHTMLでも、実は細かく文法が違っていて、その文書がどの文法のどのバージョンにあたるのかを識別するため“宣言”をする必要があります。
(ちなみに上記は「本HTMLファイルは、XHTMLのバージョン1.0、Transitionalというルールに則っています」といった意味になっています。)

基本的なところだとHTMLなのかXHTMLなのか、また現在ですとHTML5の登場も近づいてきましたので(2010年予定)それを考慮するのか、など。 新規サービス立ち上げにあたってはそのサービスの特徴を見て、どの範囲でHTMLに準拠するのかをプログラマさん・マークアップエンジニアさんらと相談しましょう。

(2) クロスブラウザについて

IE、Firefox(以下Fx)、Safari、Opera… 私たちはなぜ複数のブラウザでチェックしなければならないのでしょうか。

答えは簡単で、ブラウザごとに表示するルールが違うからです。同じHTML・CSSファイルに対して、違う解釈をもつのです。

これはご想像の通りだいぶ厄介です。具体的にはこういった相違が起こります。
たとえばボックスの横幅を指定する「width」は、そのコンテンツの「border」や「padding」の数値とは通常もちろん別で算出されるのですが、IE 6ではそれらを合算した値として解釈してしまいます。
よくある“カラム落ち”と呼ばれる現象の原因の1つがこれです。ボックスの横幅が意図したサイズと違うために、全体の横幅よりも大きくなってしまい、そのボックスはスペースに入らずに“落ち”てしまうことがあるのです。

■ ポイントとしては

・ブラウザが複数あることは事実なので、ディレクターとしてはチェックするべきブラウザ範囲を決める必要がある
・全てのブラウザで全く同じ表示である必要は必ずしもなく、“モダンブラウザ”でしか使用できない便利なCSSプロパティの存在もあるので、“Poor(プア)”な表示への理解も必要である
ということです。

後者について、もっと突っ込んで解説します。

■ MOSe(モーセ)という言葉があります。

これはMozilla,Opera,Safari enhancement の略で、これら3つのモダンブラウザに対しての表示を充実させる考え方です。
古いブラウザでは使えない新しく便利なCSSプロパティを利用することで、より簡単にページを制作していこう、対応していないブラウザについては多少プアな表示でもある程度しょうがないのではないか、と判断するものです。

この考えを実行する具体的な例として「border-radius」プロパティについてご紹介します。

■ border-radius

このプロパティはCSS3で実装される見込みで、現在では一部のブラウザが“独自拡張”によって使えるようになっています。
その一部のブラウザで使用すると、簡単に“角丸”を実現できます。

background-color: #666;
border: 1px solid #666;
-moz-border-radius: 7px; /* for Fx */
-webkit-border-radius: 7px; /* for Safari */

このソースを記載したボックスをFxもしくはSafariで、そしてIEで確認してみてください。
前者では角丸のボックスが実現しており、またIE側は単に四角いボックスになっている筈です。

通常角丸を実現するには四方に配置する画像を切ってボックスを複数作ってそれぞれ配置して余白を調整して… と、とてもとても面倒なものでした。が、こうして簡単に角丸を実現できる手段が登場しました。
一部のブラウザに限ることで、気軽にデザインをリクエストすることができます。

また もう1つ大事なことは、対応していないブラウザでもデザイン的にNGにならずに済むので、一部のみ対応でも問題ないケースがあるということです。

こうした“差”についての理解を踏まえ、コーディングの作業スピードを加味して作業計画を練られると ぐっと良くなると思います。

関連記事：
XHTML+CSSサイトデザイン - livedoor ディレクター Blog(ブログ)
サービス企画をする人のための「セマンティック WEB 」講座 - livedoor ディレクター Blog(ブログ)