WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ローカル環境でWordPressを扱う方法、Instant WordPressの導入
HOME
次の記事:サイトのコンテンツが足りずフッターが浮き上がってしまう問題の対処法(JavaScript編)

リセットCSSとノーマライズCSSについて

Web知識|WordPress

 

ブラウザによって特定要素の表示が異なる

 

<h1>リセットCSSとノーマライズCSSについて</h1>

例えば、記事の見出しをh1要素でマークアップした時、CSSでフォントサイズや余白などをh1要素に定めていない場合、ブラウザがデフォルトで用意している値をh1要素のCSSとして適用します。これはh1要素に限らず、主要な要素にはほとんどブラウザ側でCSSのデフォルト設定が用意されています。

また、ブラウザによってその設定値は異なります。つまり、あらゆるブラウザで同じようにWebサイトを表示したい場合、全ての要素にCSSの初期値を定める必要があります。さすがにそれをするのは時間も手間も掛かるので、この問題についてはリセットCSSノーマライズCSSといった手法を用いて解消します。

 

 

リセットCSS(前期)

 

* {
 margin: 0;
 padding: 0;
}

CSSにおけるアスタリスク(*)は全称セレクタといい、全ての要素を対象にします。この全称セレクタを利用して、ブラウザが各要素に設定している値をまさに一度全てリセットする手法がリセットCSSです。

しかし、全ての要素をリセットするという事は、使われる可能性のある全ての要素の値を自分で設定しなければなりません。この方法は強引過ぎるという事で、他のリセットCSSのやり方が模索されました。

 

 

リセットCSS(後期)

 

全称セレクタを使わずに、各要素に初期値を定める手法です。この説明だけでは、結局全ての要素に値を定めなければいけないという話になりますが、有志によるリセットCSSのテンプレート文章が公開され、それを用いる事でWebデザイナーの負担は一気に軽くなりました。

リセットCSSのテンプレート適用後、必要に応じて個々の要素に自分で値を設定していきます。

 

 

ノーマライズCSS

 

リセットCSSとノーマライズCSSは全くの別物と紹介しているサイトがありますが、考え方としては後期のリセットCSSと同じ話です。ブラウザ間で表示の差異が出ないよう、各要素の値が設定されたテンプレートをCSSに組み込みます。

リセットCSS(後期)との違いは、リセットCSSは一度値をリセットした後そこから修正を加えるのに対して、ノーマライズCSSは各ブラウザが定めた要素の初期値を補正するという考え方で成り立っている点です。機械的には後者の方がスマートなCSSとなります。

現在ではWebサイトをデザインする際、リセットCSSではなくノーマライズCSSを適用する方がベターです。

 

ノーマライズCSSのダウンロード

ノーマライズCSS

http://necolas.github.io/normalize.css/

こちらのサイトで最新版のノーマライズCSSがダウンロード出来ます。上記サイトのノーマライズCSSは、Twitterをはじめ他の大手Webサイトでも用いられているので実用性は保証します。

 

|

0件のコメント

コメント

カテゴリ

月別アーカイブ