スポンサーサイト

スポンサー広告 | --.--.--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS(スタイルシート)のプロパティの簡略化で軽量化 ~PART 1~

[ カスタマイズ ] HTML と スタイルシート | 2010.05.30

先日、グーグルがページの表示速度を評価の対象とするといいました。
そこで今回はCSS(スタイルシート)の軽量化をご紹介したいと思います。

表示速度を速くするためには
CSSの外部化や画像の容量を少なくするなどといった
もっと効果的な方法があり、
CSSの軽量化による効果はそれほど大したことはありません。

しかし、CSSはサイト全てのページに反映されるものですので
サイト全体の軽量化に繋がります。
ですので、やっておいて損はありません。

それほど難しくないので、初心者の方でも簡単にできると思います。
もし良ければやってみてください。

color (カラーコード)


color : #ffffff ; ⇒ color : #fff ;
color : #aabbcc; ⇒ color : #abc ;

このようにカラーコードを6ケタから3ケタに省略することができます。

ただしこの場合、条件があります。

#aabbcc ⇒ #abc

6ケタを2桁ずつ3組に分けた場合
3組ともすべてで、連続した英数字の場合にのみ
6ケタから3桁に省略することができます。

1組でも英数字が連続していない場合は省略不可能です。


background-color (背景色)


background-color: #abcdef; ⇒ background: #abcdef;

背景色のプロパティ「background-color」は「background」に
省略することができます。


0px (サイズ)


margin : 10px 0px 0px 10px; ⇒ margin : 10px 0 0 10px;

サイズが「0px」の場合のみ「px」を省略して
「0」と表記することができます。


border (ボーダー)


border-top : 5px solid #abcdef ;
border-right : 5px solid #abcdef ;
border-bottom : 5px solid #abcdef ;
border-left : 5px solid #abcde f;
 ↓
border : 5px solid #abcdef;

borderの上右下左(top、right、bottom、left)のすべての指定が同じ場合のみ
上右下左(top、right、bottom、left)の指定をせずに
「border」のみで指定すれば
上右下左(top、right、bottom、left)の全てに反映されます。


paddingとmargin (パディングとマージンの間隔)


上右下左(top、right、bottom、left)の指定が全て異なる場合

margin(padding)-top : 10px ;
margin(padding)-right : 20px ;
margin(padding)-bottom : 30px ;
margin(padding)-left : 40px ;
 ↓
margin(padding) : 10px 20px 30px 40px ;

上右下左(top、right、bottom、left)の指定を1つにまとめることができます。
指定方法は左から(上 右 下 左)の順番に指定します。


上下(top、bottom)の指定、左右(right、left)の指定がそれぞれ一緒の場合

margin(padding)-top : 10px ;
margin(padding)-right : 40px ;
margin(padding)-bottom : 10px ;
margin(padding)-left : 40px ;
 ↓
margin(padding) : 10px 40px 10px 40px;
 ↓
margin(padding) : 10px 40px ;

上下(top、bottom)の指定が同じで、
且つ左右(right、left)の指定が同じ場合
「上下、左右」の順番に簡略して指定することができます。


上右下左(top、right、bottom、left)の指定が全て一緒の場合

margin(padding)-top : 10px ;
margin(padding)-right : 10px ;
margin(padding)-bottom : 10px ;
margin(padding)-left : 10px ;
 ↓
margin(padding) : 10px 10px 10px 10px;
 ↓
margin(padding) : 10px ;

上右下左(top、right、bottom、left)の指定が全て同じ場合
1つにまとめて指定することができます。


関連記事


関連記事
人気ブログランキング この記事がお役に立てましたら1クリックお願いします

CSS(スタイルシート)のプロパティの簡略化で軽量化 ~PART 2~ | CSS(スタイルシート)を軽量化してくれるツール









管理者にだけ表示を許可する
|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。