SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。今回は、このブラウザのデフォルトスタイルについて解説し、これを初期化して、各ブラウザのデフォルトスタイルの差異を埋める方法を紹介します。 

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。

 各ブラウザには標準で実装されているスタイルシートがあるのをご存知でしょうか? これを「ブラウザのデフォルトスタイル」と言いますが、CSSを利用してクロスブラウザなデザインを目指すとき、まずはこのデフォルトスタイルを初期化しておいたうえで、スタイルを作りこむ、という手順を踏むのが一般的です。そうすることで、各ブラウザのデフォルトスタイルの差異を気にすることなく、スタイルを作りこむ作業に専念することができるからです。また、初期化ファイルを別ファイルにコンポーネント化しておくことで管理しやすくなります。

 連載第3回目となる今回は、このブラウザのデフォルトスタイルについて解説し、これを初期化して、各ブラウザのデフォルトスタイルの差異を埋める方法を紹介します。この下ごしらえの手順を踏んだうえで、次回以降、スタイルを作りこむ際のテクニックとして、保守性を念頭においたCSSの書き方を紹介していきます。

対象読者

  • XHTMLとCSSの基本を理解している方。
  • Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。

必要な環境

 クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefoxと、ユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説していますが、できるだけ多くの種類/バージョンのブラウザで表示確認をするのが望ましいでしょう。

ブラウザのデフォルトスタイルとは

 XHTML文書に適用されるスタイルには、Webページの制作者が用意する「制作者スタイル」、Webページを閲覧するユーザーが利用する「ユーザースタイル」、そして、Webブラウザが標準で実装している「ブラウザのデフォルトスタイル」の3つのスタイルがあります。優先順位は、通常、下記の番号順になります(1が最優先)。

  1. 制作者スタイル
  2. ユーザースタイル
  3. ブラウザのデフォルトスタイル

 制作者スタイルやユーザースタイルが指定されていない要素には、当然、ブラウザのデフォルトスタイルが適用されるわけですが、困ったことに、ブラウザのデフォルトスタイルはそれぞれのブラウザによって異なり、全ブラウザで共通というわけではありません。

優先順位の補足説明

 CSSにはユーザースタイルを優先するというルールがあり、CSS2では「!important」宣言を使用した場合、優先順位が「!important宣言つきユーザースタイル>!important宣言つき制作者スタイル>制作者スタイル>ユーザースタイル>ブラウザスタイル」というように変化します。

ブラウザの種類によるデフォルトスタイルの違い

 ブラウザのデフォルトスタイルの違い見るために、例として、IEとFirefoxのデフォルトスタイルのうち、body要素のマージンを比較してみましょう。body要素のマージンは、初心者の方がつまづきやすいポイントでもあります。「あれ? なぜこんなところに余白が!? こっちでは大丈夫なのに、こっちのブラウザでは間があいてる!」というような状態に陥るのは、ブラウザのデフォルトスタイルが原因だということも少なくありません。

XHTMLのソース
<body>
  <p>あいうえお</p>
</body>

 ここではbody要素のマージンのみ表示結果を得たいのですが、このままではp要素にもデフォルトスタイルが適用されてしまいます。CSS側で、p要素のマージンを0とし、p要素のデフォルトスタイルをリセットしておきましょう。

CSSのソース
body {
  padding: 0;
}
p {
  margin: 0;
  background-color: #000;
  color: #fff;
}

 IE6とFirefox2(共に標準モード)の表示結果は次のようになります。

body要素のmargin比較
body要素のmargin比較

 それぞれのキャプチャ画像の左上の余白に注目してください。赤文字の部分は、画像処理ソフトで実際のピクセル数を計ったものです。IEでは、上マージンが15px、左マージンが10pxであるのに対し、Firefoxでは上マージン、左マージン共に8pxとなっています。IEとFirefoxではbody要素のデフォルトスタイルのmarginの値が違うのです(ちなみに、IEを除くほとんどのブラウザはFirefoxと同じ8pxです)。

表示モードによるブラウザスタイルの違い

 また、同じブラウザの同じバージョンであっても、表示モードの違いによって、ブラウザスタイルの適用方法や解釈が異なる場合もあります。

 例えば、IEの標準モードと互換モードでは、body要素の最初の内包要素に上マージンがある場合、表示結果が異なってきます。さきほどの例を使用し、p要素の上マージンを20pxに設定して表示結果を比べてみましょう。

CSSのソース
body {
  padding: 0;
}
p {
  margin-top: 20px;
  background-color: #000;
  color: #fff;
}

 表示結果は次のようになります。

marginの相殺の比較:(左)IE標準モード、(中)IE互換モード、(右)Firefox標準モード
marginの相殺の比較:(左)IE標準モード、(中)IE互換モード、(右)Firefox標準モード

 CSSの仕様上では、上下マージンは重なり合うと解釈され、いずれも正の値の場合、大きい方の値がマージンとして設定されることになっています。つまり、この例の場合は、20pxのマージンが設定されるのが正しいのですが、IE標準モードはマージンの相殺が行われず、「body要素のデフォルトの上マージン15px」と「p要素の上マージン20px」が合算された35pxがマージンとして設定されています。IEの標準モードではなく、IE互換モード(とFirefox)の解釈が正しいのです。

上下マージンの相殺についての補足

 要素間の上下マージンの相殺は、

  • いずれも正の値の場合、大きい方の値をマージンとして設定
  • 正の値と負の値の場合、足し引きした値をマージンとして設定
  • いずれも負の値の場合、小さい方の値をマージンとして設定

 というルールで決定されます。

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザなレイアウトデザインテクニック連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3018 2009/06/22 18:38

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング