chrome、Safariなど。初心者必見!cssのリセット方法

リセットcss

chrome、Safariがおかしい。
そんなときはcssをリセット!

システムエンジニア(SE)かっきーです。

chrome、Safariなどブラウザのバージョンの違いにより、cssが別の動きをすることがあります。
今回ご紹介するふたつのcssリセットの内、ひとつをHTMLタグなどに設定することで、使用するブラウザにスタイルが違う点を解決することができますよ。

また、既存のcssを加味する必要がないため実装がグッと楽になります!

オススメのcssをリセット(1)
Yahoo! User Interfaceのリセット.css

私がよく採用するのはこのYUI3です。
「Yahoo! User Interface Library」が提供しているリセット.cssになります。

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 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;
}
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; }

オススメのcssをリセット(2)
Eric Meyer’s CSS Reset

こちらはちょっと古いですが、海外ではよく使用されているみたいです。
海外向けだけあってabbr,やacronym、emは日本では、ほとんど使われておりません。

また、HTMLの非推奨要素(big,small等)に対して指定がされていたりするため、よく考えて使用するサイトにより適した部分のみ採用するようにしましょう。

====================
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

reset.cssを使用する際は

オススメのcssリセットとして、ふたつめにreset.cssも紹介しましたが、全部を記載する必要がない場合もあります。
自身のサイトにあったreset.cssを、適切に設定するようにするといいでしょう。

また、以下のサイトから、リセットcssの人気度が確認できるため、その時人気のreset.cssを採用するのもいいかもしれません。

ご不明点がある場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です