最初に指定しておくCSS | Tyto-Style

最初に指定しておくCSS

| CSS, トピック

Pin It

複数のブラウザを対象に(x)html+cssでコーディングをする際、リセットCSSを使っている人は多いと思います。私も、有名なYUI Reset CSSから使い始めて、今では自分なりに色々追加したり削除したりしながら使っています。作成するサイトによって色々と細かい部分を変えますが、だいたいはこんな感じの指定をします。

/* Reset
----------------------------------*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,
blockquote,table,caption,
tbody,tfoot,thead,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;
}
ol,ul{
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:'';
}
object,
embed {
vertical-align: top;
}
abbr,acronym{
border:0;
}
/* basic property
----------------------------------*/
html {
overflow:scroll;
overflow:-moz-scrollbars-vertical;
overflow-x:scroll;
}
body{
font-size: 62.5%;
font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}
.right{
float: right;
}
.left{
float: left;
}
.clear{
clear: both;
}
img.bottom{
vertical-align: bottom;
}
/* clearfix
----------------------------------*/
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: inline-block;
}
/* MacIE begin \*/
*+html .clearfix{height: 1%;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* Mac IE end */

htmlへのoverflow関連の指定はFirefoxやChromeで、デザインが変化しないようにするために最初からブラウザのスクロールバーを出しておくためのものです。実はこれをいれておくとWeb標準から外れてしまうのですが、私は一度Web標準に沿ったコーディングをした後(あるいはWeb標準の基本的な理念を理解し、そこから外れないような形)ならば、必要に応じて標準でなくなってしまっても構わないと考えるタイプなので、敢えて入れておきます。

imgのvertical-alignをbottomの指定をしておくのはInternet Explorer(以下IE)で、縦に画像を並べた時に余分な隙間を作らないためです。

bodyでfont-size:62.5%を指定しておくのは、font-sizeのem計算や、%計算を簡単にするためです。こうしておくと、font-sizeが10pxになるので、12pxにしたければ、font-size:120%(1.2em)とするだけで、12pxになるので、計算が簡単になるからです。

font-familyは以下のサイトを参考にこういう形にしています。

» CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係

上の記事にもありますが、特にMacを意識しないのであれば、”ヒラギノ角ゴPro W3″と”Hiragino Kaku Gothic Pro”は抜いておいた方がいいかもしれません。

最後のclearfixも必ず入れておきます。これは非常に便利です。ちなみに記述の中の* htmlはIE6用のCSSハック、*+htmlはIE7用ですよね。

ただし、私の場合、ほとんどclass=”clearfix”というかたちでは使いません。例えば、<div id=”content”></div>にclearfixを指定したい場合は以下のように記述し、clearfixを適用したいものはカンマで区切って追加していきます。

div#contetnt:after,
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#contetnt,
.clearfix{
display: inline-block;
}
/* MacIE begin \*/
*+html div#contetnt,
*+html .clearfix{height: 1%;}
* html div#contetnt,
* html .clearfix{height: 1%;}
div#contetnt,
.clearfix{display: block;}
/* Mac IE end */

こうしておくと、後でデザインが変わってclearfixが不要になった場合でも(x)htmlに手を加えなくても済むからです。

このcleafix、色々なものがありますが、おそらく一番簡単なのは以下のものだと思います。

.cleafix{
overflow: hidden;
}
* html .clearfix{
zoom: 1;
}

色々な方が色々なかたちで作成しているリセットCSSですが、何かの参考になればと思って紹介しました。あくまで私の場合はこれが便利というものですので、もっと便利なものとか、これ抜けてるんじゃない?なんていう部分がありましたら教えていただけると嬉しいです。

また、もっと色々なものを見てみたい、という方はコリスさんの以下の記事を参考にするといいかもしれません。

» [CSS]ブラウザのスタイルをリセットするスタイルシート集


“最初に指定しておくCSS” への2件のフィードバック

  1. KumaCrow より:

    Tytoさん、こんにちは!(・∀・)/
    とても勉強になるッス。
    参考にさせていただくッス。(`・ω・´)

  2. tyto より:

    KumaCrowさん、こんばんは。
    少しずつCSSの記事もアップしていきたいなと考えたのと、一度、リセットCSSを形にしておきたくて記事にしてみました。何かの参考になったなら嬉しいです!

コメントを残す

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