今回は、スタイルシートに記述したCSSを圧縮して軽量化する方法と、逆にそれを元に戻して綺麗な記述にする方法を紹介します。
CSSの圧縮と整形について
CSSやHTMLを圧縮する事を「Minify処理」と言います。
圧縮の仕組みは、ソース内の不要な空白、改行、コメント、スタイルなどを全て消し、ほば一列にずらっと並んだ状態にするといった感じです。
逆にコードに適度な改行や空白を付けて分かりやすく綺麗な記述に直してくれる事を「整形」と言います。
下記のCSSは当サイトの一部の記載のMinifyバージョンと整形バージョンです。
#sitename{text-shadow:3px 3px 4px #777;font-size:60px}.desc{color:#777}.post .meta{text-align:center}#nav{box-shadow:0 2px 3px #000}.wp-block-image{border:solid 2px #ddd}/*サイトタイトル*/
#sitename {
text-shadow: 3px 3px 4px #777777;
font-size: 60px;
}
.desc {
color: #777777;
}
/*記事のメタ情報*/
.post .meta {
text-align: center;
}
/*グロナビ*/
#nav {
box-shadow: 0px 2px 3px #000000;
}
/*投稿画像の枠線*/
.wp-block-image {
border: solid 2px #ddd;
}Minify処理のやり方
Minify処理のやり方は、空白の削除、コメントの削除、改行の削除で出来ます。自分で作業することも可能だが下記の様なMinifyツールで行うのが良いでしょう。
使い方は、縮小前のコードのところに適当に記述したCSSをコピペして、Minifyをするを押せば縮小後のコードが右側に表示されます。これをコピーして、自分のサイトのスタイルシートにペーストすれば完了です。（どんなMinifyツールも大体同じです。）
整形のやり方
整形のやり方は、最適な改行やコメントなどを付けて自分の見やすいソースコードに書き換えることなので正解はありません。
整形に関しても整形ツールと調べれば以下の様なものがいくらでも出てきますので、それを使うのが良いでしょう。
使い方は、変換前のコードの部分に適当に記述したCSSをペーストすれば右側の変換後のコードにきれいに整ったCSSが表示されます。それを自身のサイトのスタイルシートにペーストすれば完了です。
メリットとデメリット
圧縮と整形にはメリットとデメリットがはっきりと分かれています。そこを理解して、使い分けていくのが理想的な運用の仕方です。
| Minify | 整形 |
|---|---|
| ページ読み込み速度が向上 | ページ読み込み速度が気持ち遅いかも |
| 記述が非常に分かりづらいので編集出来ない | 記述が分かりやすく編集がスムーズ |
Minifyの場合、空白や改行などの無駄な読み込みが一切なくなるのでページの読み込み速度が速くなります。ただし非常に分かりづらいソースコードになるので編集がやりずらくなります。
整形の場合は、逆に無駄な読み込みがあるので気持ちページ読み込み速度が遅くなります。ただソースコードはきれいなので編集が非常にやりやすくなります。
（※ここで言うページの読み込み速度は0.01msくらいの差です。ただCSSの記述が多ければ多いほどそれはデカくなります。）
理想的な分け方
メリットとデメリットを考えると、今後編集しないだろうCSSで、記述が多いものはMinifyして、それ用のファイルにまとめていくべきです。逆に今後編集していくだろう記述（テキストや画像などは良く編集する）は整形してきれいなスタイルシートとして保存しとくべきでしょう。
以上が「CSSを圧縮する方法と綺麗な記述にする方法：Minifyと整形」でした。
