ブラウザ固有のCSSをリセットする

どうも。高校野球の季節 らいぱちです。
このブログはseesaaブログを使ってできているのですが、
いくらCSSをいじっても一番外側にmarginができてしまっていました。
なんでだろうと思っていたのですが、
ブラウザ固有のCSS設定があって、そのCSSをリセットもしくは初期化する
という方法があるんですね。
(まあ、そんなことも知らないど素人がやってるブログです)


いつもはFirefoxを使ってブログの更新を行います。
CSSをいじってレイアウトをせっせと変更しているわけですが、
どうしても一番外側のmarginがなくならない。
こんな状態になってました。
01CSSreset_before.png

ブラウザごとにデフォルトのCSSはちがう

調べてみると、各ブラウザにはそもそも設定されているCSSがあるようで。
同じ<h1>タグでも、
safariだと見出しのフォントが「明朝体」に。
Firefoxだと同じ見出しが「ゴシック体」になってしまうなど、
デザインが変わってしまうとのことです。
気にしなければ問題ないですが、、、
ぼくはそれは非常に気になるので、これはもうCSSをちゃんとリセットしておかないといけないな、と。
seesaaブログのデフォルトのCSSでも、CSSリセットはされていないみたいなので、
CSSをカスタマイズするなら、とりあえず最初にやっておいてもいいかも知れないです。

リセットするってむずかしそうと思いきや…

じゃあ、実際CSSリセットってどうするのさ?というと、
作業としては、
①すでにインターネット上にあるコードを探してきて
②自分のseesaaブログのスタイルシートにコピペ
という初心者に非常にやさしい手順でできました。
有名なリセットCSSとしては、Yahoo! User Interface Libraryのreset.cssを使う方法と
Eric Meyer氏によるCSSリセットの方法があるようです。

Yahoo! User Interface Libraryのreset.css

Yahoo! User Interface Libraryのreset.cssを使う方法があります。
これはライセンス表記をしなければ、改変したり商用利用したりするのも
できるようになっていて(BSD Licenseというそうですが)、
通常はダウンロードしたソースコードの中にあるライセンス表記を消さずに
コピペすれば利用可能のようです。


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

ただこのコードだと、body要素の背景が描画エリア全面に表示されなくなるという問題が
発生するようです。

Eric Meyer Reset CSS

Eric Meyerさんとはreset.cssという考え方をブログで提起した人のようです。
その論議は話題を呼び、リセット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;
}

こちらのリセット方法だと<font>や<big>というタグが使われているのが
よろしくないらしいのですが(今後廃止されるかも知れないタグらしく)、
でも有名なリセット方法ということです。

CSSをリセットしました

CSSをリセットするコードをスタイルシートにコピペした結果…
02CSSreset_after.png
見事一番外側のmarginをなくすことに成功。
いつもはひとつの作業をするにも四苦八苦して
なかなかはかどらないですが、
今回は意外とすんなり。
こつこつカスタマイズはまだまだ続きますが…
きょうはこんなところで試合終了。

この記事が気に入ったら
いいね!しよう

Twitter で

PAGE TOP