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

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

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

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

関連記事

  1. [jQuery] カーソルをあてた時に画像を切り替える方法(マウスオーバー・マウ…

    2018.06.20
  2. [Windows] コマンドプロンプトで簡単にファイル一覧を作成する方法!

    2017.11.08
  3. [CSS] CSSだけで手軽にコピー禁止する方法!

    2017.10.11
  4. [SQLServer] クエリのパフォーマンス調査・ボトルネックの特定

    2017.08.08
  5. [PHP] igo-phpを用いた形態素解析〜タグクラウド自作に向けて〜

    2016.05.05
  6. [PHP] 入力フォームのバリデーションチェックを実装する

    2016.05.09

コメント

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

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

CAPTCHA


New Article

  1. sangokutenbu_rendo6
  2. sangokutenbu_hukuryu
  3. 150415322552_TP_V
  4. ISG106130755_TP_V
  5. drtftgyuhij_TP_V
PAGE TOP