いま求められるCSSデザインを考えてDreamweaver CS3を活用する
Content
作成日
7 February 2008
ページ ツール |
必要条件
ユーザーレベル
中級
必要な製品
- Dreamweaver CS3 (Download trial)
この記事では、リセットスタイルやセッティング、CSSハックなどの手法をご紹介し、Adobe® Dreamweaver® CS3をつかったWebサイト制作に活かす方法を解説します。
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および疑似クラスセレクタ）］をクリックします。［セレクタ］に半角カンマ区切りでリセットしたい要素を複数書きます。
このように、たくさんの要素を列挙することになりますので、［コードビュー］のほうがやりやすいかもしれません。
@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用
・Internet Explorer 6以前用
・Safari 3用
・Safari 2用
Opera 9用
Firefoxは基準ブラウザ（作業のベースとするブラウザ）として利用することが多く、CSSハックでの調整作業は必要のないケースが一般的といってよいでしょう。
なお、Internet Explorer系の実装不備をカバーするJavaScriptライブラリ「IE7.js」の登場が話題になっています。いまのところ、セレクタやプロパティのバグフィックスにはつかえそうですが、レイアウトのズレや崩れを瞬時に解決してくれる効果はないようです。今後の展開に期待、といったところでしょうか。
まとめ
CSSデザインは、2007年でかなり「高み」に達したといえます。フォントサイズ変更にあわせてコンテンツ全体の幅と高さを伸縮させる「エラスティックレイアウト」、モバイル、テレビ、プリンタなどでのデザインを最適化する「マルチデバイスCSS」、CSSにうまく「JavaScriptライブラリ」を組み合わせてリッチなインタラクションを志向するなど、新たな手法が一般化しつつあります。
「CSSによってユーザー体験（ユーザーエクスペリエンス）をさらに向上させる」という意識をもつことが、いっそう大切になるでしょう。さまざまな新しいテクニックにチャレンジしつつも、ユーザーとクライアントに対して「より価値の高いWebサイトを提供する」という視点を忘れないようにしましょう。
