Tag Archives: CSS

1

[css][js]を gzip に圧縮する事で読み込みを軽減

no image

手順① .htaccessの設定 RewriteEngine on RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME} “\.(css|js)$” RewriteCond %{REQUEST_FILENAME} !”\.gz$” RewriteCond %{REQUEST_FILENAME}\.gz -s RewriteRule .+ %{REQUEST_URI}.gz ForceType text/javascript ForceType text/cssAddEncoding x-gzip .gz CSSの元ファイル名がstyle.cssならstyle.css.gzを読み込む。 同様にScriptならスクリプト名.js.gzとする。 CubeICE（圧縮ソフト）で gzip に圧縮する。 圧縮した gz ファイルを読み込むように記述を変更する。 【変更前】　<link href=”base.css” rel=”stylesheet” type=”text/css” /> 【変更後】　<link href=”base.css.gz” … Continue reading →

1

3の倍数の要素だけcssを変更する

no image

jQueryで3の倍数の要素だけスタイルシートを変更します。 ▼Javascript <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script> <script type=”text/javascript”> <!–$(document).ready(function() { $(“li:nth-child(3n)”).css({“margin”:”0 0 5px 0″});}); –> </script> ▼css #box li{　width: 307px;　height: 83px;　border: solid 1px #ccc; float: left; margin-right: 5px; margin-bottom: 5px; background: #FFF;} ▼html <div id=”box”> <ul> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> </ul> </div> … Continue reading →