--.--.--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2007.10.04(Thu)

各ブラウザは、htmlのタグ毎にデフォルトで適用するスタイルをそれぞれ独自にもっています。<h1>で囲んだ要素を、違うブラウザで表示してみると文字の大きさが違ったりするのは、ブラウザ毎にもっている<h1>のスタイルが異なるからです。

CSSを使ってブラウザ毎のデフォルトの違いを吸収するためには、CSSの最初の部分でデフォルトのスタイルをリセットする方法がよく使われます。リセットの具体的な方法はコレ

リセットのやり方は2通りあります。

CSSのユニバーサルセレクタを使ってリセットする

ユニバーサルセレクタとはCSSの全てのプロパティに対して適用できるセレクタのことです。セレクタに*を書くとユニバーサルセレクタになり、一度に全ての要素に対して指定できます。

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

このCSSを適用すると、全てのセレクタのプロパティがリセットされるためテキストエディタで表示したようになります。一括指定ができて便利なユニバーサルセレクタですが、意図しないスタイルまでリセットしてしまうことや、新しいプロパティに対応とできないなどの問題があるため最近では要素ごとにスタイルをリセットする方法が主流のようです。

CSSの要素ごとにリセットする

要素ごとにスタイルをリセットしていくのは手間がかかりますが、一度作ってしまえば使い回しできるのでたいした手間にはなりません。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td{
    margin: 0; 
    padding: 0;
}
html{
    overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6{
    font-size: 100%; 
    font-weight: normal;
}
ol, ul{
    list-style:none;
}
fieldset, img{
     border:0;
}
table{
    border-collapse: collapse; 
    border-spacing:0;
}
caption, th{
    text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var{
    font-style: normal; 
    font-weight: normal;
}

CSSファイルを読み込んで再利用する

上の「CSSの要素ごとにリセットする」で作ったCSSを[reset.css]という名前で保存します。それとは別にサイトに適用したいcssを[base.css]という名前で保存します。

さらに[import.css]というファイルを作ります。import.cssの中身は先ほど作った[reset.css]と[base.css]を読み込むだけです

import.cssのソース

@charset "utf-8";

/* デフォルトスタイルクリア */
@import "reset.css";

/* スタイル適用 */
@import "base.css"

と記述しておき、CSSを適用したいhtmlファイルのヘッダ部分で

<link rel="stylesheet" href="import.css" type="text/css" media="all">

とします。するとimport.cssから、reset.cssとbase.cssが読み込まれ適用されます。

要素ごとにリセットするCSSの参考サイト

スポンサーサイト

[タグ]
css HowTo

[関連エントリー]
Comment
このコメントは管理人のみ閲覧できます
() 2009/04/14 Tue 09:21 [ Edit ]












管理者にだけ表示を許可する

TrackBack
  1. 無料アクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。