リセットCSSについて「CSS実践編：CSSの基本step.9」

前回は、リスト関連のCSSにつきましてご説明いたしました。

ぜひとも積極的に使用してほしいliやolタグ、覚えておくと便利なスタイルを
前回ご紹介いたしましたが、ここで一点注意がございます…。

何でもかんでもliタグでリストを記載してあるページを
良くみかけることがございますが、正確なマークアップを
意識して心がけると、本来はdl,ddタグなんじゃないの？
なぁ～んて事も、多々ございます。

HTMLタグがもつ意味合いをよく考えて、
正しいマークアップをおこなうことが、
完成度の高いページ作成への近道のように思います…。

それでは今回はッ、

上記について、記載していきます…。

デザイナーさんから頂いた、もしくは自分でデザインをおこなった、
ワイヤーフレームをもとに、HTML、CSSでデザインをおこなう際、
ブラウザごとに「見え方が異なる！」

コレを解消するために、初めに指定しておきたいのがデフォルトスタイルのリセット。
そこでリセットCSSを使用するわけですが、以前、
リセットCSSを1つのCSSとせず、まとめてしまうと記載いたしました。
今回は具体的なソースコードを記載しますので、参考になればと思います。

また、すべてのスタイルをゼロにする必要が
必ずしもある訳ではございません…。

ここ数年、柔軟性の高いスタイリング手法も注目されています。

ウェブを閲覧する際に使用するブラウザには、色々なブラウザがございます。
IE(Internet Explorer),Google Chrome,Firefox,Microsoft Edge,Safari、etc…。

これらのブラウザがもつ、デフォルトのスタイル。

たとえばh1タグで記載した見出しは、大きな文字で表示しますが、
実はブラウザごとに多少大きさが異なります。

これは、他のタグについても同様で、pタグにはpaddingが初めから記載されていたり
li要素には先頭にブレット「●」が表示されたりと、
ブラウザにより多少異なる、デフォルトのスタイルが指定されています。

ワイヤーフレームのデザインをもとに、オリジナルのスタイルをCSSで記載しようとすると、
この各ブラウザがもつデフォルトのスタイルが、邪魔をすることが多々ございます。

そこで各ブラウザがもつデフォルトのスタイルが原因で起こる
スタイルの意図しない表示を避ける為、あらかじめデフォルトのスタイルを
無効にしてしまうスタイルがリセットスタイルになります。

スタイルをリセットする方法は、色々とございますが、
以前ご紹介したように、自分なりにリセットCSSを作成するのもアリです。

また、その際はサイトのスタイルを指定するCSSの上部に
まとめて記載してしまいましょう。

たびたび記載するのはめんどうだから、別シートで保存しておきたいと
思われるかもしれませんが、以前もご説明したとおり、
サイトの表示速度に影響してきますので、
極力少ないシートに、まとめて記載することをおすすめします。

今回はYUIで配布されているリセットスタイルのご紹介！

では実際にスタイルシートを見てみますとッ、

<style>
html {
	color:#000;
	background:#FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0
}
table {
	border-collapse:collapse;
	border-spacing:0
}
fieldset, img {
	border:0
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal
}
ol, ul {
	list-style:none
}
caption, th {
	text-align:left
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal
}
q:before, q:after {
	content:''
}
abbr, acronym {
	border:0;
	font-variant:normal
}
sup {
	vertical-align:text-top
}
sub {
	vertical-align:text-bottom
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
*font-size:100%
}
legend {
	color:#000
}
#yui3-css-stamp.cssreset {
	display:none
}
</style>

比較的シンプルですねッ…、たったコレだけのコードですので、
ぜひとも下記のよう、圧縮して使用することをおすすめします…。

<style>
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
</style>

Normalize.cssとは、

どのブラウザーでアクセスしても、表示が変わってしまわないように、各々のブラウザーに適用されているデフォルトのスタイルを平均化するために読み込ませるCSSです。
reset.cssも同様の目的でよく使われますが、違いとしては、normalize.cssは「有用なデフォルトのスタイルはそのままにしている」というところです。その分軽量で、多くのフレームワークに利用されています。

実は私もこの考えに賛成です…。

すべてのブラウザの癖を理解しているわけではありませんし、
上記で紹介したリセットCSSでも良いのですが、一つづつ確認するのはめんどうです。

そこでッ、Normalize.css使用となる訳です。

まッどちらを使用してページ作成をおこなって頂いても、
特に問題はございませんが、私が確認を行う際気を付けている点は、

ページ作成の途中でのスタイル！！

Google Chromeで疑似的に確認も行っておりますが、
実機でも確認をおこなっております…。

iphone,ipad,Android,Pcといった具合になります。

ipadとAndroidはシム無しの格安のものをWi-Fiで使用し確認をおこなっております。

今回は、リセットCSSについて記載してみました。

ページ作成を頻繁に行うようになると、スタイル方法も
人それぞれ癖の様なものがございます。

その書きなれたCSSにあった、リセットスタイルが良いように思います。
ぜひ、ご自分でいろいろ試して頂くことをおすすめします。

リセットCSSを記載する上でのポイントは、極力短く！！

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。