みどりの初期化スタイルシートを公開

カテゴリ: CSS

記事投稿日: 2011年10月21日



css

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








コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA




トップに戻る