スポンサーサイト

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

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

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

前回紹介しましたCSS(スタイルシート)の最適化は参考になりましたか?
今回はさらに軽量化する方法をご紹介します。

といいましても
それほど難しくないと思います。
ですので、CSSのことはあまり詳しくないという方でも
ゆっくりやればできると思いますので
やってみてください。

あと、失敗した時に備えて
バックアップを取っておくことをおすすめします。

1つにまとめる (完全一致の場合)


. aiueo {
margin: 25px 45px 30px 45px;
padding: 10px 20px 30px 20px;
}

. kakikukeko {
margin: 25px 45px 30px 45px;
padding: 10px 20px 30px 20px;
}

上に「aiueo」と「kakikukeko」の二つがあります。
ただ、比べて見てみると、指定内容は同じですねっ。
なら、この二つをまとめちゃいましょう。

. aiueo , . kakikukeko {
margin: 25px 45px 30px 45px;
padding: 10px 20px 30px 20px;
}

このように
「. aiueo」と「. kakikukeko」を一緒に並べて
二つの間に「,(半角カンマ)」を挿入することにより
2つを1つにまとめて指定することができます。

1つにまとめる (部分一致)


. aiueo {
margin: 25px 45px 30px 45px;
padding: 10px 20px 30px 20px;
background: #aaabbb;
}

. kakikukeko {
margin: 25px 45px 30px 45px;
padding: 10px 20px 30px 20px;
background: #cccddd;
}

先ほどとは異なり
今回は「background(背景色)」がそれぞれ異なっています。
この場合は先ほどの応用を使います。

. aiueo , . kakikukeko {
margin: 25px 45px 30px 45px;
padding: 10px 20px 30px 20px;
}

. aiueo { background: #aaabbb; }

. kakikukeko { background: #cccddd; }

このように共通するプロパティだけをまとめて
異なるプロパティは、個別で指定することにより
簡略化することができます。

今回は2つの指定を1つにまとめましたが
,(半角カンマ)」を使えば
いくつでもまとめて指定することができます。


関連記事


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

グーグルアドセンスのクリック単価の仕組み | CSS(スタイルシート)のプロパティの簡略化で軽量化 ~PART 1~









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