とりあえず設定したいCSSの基本設定
最近この手の記事をよく見かけるので、僕もそれにのっかります。。
もちろんデザインによってはこの通りではありませんが、自分のメモ代わりに、ということもかねて。
まず何より先に。
@charset "SHIFT_JIS";HTML側で使用しているエンコードに合わせて選択。
@charset "UTF-8";
@charset "EUC-JP";
これは絶対１行目に記述してください。
しかし、なんでSHIFT_JISだけ「_（アンダーバー）」なんでしょうね？
全体の設定
* {margin、paddingを０に。
margin: 0;
padding: 0;
border-style: none;
}
ボーダーも消してしまいましょう。
bodyの設定
body {デザインにもよりますが、こんな感じの設定が多いです。
text-align: center;
font: normal normal 0.75em/1.4 "ヒラギノ角ゴ Pro W3", メイリオ, "Hiragino Kakugo Pro W3", Meiryo, Osaka, "MS Pゴシック", Arial, Helvetica, Geneva, sans-serif;
color: #333;
}
フォント設定はショートハンドにしてしまってますが、これは今使っているCSSEditというMacソフトがこのような設定になっているため。
font-sizeは標準的なブラウザーであればデフォルトで16pxに設定されているものが多いので、0.75emとすることで12pxになります。
font-sizeをpxの絶対値指定する人も多いようですが、IEでは文字の大きさを変更できなくなるというバグ（仕様？）があるため、できる限り相対値にしましょう。
line-heightは比較的読みやすいと言われている1.4に。
fonto-familyがやたらと登録されていますが、この程度でもOKだと思う。
font-family: Arial, Helvetica, Geneva, sans-serif;ただ一部ブラウザーで文字化けするとクライアントに報告された経験から上記のように設定しています。
floatのクリア設定
.clearfix:after {有名なclearfixを使わせてもらっています。
content:".";
height: 0px;
clear: both;
display: block;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
これを使うおかげでboxの最後に
<br style="clear:both;">のような設定をする必要がなくなりました。
あとは必要に応じて
#wrapperを使ったり。
{
margin: 0 auto;
width: ***px;
vertical-align: top;
}
@charsetの次の行ぐらいからコメントタグを使って
/*
タイトル：案件名
制作日時：＊＊年＊＊月＊＊日
改訂日時：＊＊年＊＊月＊＊日＊＊時＊＊分／＊＊を変更
*/
のようにCSSのメモ書きを残しています。
全ての案件でこの設定が使えるわけではないですが、あくまでメモ書き・参考程度に。。
