Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSファイルを簡単に軽くする方法

[スポンサード リンク]


CSSファイルとは、カスケーティング・スタイルシートのファイルの事でWebサイトの見た目を設定するのに必要なファイルの事です。
CSSファイルは外部ファイル化してヘッダー部で読み込ませるのが普通です。
CSSファイルの容量はページ表示速度の大事なファクウターになるわけですから、出来るだけ軽いファイルの方が良いです。

というわけで、今回は簡単にCSSファイルを軽くする事が出来るWebサービスをご紹介します。

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

名前の通り、CSSファイルをClean(掃除)してくれるWebサービスです。
実際に私のブログで試したところ数キロバイトほど容量が軽くなりましたので、ページの表示速度に興味のある方はお試しください。
CSSファイルの容量が大きければ大きいほど効果があるんじゃないかな。

※Clean CSSを使う前に必ずCSSファイルのバックアップを取ってください。
CSSファイルの圧縮レベルによっては表示が変わってしまう場合があります。

Clean CSSでCSSファイルを軽くする方法

  1. まずは、Clean CSSに行ってみましょう!
  2. Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
  3. CSS-Code:」と書かれたテキストエリアにご自分のCSSファイルの内容をペーストします。
    または、
    CSSファイルのアドレスがわかっているならば、「CSS from URL:」という所にCSSのアドレスをペーストします。
  4. 最後に[Process CSS]をクリックします。
    以上で、CSSファイルの圧縮が完了します。

圧縮されたCSSは、下の「Input:~欄」に表示されていますので、コピーして使ってください。

Input : 最初のCSSファイルサイズ。
Output : 圧縮後のファイルサイズ。
Compression Ratio : 圧縮率です。

Messages」には、どのような事をしたのかがラインナンバーとともに表示されます。
見てみるとわかりますが、少しでも文字数などが少なくなるようなCSSの書き方に替えているだけです。

例としては、

font-weight(文字の太さ) : normal  ⇒ 400

これは標準の太さを意味します。(数値400とnormalが同じ意味です)

font-weight(文字の太さ) : bold  ⇒ 700

これは、一般的な太字の太さです。(boldと700が同じ意味です。)

marginなどの場合もいくつか書き方があるので最適化されます。

margin(マージン) : 1em 1em  ⇒ 1em

マージンに2つ数字を書くと最初が上下、次が左右になります。ですので、どちらも同じ数値ならば1つにまとめられますね。まぁ最初からそう書くのが普通かもしれませんが、うっかりミスもあるもんです。

paddingなんかも同様です。
複数の数値をまとめる際は出来るだけ少なくなるように記述されます。

padding(パッディング) : 2px 10px 10px 10px  ⇒ 2px 10px 10px

4つ指定した場合は上、右、下、左となります。(左右の数値が同じところに注目)
3つの場合は、上、左右、下となるので、左右の数値をまとめて書けます。

colorの場合も省略が可能な場合があります。

color(文字色) : #ffffff  ⇒ #fff

どちらも文字色に白を指定しています。
同じ数字(a~f含む)が6つ並んだ時は、3つに省略できます。

margin-top(マージン上) : 0px ⇒ 0

CSSファイル内では、0pxを単なる0と書けます。
htmlタグにstyleで指定する場合は、pxなどの単位を付けなければいけません。

とこんな感じの事をClean CSSは一瞬でやってくれるようです。
でも、圧縮されたCSSファイルはちゃんとチェックしてから適用しましょうね。
font-family(文字の種類)に日本語で指定している時は文字化けするかもしれませんので、後で修正してください。
(メイリオ ⇒ ????、MS Pゴシック ⇒ ??? ?Х????a*?など)

私のCSSファイルで試したところ、オプションを弄らない状態で、

14.6KB ⇒ 9.98KB

まで、圧縮する事が出来ました。
最初から大した容量ではなかったのですが、コメントが消えたのが大きく影響しているのだとお思います。

/* 全体的な設定
------------------------------------------------------------ */

ってな感じでカスタマイズしやすいようにたくさんコメント書いてありますので・・・。
ちなみにコメントを残した場合だと11.8KBでした。

さて、どうやってコメントを残したのでしょう?
実はClean CSSのオプションを弄ると簡単にコメントを残したり出来ます。


Clean CSSのオプション設定

Clean CSSの「Options」の項目を見てください。

Sort Selectors (caution)
セレクタの名前でソートします。
でも、CSSは十番によって設定が変わる事があるので危険です・・・。
Sort Properties
セレクタ内のプロパティの名前でソートします。
でも、これも微妙かな。自分なりの順番を決めて書いていた方が見やすい!(私)

Optimise selectors and their properties プロパティが同じだった場合、セレクタをまとめるかどうか?
Merge shorthand properties
別けて書かれたプロパティをまとめるかどうか?
まとめた方が速くなるよって事かな。
Only safe optimisations
安全なものだけ最適化する?
Compress colors
文字色の書き方を省略する。
#ffffff ⇒ #fff
Compress font-weight
フォントの太さを省略してかく。(数字で書く。)
bold ⇒ 700
Lowercase selectors
セレクタの大文字(Upercase)を小文字(Lowercase)にする。
全部k文字で書いておいた方が良いと思います。

Case for properties プロパティを大文字にするか小文字にするかの設定です。
Remove unnecessary backslashes
不必要なバックシュラッシュを取り除きます。
convert !important-hack
プロパティを最優先させる「!important」を使わずに記述する。
Remove last ;
セレクタ内の一番最後のプロパティのお尻についている「;」を取り除きます。
このCSSプロパティの最後の「;(セミコロン)」はプロパティを続けて書く時に必要なものです。
ですから最後には必要ありません。
が、追加でプロパティを書く時などに書き忘れるとエラーになりますので、出来るだけどのプロパティにも付けておく方が書き方としては良いかも!?
Save comments
ここにチェックを付けるとコメントを残す事が出来ます。
コメントとは、/*~*/で囲まれた部分で日本語などが使えるのでカスタマイズ用にセレクタの情報などを記述すると便利です。
(コメント残してから、また消すとfont-weghtも文字化けしないような!?)
Discard invalid properties
CSS2.1、CSS2.0、CSS1.0の中から選択したものに合わないプロパティを削除します。
Output as file
ファイルにしてくれるらしいがどうやってもらうんだろ?
わかる方コメントくださいませ~。

このClean CSSを使う時は必ず、CSSファイル適用後にWebサイトを隅から隅まで確認しましょう。
もしかしたら少し変になっているかもしれませんので。

あと、順番がメチャクチャですがCode Layoutってのもあります。
これは、圧縮度合いみたいなものです。お好みでどうぞ。
CSSファイルの大きさにもよるでしょうが、私のCSSファイルではHighestでもそれほど変わりませんでした。(コメント無しで8.64KBほど)

Highest (no readability, smallest size)
一番小さいファイルサイズになります。
改行無しで、全て1行で書きだされます。見づらさMAX!
High (moderate readability, smaller size)
次に小さいファイルサイズになります。
セレクタ毎に1行ずつ書きだされます。まぁ、見づらいな。
Standard (balance between readability and size)
可読性とサイズのバランスタイプ。
これが丁度良いかもしれませんね。
Low (higher readability)
可動性重視の設定で、ファイルサイズは大きめ。
Custom (enter below)
自分でルールが決められるみたいです。
難しいので無理・・・。
CSSTidy

もう当分の間、CSSファイルを弄らないのであれば、元ファイルのバックアップを取りHighestで圧縮してしまってもOKだと思います。
変更する時は元ファイルの方を変更して、再びClean CSSを使えば良いでしょう。

色々弄ってみて、下に表示されたソースを確認しましょう!
元のCSSファイルさえあれば何やったって大丈夫ですの(*´Д`)
Clean CSSはCSSの軽くなる書き方の参考にもなりますのでお勉強して下さい。
とにかくClean CSSを使った後は必ずWebサイトを自分で確認してねー!
(デザイン崩れても責任持てませーん。協力はしますが・・。)

Comments

Comment Form