Home > コーディング > CSS簡略化

CSS簡略化

サイトを装飾するCSSも、HTMLと同じように簡略化できている/できていないの違いがあります。

optimisedCSS.gif

たとえば、背景画像を定義するときの

background-color: #FFFFFF;
background-image: url(hoge.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
background: #FFF url(hoge.gif) no-repeat 0 0;
は同じです。

Dreamweaverなどに頼りすぎると、省略できていない定義をしてしまうことが多いので注意が必要です。
サイト丸ごとの見た目を1つのCSSファイルにまとめると、結構なファイルサイズ(といってもHTMLだけで見た目を作っているサイトよりは圧倒的に少ないですが。)になるので簡略化することを心がけましょう。

しかし、もう作ってしまったCSSファイルをまた編集するのは正直面倒です。
そこで活躍する、CSS簡略化ツールがあります。
Online CSS Optimizer/Optimiser
URLを指定するかローカルのファイルなら内容をペーストしても変換できます。
日本語は文字化けしてしまうようなので簡略化する前のファイルは無くさないようにしましょう。
もちろん、最初から簡略化された定義をするのが一番です。

Home > コーディング > CSS簡略化

Search
Feeds

Page Top