ある程度CSSが書けても、”基本理念”があいまいな人は意外に多い気がします。
今回は、CSSを書く前の基本理念あれこれ。
CSSのリセット
ブラウザ間によるCSSの実装の違いやバグに苦しみ、クロスブラウザに膨大な時間を費やした経験は誰にでもあるでしょう。CSSハックを用いたり、条件分岐コメントを用いたり…
それを解決する方法として、一番はじめに、各ブラウザのデフォルトのCSSをリセットしてしまう方法があります。
いわゆる「reset.css」と呼ばれるものです。
ユニバーサルセレクタによる全要素のリセット方法は×
一昔前に多用されていた、ユニバーサルセレクタ（*）による全ての要素をリセットする方法はおすすめしません。
ブラウザのレンダリング速度が遅くなり、逆に表示が崩れてしまう場合があるからです。
*{
margin: 0;
padding: 0;
}
YUI3を使ったリセット方法
Yahoo! User Interface Library の reset.css を使った方法がおすすめです。
Yahoo UIはBSD Licenseなので、ライセンス表記を消さなければ、改変したり商用利用することも可能です。
この「reset.css」を、一番はじめに読み込んで、各ブラウザのデフォルトのCSSをリセットしてしまいます。
> reset.css
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
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ファイルの分割
外部CSSファイルを作成して読み込む方法は常識でも、1つのCSSファイルにすべてを詰め込んでしまうのは考えもの。
最初はきれいに書いていても、いつのまにか煩雑になってしまうことはよくあることです。
それを解決する方法として、あらかじめルールを決めて、CSSファイルを複数に分割する方法があります。
その一例↓
import.css – 複数のCSSファイルを読み込む為のCSSファイル
@charset "utf-8"; @import "./css/reset.css"; @import "./css/base.css"; @import "./css/common.css"; @import "./css/module.css";
reset.css – リセットCSS
base.css – wrapper や header、footer など、ペースとなる部分のCSSを書く
common.css – 汎用的に使用する a タグや、h1 などの見出し要素、その他、汎用的なクラスのCSSを書く
module.css – コンテンツのCSSを書く
ファイルを複数に分割することで、逆にメンテナンス性を下げてしまっては本末転倒ですので、きちんとルールを決めておきましょう。
汎用的なクラスは独立させる
中央寄せ、右寄せ、左寄せ、回り込み解除など、汎用的に使うスタイルは、独立したクラスとして定義しておきます。
.aligncenter {
display: block;
margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }
.clear { clear: both; }
それらをスペースで区切って組み合わせて使います。
<div class="sidemenu aligncenter"> </div>
CSSは美しく
インデントを付ける
プロパティは、セレクタに対してインデントを付けるのは常識。
さらに、子要素のCSSは、親要素に対してインデントを付けて書くことで、ぐっと見やすくなると同時に、構造も把握することができます。
#footer {
clear: both;
padding: 20px 0;
}
#footer address {
font-size: medium;
}
その他、基本事項
文字コードは必ず定義する
CSSファイルを作成する際は、必ず1行目に文字コードを定義します。
特に理由がない限り UTF-8 で作成するのが一般的。
@charset "utf-8";
id とクラスの違い
id – 1ページ中に1つだけ存在できる
class – 1ページ中に複数存在できる
印刷用CSS
パソコンの「モニター」と「印刷」は別物です。
・モニターの解像度を前提に作られた画像（72～96dpi）では、解像度が足りない為、印刷するとぼやける。
・印刷には「印刷可能領域」という制約がある。
・印刷用のCSSを用意する必要がある。
など。
印刷用CSSについては、クロスメディアと絡めて別途記事にしたいと思います。