カテゴリ: CSS
記事投稿日: 2011年10月21日
記事更新日: 2017年2月13日


長年、仕事で使っている初期化用のスタイルシートを公開します。
(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」が使いやすいです。
(今までの案件では使う機会がなかったのですが、次の案件では使ってみたいですね)
「圧縮」することで、コメント、スペース、インデントなどが取り除かれるので
スクリプトの軽量化につながり、またコードの保守性も向上します。
ツールを使えば、圧縮したものを元に戻すことも可能ですが、
簡単にコピペされるよりはマシでしょう。
コメントを残す