Loading

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

IMARIC20160805472116_TP_V

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

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

後輩野郎
先輩様、WEBサイト作りました!デザイン通り表示されてること確認済みです!

先輩様
ありがとう、確認してみるよ。

先輩様
あれ、FireFoxだとデザイン崩れてるところがあるけど、確認したの?

後輩野郎
Google Chromeで確認しましたが、寸分の狂いもないですよ?

先輩様
もしかして、他のブラウザでは検証してないのかな?

ブラウザによってデフォルトの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="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

CSS関連記事

CSSのその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)

[三国天武] 新システム「国戦」とは?国戦の特徴・仕組み・戦略を公開!

[PHP] date(): It is not safe to rely on the system’s timezone settings のエラー解決法・対処法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. 三国天武 日貫槍
  2. 沙盤演武 イベント やること流れ
  3. あだち充 ポジション別登場人物まとめ
  4. 三国天武 神君陸遜(吉札陸遜)
  5. sangokutenbu_syoi

人気記事

  • 該当なし
PAGE TOP