Dreamweaver記事
いま求められるCSSデザインを考えてDreamweaver CS3を活用する
益子貴寛（Takahiro Mashiko）
株式会社サイバーガーデン
この記事では、リセットスタイルやセッティング、CSSハックなどの手法をご紹介し、Adobe® Dreamweaver® CS3をつかったWebサイト制作に活かす方法を解説します。
必要ソフトウェア
この記事では、以下のソフトウェアを使用しています。
Dreamweaver CS3
CSS2.1プラスアルファの時代に
Webクリエイターにとって、「CSS」イコール「CSS2.1」というのが当たり前になってしばらくたちます。W3Cから2007年10月に公開された草案「CSS Snapshot 2007」でも、「CSSといえばCSS2.1を意味する」と明確に述べられています。
しかし、それだけはなく、CSSのさらなる広がりを示唆しているのが印象的です。この仕様が勧告候補（Candidate Recommendation）になる段階には、CSSは次の内容で構成されるとしています。
- CSS2.1（Errataを含む）
- Selectors Level 3
- CSS Namespaces
- CSS Color Level 3
つまり、Webクリエイターは、CSS2.1だけでなくCSS3の一部についても理解が求められる、ということです。いくつかのモダンブラウザも、すでに「Selectors Level 3」や「CSS Color Level 3」を先行実装しており、今後ますます拡充させていくでしょう。
ちなみに、この仕様のURLは「css-beijing」となっていますが、私は由来をよく知りません。まさか、今年8月に開催される北京オリンピックまでに完成させる（「beijing」は日本語で「北京」）、という意味ではありませんよね。
CSSの地ならし「リセットスタイル」の設定
ブラウザごとのデフォルトスタイルが微妙に異なるため、Webクリエイターの多くがクロスブラウザ表示（すべてのターゲットブラウザで同一の表示を確保すること）に少なからず悩んでいるはずです。このような違いを「ならす」ためのCSSを「リセットスタイル」や「リセットCSS」と呼び、現在では当たり前のように利用されています。
もっとも簡単な方法として知られているのは、ユニバーサルセレクタ（「*」マーク）を利用してすべての要素のスタイルをリセットする方式ですが、現在では「要素列挙方式」を利用しましょう、という流れになっています。なぜなら、一部のブラウザでフォームパーツが崩れたり、ブラウザのデフォルトスタイルのよい部分をすべて失ってしまったり、ブラウザへの処理負荷がかかるといった理由からです。
Dreamweaver CS3での設定方法を説明します。［新規CSSルール］ダイアログボックスを開き、［詳細設定（IDおよび疑似クラスセレクタ）］をクリックします。［セレクタ］に半角カンマ区切りでリセットしたい要素を複数書きます。
［新規CSSルール］ダイアログボックスを開いて、 ［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 ［セレクタ］には、「html, body, div, h1, h2, h3..」を入力する。
このように、たくさんの要素を列挙することになりますので、［コードビュー］のほうがやりやすいかもしれません。
@charset "UTF-8";
/* reset styles */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
margin: 0;
padding: 0;
}
要素列挙方式によるリセットスタイルでは、どの要素を指定しておくべきかが決まっているわけではなく、制作するサイトによって柔軟に変えて構いません。通常は、構造のための要素とブロックレベル要素のマージンと余白をカットしておき、その他のプロパティは必要であれば指定します。また、インライン要素についても、やはり必要であればリセットしておくと覚えておきましょう。
リセットスタイルは、「reset.css」といったファイル名で保存しておき、その他のスタイルと区別しておくのが一般的です（このことを「コンポーネント化」といいます）。
日本語フォント名の「英・和」指定
font-familyプロパティで、日本語フォント名を「英・和」指定するのも、最近よく見られる傾向です。たとえば「ヒラギノ角ゴ Pro W3」というフォントは、日本語名だけでなく「Hiragino Kaku Gothic Pro W3」という英語名もあわせて指定しておくのです。
@charset "UTF-8";
/* reset styles */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
margin: 0;
padding: 0;
color: #222222;
font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
さらに、クロスブラウザ表示を実現するうえで、「フォントの種類」や「フォントサイズ」がかなり曲者ですので、セッティング方法を覚えておくと便利です。
まず、フォントの種類について、Windows版 Internet Explorer 6と7は、フォールバックメカニズムがうまくきかない、という問題があります。複数の種類を指定した場合、先に書かれているものから優先的に適用し、もし指定されたフォントがパソコンになければ、あとに書かれているものを適用してくれる、というしくみが「フォールバック」です。
たとえば「ヒラギノ角ゴ Pro W3」「メイリオ」「МＳ Ｐゴシック」の順で書かれている場合、「ヒラギノ角ゴ Pro W3」がなければ「メイリオ」を、「メイリオ」もなければ「ＭＳ Ｐゴシック」が適用されるはずです。しかし、Windows版 Internet Explorer 6と7は、「ヒラギノ角ゴ Pro W3」がなければブラウザのデフォルトフォントである「МＳ Ｐゴシック」を適用してしまい、「メイリオ」を適用してくれないのです。
したがって、現在のところ、Windows版 Internet Explorer 6と7で「メイリオ」を最優先で適用するには、一番はじめに指定しておかなければならないのです。
@charset "UTF-8";
/* reset styles */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
margin: 0;
padding: 0;
color: #222222;
font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
次に、フォントサイズについて、ほとんどのブラウザのデフォルトは「16px」ですが、Mac OS版 Firefoxは「14px」となっています。Mac OS版 Firefoxでも「16px」で表示させるには、単位に固定値を利用するのが確実です。
ここで「アクセシビリティ的にどうか」と考えた人もいるでしょう。しかし、モダンブラウザのほとんどは、単位に固定値がつかわれていても、「可変」または「ズーム」できるのでまったく問題ありません。問題になるのは、Internet Explorer 6以前だけなのです。
したがって、すべてのブラウザに対して、body要素に「16px」を適用しておき、Internet Explorer 6以前では「medium」「1.0em」「100%」といった相対値が適用されるようにCSSハック（スターhtmlハック）で調整しておけばよいのです。
@charset "UTF-8";
/* For body element */
body {
font-size: 16px;
}
* html body {
font-size: medium; /* IE 6 or sooner */
}
ブラウザの動向とCSSハック
2008年には、ざっとあげるだけでも次のようなブラウザ動向が予想されます。
- Netscapeの開発・サポート終了（2月1日→3月1日まで延長）
- Internet Explorer 7日本語版の自動更新配布（2月13日）
- Internet Explorer 8のリリース
- Safari 3 Windows版の正式リリース（現在、パブリックベータ版）
- Firefox 3のリリース
- Opera 9.5 / 10のリリース
これまでのCSSハックの知識とともに、これら新バージョンへの対応も考えておかなければなりません。一部には「ブラウザのCSSサポートがいっそう進むことで、CSSハックは不要になる」という声もありますが、そこまで楽観視はできないでしょう。
というのも、たとえばボーダー幅「thin」「medium」「thick」という値について、それぞれどのぐらいの太さにするかはブラウザに任されています。これはほんの一例であって、このようなブラウザ任せの部分はけっこう存在します。つまり、CSSのサポート不足という「実装不備」は少なくなってきているとしても、「実装差異」は将来にわたってずっと残りつづけるのです。
現在、よく利用されるCSSハックを、ブラウザのバージョン別にあげてみましょう。クロスブラウザ表示の一助にしてください。それぞれ「#header」を対象にしています。
・Internet Explorer 7用
［新規CSSルール］ダイアログボックスを開いて、 ［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 ［セレクタ］には、「*:first-child+html #header」を入力する。
・Internet Explorer 6以前用
［新規CSSルール］ダイアログボックスを開いて、 ［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 ［セレクタ］には、「* html #header」を入力する。
・Safari 3用
［新規CSSルール］ダイアログボックスを開いて、 ［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 ［セレクタ］には、「body:first-of-type #header」を入力する。
・Safari 2用
［新規CSSルール］ダイアログボックスを開いて、 ［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 ［セレクタ］には、「html[xmlns*=""] body:last-child #header」を入力する。
Opera 9用
［新規CSSルール］ダイアログボックスを開いて、 ［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 ［セレクタ］には、「;;body #header」を入力する。
Firefoxは基準ブラウザ（作業のベースとするブラウザ）として利用することが多く、CSSハックでの調整作業は必要のないケースが一般的といってよいでしょう。
なお、Internet Explorer系の実装不備をカバーするJavaScriptライブラリ「IE7.js」の登場が話題になっています。いまのところ、セレクタやプロパティのバグフィックスにはつかえそうですが、レイアウトのズレや崩れを瞬時に解決してくれる効果はないようです。今後の展開に期待、といったところでしょうか。
まとめ
CSSデザインは、2007年でかなり「高み」に達したといえます。フォントサイズ変更にあわせてコンテンツ全体の幅と高さを伸縮させる「エラスティックレイアウト」、モバイル、テレビ、プリンタなどでのデザインを最適化する「マルチデバイスCSS」、CSSにうまく「JavaScriptライブラリ」を組み合わせてリッチなインタラクションを志向するなど、新たな手法が一般化しつつあります。
「CSSによってユーザー体験（ユーザーエクスペリエンス）をさらに向上させる」という意識をもつことが、いっそう大切になるでしょう。さまざまな新しいテクニックにチャレンジしつつも、ユーザーとクライアントに対して「より価値の高いWebサイトを提供する」という視点を忘れないようにしましょう。
著者について
益子貴寛（Takahiro Mashiko）
Webサイトのプロデュースや戦略立案、制作業務、コンサルティング、Webクリエイター向けの講義やトレーニング、執筆活動に従事。社団法人 全日本能率連盟登録資格「Web検定」プロジェクトメンバー。
著書に『Web標準の教科書』（秀和システム）、『スタイルシート・デザイン』（共著、MdN）、『変革期のウェブ』（共著、マイコミ新書）など。
