「あれ、違うブラウザで見るとレイアウトが崩れちゃった」WEBサイト作る方々にはあるあるなお話です。原因の1つが、ブラウザ毎にデフォルトの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="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
いかがでしたでしょうか!何かございましたらコメント欄にぜひぜひご意見お願いいたしまーす!(。・ω・。)
CSS関連記事
CSSのその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)
この記事へのコメントはありません。