CodeZine(コードジン)

特集ページ一覧

ブラウザのデフォルトスタイルをリセットする

クロスブラウザなレイアウトデザインテクニック 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/10/03 14:00

目次

ブラウザのデフォルトスタイルをリセットする

 ここまで、body要素のマージンだけを取り上げましたが、当然のことながら、デフォルトスタイルの違いはマージンだけに限ったものではありません。例えば、

  • 各ブラウザ、バージョンにより、フォントスタイル(font-family、font-sizeなど)の設定が異なる
  • 各ブラウザ、バージョンにより、li要素の配置を制御する方法がpaddingであったり、marginだったりと異なる
  • IEやFirefoxなどでは、body要素の余白についてmarginで制御するのに対し、Operaの以前のバージョン(バージョン8.54以下)では、paddingで制御する

 というような違いが挙げられます。このような差異は、クロスブラウザな表示を目指す上で、とてもやっかいです。

 そこで、あらかじめ制作者スタイルでデフォルトスタイルをリセットしておくという方法があります。これを「リセットCSS」や「リセットスタイル」と言います。

 最初にブラウザのデフォルトスタイルをリセットし、ブラウザ間の差異をフラットな状態にしておけば、レイアウトしやすくなるというわけです。

 リセット方法としては、ユニバーサルセレクタを使用する方法と、タイプ別セレクタを使用する方法が主な手法となっています。かつては、ユニバーサルセレクタを使用する方法が一般的でしたが、後述するようなデメリットもあり、現在では、タイプ別セレクタを使用する方法が主流となりつつあります。

ユニバーサルセレクタによるデフォルトスタイルのリセット

 ユニバーサルセレクタ(*)を使用するリセット方法は、外部スタイルシートの最初に、次のような内容を指定し、まず全要素のデフォルトスタイルを一括してリセットしておいて、後から制作者がスタイルを再定義しなおすという方法です。

ユニバーサルセレクタによるリセットCSSの記述例
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
}

 どのプロパティを含めるかについて決まりはありませんが、特にブロックレベル要素の余白を統一しておいた方がスタイルを作りこみやすいため、最低限、marginやpaddingプロパティの値を0に設定しておくのが一般的です。そのサイトのデザイン上、重要だと思われるプロパティを指定すると良いでしょう。

 さて、この方法は、全要素を一括してリセットすることができるため、簡単で手っ取り早くリセットできるという魅力がありますが、次のような問題もあります。

  1. リセットCSSにて全要素のデフォルトスタイルを一旦リセットした上で、各要素に対し新たにデザイン用のスタイルを再定義する必要があるため、ソースが長くなり、管理がやや面倒になる
  2. form関連やdel要素の打ち消し線など、慣習的に利用されてきたデフォルトのスタイルまでリセットしてしまう
  3. ブラウザへの処理負荷がかかる

 例えば、form関連の要素に、ユニバーサルセレクタによるリセットスタイルが適用されると、次の画像のような影響が出ることが考えられます。

formまわりのデフォルトスタイル
formまわりのデフォルトスタイル
formまわりのデフォルトスタイルをリセット
formまわりのデフォルトスタイルをリセット

 form関連のデフォルトスタイルは、既にユーザーが慣れているスタイルです。これをリセットしてしまうと、ユーザーがformであることに気が付かないという恐れがあります。この場合、「リセットCSSでデフォルトスタイルをリセットする⇒デザイン用のCSSファイルでもう一度デフォルトスタイルを定義し直す」という対策を取る必要があり、二度手間となるわけです。デフォルトスタイルで良かったものを、わざわざリセットしたうえで、再定義するわけですから、無駄なソースが増え、処理も遅くなります。

要素ごとにブラウザのデフォルトスタイルをリセットする

 というわけで、必要な要素ごとにリセットするという手法が現在の主流となっています。

要素ごとのリセットスタイルの記述例
html, body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset, input, textarea{
  margin: 0;
  padding: 0;
}
img, fieldset{
  border: none;
}

 どの要素、プロパティを指定するかについて決まりはありませんが、そのサイトで使用するブロックレベル要素を列挙し、最低限、marginとpaddingを0に設定しておくのが一般的です。その他は、必要に応じて指定すると良いでしょう。要素ごとにスタイルをリセットしていくのは手間がかかりますが、一度作ってしまえば使い回しできるので便利です。

 なお、リセットCSSは1つのファイルにまとめ、他の外部スタイルシートとは区別してコンポーネント化しておけば、必要に応じて追記したり削ったりすることができ、管理しやすくなります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5