Dreamweaver記事

いま求められるCSSデザインを考えてDreamweaver CS3を活用する

この記事では、リセットスタイルやセッティング、CSSハックなどの手法をご紹介し、Adobe® Dreamweaver® CS3をつかったWebサイト制作に活かす方法を解説します。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

• 体験版
• 購入

CSS2.1プラスアルファの時代に

Webクリエイターにとって、「CSS」イコール「CSS2.1」というのが当たり前になってしばらくたちます。W3Cから2007年10月に公開された草案「CSS Snapshot 2007」でも、「CSSといえばCSS2.1を意味する」と明確に述べられています。

W3C草案「CSS Snapshot 2007」

しかし、それだけはなく、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」といったファイル名で保存しておき、その他のスタイルと区別しておくのが一般的です（このことを「コンポーネント化」といいます）。

ページ 1 / 3

次のページ

著者について