このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

HOMEへ
> 無料ブログでアフィリエイト日記 > WEBデザイン・CSS > Webブラウザのデフォルトスタイルをリセットする - ユニバーサルセレクタの使用又は要素ごとに指定する方法

WEBデザイン・CSS

Webブラウザのデフォルトスタイルをリセットする - ユニバーサルセレクタの使用又は要素ごとに指定する方法

2009年 7月 1日(水) 更新

h1h2などの見出しタグ、<ul><ol>などのリストに関するタグは、CSSでスタイルを指定しない場合、Webブラウザのデフォルトのスタイルが適用されるようになっています。

デフォルトスタイルの代表的なものしかし、Web制作者にとってこのデフォルトスタイルは、そのまま使うようなシロモノでは無く、各要素にはオリジナルのスタイルを記述しているのが現状です。

理由は単純に見栄えが良くないからです。(だと思います。)

右の画像は各見出し要素と、順序なしリスト<ul>、順序有りのリスト<ol>、そして段落<p>がデフォルトで持っている表示設定を反映させたものです。

画面上がソースコード、下がブラウザで見た時の状態です。

各見出しに関しては太字だったり、リストに関しては、「・」が付いたり、数字の「1」が付いたりと、これらは全てデフォルトスタイルが反映させている状態です。

<ul>や<ol>は、サイトのメニュー(コンテンツ一覧)に頻繁に使用されるので、デフォルトの状態では非常にお粗末だと思います。

メニューはクリックされてこそなので、ボタンに見せた画像等を使用して見栄えを調整したい所です。

更に、このデフォルトスタイルは、各Webブラウザ間によって表示が異なるため、この一事をもってしても、最終的には邪魔な存在になってきます。

そこで、これらのデフォルトスタイルは、外部CSSを作成&リンクした時点でリセットしておくのが賢明です。方法ですが、以下に2つ紹介しておきます。

ユニバーサルセレクタを使用してリセットする

ユニバーサルセレクタ(全称セレクタ)とは、全ての要素に対して適用させる事ができるセレクタです。*(アスタリスク)で示されます。

この場合、各要素ごとにわざわざ指定する必要はなく、一度に全て指定できるので便利です。ユニバーサルセレクタを使用して全要素をリセットする記述例として以下をサンプルに公開しておきます。

* {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
font-size:100%;
text-decoration:none;

}

marginとかその他、好きなように改変してみて下さい。実際にこのCSSソースを記述して、先ほどのHTMLページに適用させたのが右の画像になります。

ユニバーサルセレクタ使用時余白や段落、文字の大きさ、太さ、見出しの先頭につく点や数字が全てリセットされているのが分かります。

しかし、ユニバーサルセレクタを使用すると、文字通り全ての要素をリセットするため、一部デフォルトでも使える「サブミットボタン」などもリセットしてしまうため、場合によっては弊害が発生します。

また、ユニバーサルセレクタを使用すると「読み込みが遅くなる」という噂がありますが、検証しているサイトを発見しました。

どれどれ?と読ませて頂きましたが、結果は『逆に早かった』などとありますので、気にしなくて大丈夫そうです。

とにかく、最近の傾向としては上記の理由などからユニバーサルセレクタは敬遠されているようです。

ゼミ長もユニバーサルセレクタは使用していません。

要素ごとにリセットする

要素ごとにリセットする方法が、最近の傾向でMovable Typeにおいてもこの方法が取られています。

最初は手間が掛かりますが、「reset.css」などとして一度作成してしまえば、@import規則を使い、どのサイトでも利用できるようになるので、サイトの複数運営を視野に入れている場合は大変効率が良いです。是非活用しましょう。(@importについてはコチラを参照して下さい。

ついでなので以下に、主要要素をリセットするためのCSSソースのサンプルを紹介しておきます。これは、Movable Typeのデフォルトにある「blog.css」の中にある記述にちょっと付け足しただけです。

}
html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
font-size:100%;
text-decoration:none;

}

marginとかその他、好きなように改変してみて下さい。

この記事へコメントする






この記事へのトラックバック

トラックバックURL : http://business-affiliate.net/mt/mt-tb.cgi/119