スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

CSSのソースコードを軽量化するためのポイント

CSSのソースコードを軽量化すると、WEBサイトの表示が速くなったり、SEOにも良いなど、様々なメリットがあります。ここでは簡単なポイントを紹介します。

簡単な方法としては、短いプロパティを設定するという方法があります。
例えばマージンというプロパティを設定する場合には、以下のようにソースを書くとします。

margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

このソースは、marginを上下左右全てに値を設定しています。しかし、この書き方だとソースが無駄に長くなってしまいます。そこで、次のように書き換えます。

margin: 0 20px 10px 20px;

こう書き換えると最初に書いたソースよりもだいぶ短くなったと思います。
最初に書いたソースと意味は同じなので、こちらの書き方に統一するとソースの軽量化ができます。