2月 062014
 

以前、HTML や CSS を勉強している時に、同じウェブサイトを閲覧する時に Internet Explorer と FireFox とでは見え方が違うと知った時の驚きは表現できないほどでした。インストールの仕方が間違っているのかと一生懸命ブラウザの不具合を調べていました・・・

今や常識なんでしょうか・・・「ブラウザ間で実装しているスタイルが違うので違ってみえて当たり前」ってこと。

そこで、この「違ったスタイル」ってやつをリセットするのがウェブ制作者にとっては常識になっているらしいのです。「HTML初心者が知っておくべきリセットCSS と3つのポイント | 3streamer blog」がそれを明確に説明してくれています。ちょっと引用しておきましょうね。

HTMLとCSSを学び始めた人がまず覚えなければいけない大事な事は「ブラウザごとにデフォルトのCSSは異なる」ということです。(デフォルトのCSSとは初期状態で適用されているCSSのこと)

そこで登場するのが「リセット CSS」というものらしい。以下、更に引用文を掲載します。

HTMLとCSSでコーディングを始める最初の段階で各ブラウザが持っているデフォルトのCSSを一度リセットしてしまおうというのがいわゆる「reset.css」と呼ばれるものです。これは上書きができるcssの特性を利用した方法です。一度リセットして、まっさらな状態からCSSを書き始めればブラウザ間のスタイルの差異に頭を悩ませたり、余計なハックを使う必要も少なくなります。CSSリセットする場合は必ず一番最初にリセットの設定を書いて下さい。何故ならば「CSSは上書きができる」ので、同じ設定であれば後から書かれたものが優先されるからです。

いろいろとリセットの仕方があるようですが、ここでは「YUI3を使ったリセット方法」にします。理解し易いし、どうやらグローバル標準のようだし。「Yahoo! User Interface Library (YUI)」「cssreset-min.css」を適用しましょう。

以下にコードを表示しておきましょう。

/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.  http://yuilibrary.com/license/
*/

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;
	}

上記のコードをダウンロードして利用しても良いし、HTML のヘッダー部分に以下のコードを加えてもよさそうです。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">

なるほど!どうやら上記を参考に自分流のリセット方法を習得するのが良さそうですが、私個人はあくまでも「趣味」の領域ですから、本投稿記事程度知識で十分でしょう。

ただ、「YUI 3: CSS Resetの問題 – Weblog – Hail2u.net」というのもあるようですので、「リセット CSS」の後のオリジナル CSS には、以下を加えるのが良いそうです。

html {
  background-color: transparent;
  background-image: none;
}

これで万全ということではないでしょうけど、それでもこれまでに比べれば、安心感は倍増すると思いますが・・・


 返信する

(必須)

(必須:アドレスは公開されることはありません)