[CSS]スタイルシートをほんの少し軽量化する10のTips

簡単に実践できるものから、ちょっと手間がかかるものまでスタイルシートをほんの少し軽量化する10+1のTipsを紹介します。

サイトのキャプチャ

How to Micro-Optimize Your CSS

Tips 1:カラーコードを短く記述

プロパティにカラーを指定する際は、最も短い値を使用します。

軽量化前

カラーをRGB値で指定しています。

カラーを16進法で指定しています。

軽量化後

16進法を省略して記述します。

更に軽量化

使用するプロパティは「background」でも同じ効果が得られます。

Tips 2:重複しているプロパティをマージ

重複しているものをまとめます。

軽量化前

フォントまわりに同じ指定をしている箇所が複数あります。

軽量化後

同じ指定のものをマージします。

Tips 3:可能な時はいつでもショートハンドを使用

フォントや背景やマージンやボーダーなど可能な時には、ショートハンドを使用します。

軽量化前

個々のプロパティを使用しています。

軽量化後

複数のプロパティをまとめて、ショートハンドを使用します。

Tips 4:同じ値を統合して指定

マージンで同じ値を指定するときは、統合して指定します。

軽量化前

左から順に、上・右・下・左の値になります。

軽量化後

同じ値を統合します。左から順に、上下・左右の値になります。

更に軽量化

四つが同じ値の場合は、更にまとめて指定します。

Tips 5:必要のない「0」を省略

数値に「0」を使用する時は、省略可能なものがあります。

軽量化前

二つのプロパティに省略可能な異なる「0」を使用しています。

軽量化後

省略可能な「0」を省略します。

Tips 6:「0」の単位を省略

プロパティの値に「0px」とする時、単位を省略します。

軽量化前

値に「0px」と指定しています。

軽量化後

値が「0」なので、「px」を省略します。

Tips 7:最後のセミコロンを省略

最後のセミコロンを除くことができます。

軽量化前

最後の行にもセミコロンを記載しています。

軽量化後

最後のセミコロンを省略します。

更に軽量化

ショートハンドの場合でもセミコロンを省略します。

Tips 8:アップロード時にコメントを削除

CSSでコメントを使用することは有用で、整理されたスタイルシートを維持するのに必要不可欠なものです。しかしながら、そのコメントはブラウザにとっては100%無駄なものです。
サーバーにアップロードして運用するスタイルシートファイルからは、コメントは削除するようにします。

Tips 9:空白スペースを削除

可能な限り空白スペースを削除します。

軽量化前

よくある記述例です。

軽量化後

不必要な空白スペースを削除します。

ショートハンドなどの必要な空白スペースは削除しないでください。

軽量化前

ショートハンドの記述例です。

間違った軽量化

ショートハンドから空白スペースを削除すると、期待通りの表示をしません。

Tips 10:見栄えをよくするフォーマットは無しで

スタイルシートを管理する上で見栄えをよくするために使用する[Tab]や空白スペースや改行を削除します。

軽量化前

[Tab]や空白スペースや改行を使用して、見栄えよく記述されています。

軽量化後

見栄えのための[Tab]や空白スペースや改行を削除します。

Tips 11:CSSに間違いがないかチェック

最後に、CSSが妥当であるかどうかを確認するために、「CSS Validation Service(カスケーディングスタイルシートを検証)」であなたのスタイルシートファイルをチェックしてください。
これは、CSSにミスが無いかどうかチェックをしてくれます。

top of page

©2017 coliss