CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。
むしろこのサイトの方向性的に有った方が便利だよなーと。
書くきっかけを頂き、感謝いたします。
ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。
最初にbodyに指定しておくと便利だと思う3つを。
body {
background:#FFF url(../img/share/bg.gif) no-repeat left top;
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size:80%;
}
じゃあ、詳細について色々書きまする。
2/12 21：45頃にチョット修正入ってます。
bodyの指定
まずは背景。
background:#FFF url(../img/share/bg.gif) no-repeat left top;
背景の指定を予め記述しておくのは、都度書くのが面倒だからです。
比較的背景色は白が多いので、#FFFで白指定。
背景画像の指定までしているのも、面倒だから、、、
ディレクトリ構成は色々だと思うんですが、ボクの場合全ページで使いまわす画像はimgフォルダ内にshareフォルダを作りbodyに指定する背景画像はbg.gifで入れる事が多いのでその打つ手間を省きます。
コレにより、別のサイトを組む際に使い回しが利きます。
repeatとかも同じ理由。0から打つより「-y」とか「-x」とだけ打った方が楽だもん。
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
Verdanaは、英数字で一番読みやすいとかって何処かで読んだので、僕の中で流行ってます。
確かに読みやすいと思う。
ウチのサイトでも本文内はVerdanaが指定されてます。pre内は違うけど。
ビスタの登場もあるんでメイリオを指定しておくか逆にfont-familyの指定はしないのもいいと思います。
font-size:80%;
個人的にこのサイズが見やすいんと、上がってくるデザインはこのサイズが多いので最初に指定してます。
後は、対象ユーザー次第だと思います。
比較的年齢層が高い場合などは、mediumくらいが良さ毛。
違うなら変えればいいだけなのでいくつでも良いとは思いますが、とりあえず相対単位（px除く）で指定してれば良いかと。
っても60％やら、xx-smallとか異様に小さいサイズを最初に指定するのはダメだと思うけどね。
以上でbodyに指定しておくポイントはお終い。
続いてタイトルにもある「おまけ」の部分をば。
@charset指定を
文字コードに関わらず、@charsetで文字コードの指定をした方がいいです。
@charset "utf-8";
たまにコメントの後に指定しているのを見かけますが、@charsetは、必ず一番最初の行に記述します。
スペースすら空けちゃいけないです。
ユニバーサルセレクタ（*）
* {
margin:0;
padding:0;
}
ブラウザによるデフォルトのmarginとpaddingの差異を無くすために、ユニバーサルセレクタを利用して初期化をします。
bodyの指定
順番的にはココでbodyの指定をします。
htmlの指定
html {
overflow-y:scroll;
}
前回のエントリーで書いたFirefoxのスクロールバーの有無でセンタリング位置がズレる件を解消用です。
見出し関係の指定
h1,h2,h3,h4,h5,h6 {
}
h1から書いてグループ化するのすらだるいので取りあえず書いてあると楽ってだけです。
段落とかリストの指定
p,li,dt,dl {
line-height:1.6;
}
p {
margin:0 0 1em 0;
}
li {
list-style-type:none;
}
line-heightは好みですかね。1.6はボクが見やすいと思ってるので最近良く使ってます。
単位指定しない方が良い理由については、下記が参考になります。
Lucky bag::blog: line-height の値には単位なしが良いとされる理由
読んでみれば分かりますが、別に単位を付ける事自体はダメじゃないんで、その辺知ってれば問題ないかと。
p要素のmargin指定は、ユニバーサルセレクタで無くなられてしまわれたmarginを上書きして、ちゃんと段落になるように。
li要素の指定もデザイン次第なんですが、割合的に消えている場合が多いのなら最初に消しておいた方が指定する数が少なく済みます。
img要素の指定
img {
border:0;
}
imgにリンクを貼ったときに出る枠を消します。
ボクはコレを必ず指定してます。
address要素の指定
address {
font-style:normal;
}
日本語で斜体は読みにくいんで、ノーマルに。
チェック用のclass
.clear {
clear:both;
}
コレは実際に使うんじゃなくて、組んでる最中に「は？何だコレ」ってなった時に使います。
大半の問題がクリアする事で解決したりするので、入れて解決したらwidth指定を忘れているんじゃないのかとかclearfix使うべきなのかとかっていう原因を探ります。
組み終わったら消しちゃっていい感じです。
ここまでで一旦まとめ
上記のをまとめると以下のようになります。
@charset "utf-8";
/*
Share Style [
----------------------------------------------------------- */
* {
margin:0;
padding:0;
}
body {
background:#FFF url(../img/bg.gif) no-repeat left top;
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size:80%;
}
html {
overflow-y:scroll;
}
h1,h2,h3,h4,h5,h6 {
}
p,li,dt,dl {
line-height:1.6;
}
p {
margin:0 0 1em 0;
}
li {
list-style-type:none;
}
img {
border:0;
}
address {
font-style:normal;
}
.clear {
clear:both;
}
ボクの場合「いかにして打つ量を減らすか。」に重点を置いているのでこんな感じになってるという訳です。
さらに最初の方で指定して置くと便利そうなポイント
基本的なリンクカラーの指定も最初にすると便利です。
/*
Link Color [
----------------------------------------------------------- */
a:link {
color:#078D00;
text-decoration:none;
}
a:visited {
color:#189B12;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
color:#666;
}
コレはウチのサイトの例ですが、リンクのカラー指定は記述の順番が決められているので間違えないように予め用意しておくっていうスンポーです。
更に主要な部分のid名やclass名を最初に指定しておくとより打つのが減って良さげです。
例えば以下のように。
/*
container [
----------------------------------------------------------- */
#container {
}
/*
Head [
----------------------------------------------------------- */
#head {
}
/*
gNavi [
----------------------------------------------------------- */
#gNavi {
}
/*
main [
----------------------------------------------------------- */
#main {
}
/*
side [
----------------------------------------------------------- */
#side {
}
/*
foot [
----------------------------------------------------------- */
#foot {
}
更に細かく足しても良いと思いますが今回はこの位で。
id名やclass名の参考は、もう、class名やid名で悩まないんだからっ！！辺りをどうぞ。
全部まとめたのを以下においておきます。
http://css-happylife.com/template/12/default.css
お気にめされた方は、コレをベースに自分用にカスタマイズしてお使いください。
今回のポイントは、マイルールみたいな感じです。
自分なりなルールや、社内ルールみたいに有る程度決めてるとチョコッとでも作業効率が上がるかと思います。