[CSS] ブラウザ毎にずれないCSS！リセットCSS・デフォルトCSSコード公開！

ホーム
BLOG
Programming｜開発
[CSS] ブラウザ毎にずれないCSS！リセットCSS・デフォルトCSSコード公開！

[CSS] ブラウザ毎にずれないCSS！リセットCSS・デフォルトCSSコード公開！

Programming｜開発
2018.08.07

「あれ、違うブラウザで見るとレイアウトが崩れちゃった」WEBサイト作る方々にはあるあるなお話です。原因の1つが、ブラウザ毎にデフォルトのCSSがあり、それが反映されてしまっているパターンです！今回は、ブラウザ毎の差異をなくすリセットCSSについて解説します！

Contents

ブラウザについての基本知識
- ブラウザによってデフォルトのCSSは違う
- CSSの初期化、リセットしないと見た目が揃わない
「reset.css」のテンプレート
- Yahoo!の「YUI3」
- Eric MeyerさんのReset CSS
CSS関連記事

ブラウザについての基本知識

[speech_bubble type=”ln-flat” subtype=”L1″ icon=”user_02.png” name=”後輩野郎”]先輩様、WEBサイト作りました！デザイン通り表示されてること確認済みです！[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R1″ icon=”user_01.png” name=”先輩様”]ありがとう、確認してみるよ。[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R1″ icon=”user_01.png” name=”先輩様”]あれ、FireFoxだとデザイン崩れてるところがあるけど、確認したの？[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”user_02.png” name=”後輩野郎”]Google Chromeで確認しましたが、寸分の狂いもないですよ？[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R2″ icon=”user_01.png” name=”先輩様”]もしかして、他のブラウザでは検証してないのかな？[/speech_bubble]

ブラウザによってデフォルトのCSSは違う

例えばCSSを全く読み込まないサイトを作った場合、ブラウザ側で設定しているデフォルトのCSSが適用されます！このデフォルトCSSのおかげで、CSSで指定していない項目でも良きに表示されるようになります。

ただ、あくまで「良きに」ブラウザ側がやってくれているだけなので、ブラウザ毎にデフォルトCSSは違います！フォントや余白等様々なところで・・・各メーカーのガラケーで、ボタンの意味がそれぞれ違ったりするのと同じですね(・・;)

CSSの初期化、リセットしないと見た目が揃わない

ということで、CSSを読み込む際、すべてのセレクタ（tableやp等）を指定しないと、ブラウザデフォルトが指定されちゃいます(ﾉд･｡)でもいちいちそんなの数数えてられないですよね・・・(ﾉд･｡)

そこで活躍するのがリセットCSS（reset.css）と呼ばれる、ブラウザ毎のデフォルトCSSを初期化するコード集です！ネット上に色々転がっていますが、今回は厳選して有名所をご紹介します(｡･ω･｡)

「reset.css」のテンプレート

Yahoo!の「YUI3」

Yahoo! User Interface Libraryのreset.cssを使った、CSSリセット方法です！ライセンス表記があれば商用利用も可ですので、下記をそのままコピペでご利用下さい(｡･ω･｡)（ライセンス表記を消さなければ改修もOKです！）

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
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;
}
li { 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; }
input,textarea,select{ *font-size:100%; }
legend{ color:#000; }

Eric MeyerさんのReset CSS

EricMeyerさんが提唱したリセットCSS理論で、世界中でよく使われています！彼が提案した際のブログは、数々のディスカッションを生みました(｡･ω･｡)

 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing=&quot;0&quot;' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

いかがでしたでしょうか！何かございましたらコメント欄にぜひぜひご意見お願いいたしまーす！(｡･ω･｡)