カテゴリ: CSS
記事投稿日: 2011年10月21日
長年、仕事で使っている初期化用のスタイルシートを公開します。
(2011年10月22日時点で、ベストと考えている状態のもの)
つっこみ大歓迎です。
海外の無料テンプレートなどでは、全称セレクタ(*)を使って
一気にマージン、パディングを0にしているのをよく見かけます。
が、IEで見た時に問題が発生することが多いので、
ひとつずつ設定しています。
@charset "UTF-8"; /*--------------------------------------------------------- Import Stylesheet - version date 2011.10.21 Web Atelier Midori [import.css] ----------------------------------------------------------*/ /* 初期化 */ body,form,fieldset, h1,h2,h3,h4,h5,h6,p,pre,span, table,tr,th,td, img,blockquote, ul,ol,li,dl,dd, input,textarea,select,option, embed,object {margin: 0; padding: 0; zoom:1;} body {text-align: center; margin: auto;} blockquote,li,dt,dd {margin-left: 1em;} li { margin: 0; padding: 0; /*IE8 fireFox用*/ list-style-type: none; /*IE6-7用*/ list-style: none; } input,textarea {font-size: 1em;} input {vertical-align: middle;} table,tr,td,th {border-collapse: collapse; border:0;} img {border:0;} form {margin:0px; padding: 0px;} a {text-decoration: none;} a:hover {text-decoration: underline;} strong{font-weight: normal;} /* IE6/7 brが改行されないバグ */ br { letter-spacing: 0; } .clear { clear: both!important; visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clear { zoom: 1; } /* IE6 */ *:first-child+html .clear { zoom: 1; } /* IE7 */
コリスさんの「ブラウザのスタイルを初期化するスタイルシートのサンプル集」を見ると
初期化の時点でフォント周りも指定しているものもありますが、
ここではあくまで初期化用と割りきっています。
スタイルシートを書く時は、
メンテナンスの利便性を考えて、
以下の3ファイルに分けています。
①初期化用
②サイト全体の共通デザイン用
③個々のページ用
さらに、ページの高速化にこだわる場合は「圧縮」します。
Webベースのツール「CSS Minifier」が使いやすいです。
(今までの案件では使う機会がなかったのですが、次の案件では使ってみたいですね)
「圧縮」することで、コメント、スペース、インデントなどが取り除かれるので
スクリプトの軽量化につながり、またコードの保守性も向上します。
ツールを使えば、圧縮したものを元に戻すことも可能ですが、
簡単にコピペされるよりはマシでしょう。
コメントを残す