K's Labo Rebooted

CSSファイルに複雑なレイアウトやハックなんかを、どんどこどんどこと追加記述してると、いつの間にやら200行・300行って膨大な行数になった経験はありませんか？私はよくあります・・・。

例えば、膨大な行数になったそのCSSファイルの容量を10KBとしましょうか。とあるページを読み込んだ際に、そのCSSファイル分の10KBが加算されるわけです。
所詮CSSの記述なんてもんは、キャッシュの設定を施してやれば、毎回毎回読み込まなくてもいいモンが殆どです。それなのに、毎回10KB（例えばですよ、例えば）が加算される。負担になるのは明確ですよね。

んじゃ、どうすればいいの？ってことになりますよねぇ〜。はい、そろそろ本エントリーのメインはこっからです。

一番、手っ取り早い方法として「PHP」を使用する方法をご紹介します。
要は「PHP」を使って「CSS」を圧縮してブラウザ側に転送し、ブラウザ側が読み込んだ際にCSSフォーマットとして展開する方法です。
注意事項として、当然「PHP」を使用しますので、「PHP」が使用可能なサーバーでないと使えませんよ。

んでは、どうするのかを説明します。やり方はいたってシンプル。

CSSファイルの名前を「main.css」と仮定してお話します。まず、そのファイル名を「main.php」に変更します。次に、その「main.php」をエディターなんかで開いて、下記に記載するコードを先頭に追加し、上書き保存します。

<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60;
    $ExpStr = "Expires: " . 
    gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
    header($ExpStr);
?>

後は、この「main.php」をFTP等でサーバーにアップロードし、合わせてCSSファイルを読み込んでる記述も変更してやればOKです（下記参照）。ねっ、簡単でしょ。

<link rel="stylesheet" type="text/css" href="./main.css" />
↓↓↓↓
<link rel="stylesheet" type="text/css" href="./main.php" />

上記のPHPソースですが、「ob_gzhandler」を使ってファイル内容をgzipで圧縮し、展開時にCSSフォーマットに戻しています。加えて、キャッシュを1時間保持するようにもなってますので、毎回スクリプトが走る〜ってことがありません。いや〜、いたれりつくせり。ありがたや〜、ありがたや〜です。

PHPが稼動するサーバーであれば、非常に簡単なカスタマイズだけで使用できますので、よしっ！と思う方、是非チャレンジしてみてください。

それでは、また。