CSSのちょっとしたテクニック

CSS on ,

CSSの記述方法には色々な方法があります。
ちょっとした事で、とても見やすくスッキリします。
日頃から意識して書いてるつもりですが、後から見直すと、自分で作ったものなのに「何だこりゃ!」って事もあります。
そんな、本当に些細なことですが日頃から心がけておきたいですね。

■プロパティの値をまとめて書く

.sample{
margin-top:5px;
margin-bottom:10px;
margin-left:15px;
margin-right:20px;
}

 ↓ 1行になりました!

.sample{
margin:5px 20px 10px 15px; /*上、右、下、左*/
}

さらに、上下は同じ値だったり、左右だけ同じなど、状況により下記のように指定する事もできます。

margin:10px; /* 上下左右に10px */
margin:10px 20px; /* 上下に10p、左右に20px */
margin:10px 20px 30px; /* 上に10px、左右に20px、下に30px */

この組み合わせは奥が深く結構いろんな組み合わせがあります。
下記の様に四辺違う色のボーダーにする場合下記の様になりますがこれも同じようにできます。

border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

 ↓ こっちも1行になりました!

border-color: red green blue yellow;

また下記の様に複数の内容を定義することも可能です。
border-top: 3px solid red; /* 3pxの実線を赤色で表示 */

■セレクタのグルーピング

下記のように同じスタイルを複数にする事ってありますよね。

.h2 {
font-weight:normal;
font-family:Georgia, “Times New Roman”, Times, serif;
}

.h3 {
font-weight:normal;
font-family:Georgia, “Times New Roman”, Times, serif;
}

.h4 {
font-weight:normal;
font-family:Georgia, “Times New Roman”, Times, serif;
}

 ↓ まとめちゃいます!

.h2,
.h3,
.h4 {
font-weight:normal;
font-family:Georgia, “Times New Roman”, Times, serif;
}

半角カンマ , で区切ることでグループ化させ複数に適用させます。

■@importで読み込むcssファイル数に制限がある

前に大規模なサイト作成をしたときにcommon.cssを作成し、そこの各ページ毎のcssファイルを読み込ませて作っていたのですが、あるときからcssが反映されていない事が判明。
グーグル先生に聞いてみると、どうやら1ファイル内の@importで読み込めるcssファイル数は31個までで、32個目以降は読み込まないようです。
CSSの構成もしっかり考えないと後から追加できず、結果ごちゃごちゃになっちゃいます。

例:
@charset “UTF-8″;
@import “test01.css”;
@import “test02.css”;
@import “test03.css”;
:
:
@import “test31.css”;
/* ここから読み込まない! */
@import “test32.css”;
@import “test33.css”;

■使いそうなマージン、パディングは予め用意しておく

有名なWEBデザイン会社に勤めている友達に聞いた方法なんですが、ボックスにmarginやpaddingでスペース(余白)を作る際、毎回同じくらいの間隔でスペースを使ったりします。
もちろん、ボックスにmarginやpaddingを定義するのですが、ボックス内に複数画像を並べるときに画像に等間隔でスペースを入れたり、この部分にだけ、もう少しスペースを入れたいなんて事がよくあります。
そこで下記のようなクラスを予め定義しておくことにより、簡単にmarginやpaddingを入れられるようにしています。
僕はいつもスペースを作るときに5px間隔で作ることが多いので下記の様に定義しDreamweaverのスニペットに登録しています。
結構便利で大分助かってます。

/* マージン
——————————————————————- */
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }

/*パディング
——————————————————————- */
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }

こんな感じで、知ってるとちょっとした事で見やすく使いやすくすることができるんですね。
もっと沢山ありますが、それはまた次の機会に!ノシ

コメントを残す