まとめて書くことができるCSSプロパティ

元ネタはこちらから
まとめて書くことができるCSSプロパティの8つのパターン

---

1. border

まずはボーダーです。よく使いますね。

• border-width　…　線の太さ
• border-style　…　線の種類
• border-color　…　線の色

これらは一括で指定することができます。

記述する順番に決まりはありません。

続いてはこちら。

上下左右すべて同じの線の場合は一括で指定できます。

• border-top　…　上のボーダー
• border-right　…　右のボーダー
• border-bottom　…　下のボーダー
• border-left　…　左のボーダー

最後にこんな使い方も

書く順番を間違えると赤のボーダーになってしまうので気をつけましょう。

2. background

これもよく使いますね。

• background-color　…　背景色
• background-image　…　背景画像
• background-repeat　…　背景画像の並べ方（repeatで繰り返し、no-repeatで繰り返しなし、repeat-xで横方向、repeat-yで縦方向）
• background-position　…　背景画像の表示位置（水平方向、垂直方向の順で指定。「left top」「5px 3px」など）
• background-attachment　…　背景画像をスクロールさせるかどうか（scroll（初期値）かfixed）

これら背景に関するプロパティを一括して指定することができます。

必要のないものは省略することもできて、並べる順番も特に決まりはありません。

3. font

個人的にはあまり使っていないです。

• font-style　…　イタリック体（italic）と斜体（oblique）を指定。初期値はnormal（標準）です。
• font-variant　…　スモールキャピタルを指定。small-caps を指定すると、アルファベットの小文字の部分が「大文字を縮小したような形」で表示されます。
• font-weight　…　フォントの太さ。
• font-size　…　フォントサイズ
• line-height　…　行の高さ
• font-family　…　フォントの種類

あまり使うことのないプロパティもありますが、これらをまとめることができます。line-heightが含まれていることに違和感を覚えるのは私だけでしょうか。

「行の高さ（line-height）」を指定する場合は、「サイズ（font-size）」の後にスラッシュ（ / ）を入れ、その後に記述します。

font-size、line-height、font-familyは順番を守る必要がありますが、その他順番は自由です。

フォントサイズとフォントの種類以外は省略可能です。

4. padding、margin

よく使いますね。というか略さず書くことはほとんどないです。

4方向とも違う場合です。

次は左右が一緒で上下が違う場合です。

上下と左右がそれぞれ一緒の場合です。

最後はすべて同じ場合です。

5. ul、ol、li

今度はリストです。

• list-style-type　…　マーカーの種類（disc、circle、squareなど）
• list-style-position　…　マーカーの表示位置（outside（初期値）かinside）
• list-style-image　…　マーカーを画像で表示

画像を指定した場合はマーカーの種類（disc、circle、squareなど）より優先して表示されます。

順番に決まりはありません。省略した場合は初期値になります。

6. border-radius

ここからはCSS3です。まずはborder-radiusから。略さず使うほうが珍しいかなと思います。

長くなって面倒ですね。

時計回りに左上、右上、右下、左下の順に指定します。

paddingなんかと同じように、値を省略することも可能です。略した場合は以下のルールとなります。

• 左下が省略された場合には、左下が右上と同じ
• 右下以降が省略された場合には、右下が左上と、左下が右上と同じ
• 右上以降が省略された場合には、すべて左上と同じ

こうやって言葉にすると逆に分かりにくいかもしれませんが、対角線上の角と同じようになるというイメージでいいのかなと思います。

7. transition

個人的によく使うtransition。hover時の変化を滑らかにします。

• transition-property　…　適用するプロパティ（初期値は「all」）
• transition-duration　…　変化にかかる時間（初期値は「0」）
• transition-timing-function　…　変化の仕方（初期値は「ease」）
• transition-delay　…　変化がいつ始まるか（初期値は「0」）

省略した場合は初期値になります。「1s」など時間を指定した最初の値はtransition-durationに割り当てられ、 2番目の値はtransition-delayに割り当てられます。

画像で説明するとこんな感じです。

 

transitionは対応していないブラウザもありますので注意が必要です。

transitionについては、以前書いた「CSS3のtransitionとtext-shadowで作る様々なリンク装飾」や「CSS3のtransition-timing-functionの動きをサンプルで理解しよう」をぜひご覧ください。

8. animation

対応するブラウザが少ないためまだまだ使いどころが難しいです。

• animation-name　…　アニメーション名
• animation-duration　…　アニメーション1回分の時間の長さ（初期値は「0」）
• animation-timing-function　…　アニメーションの動き方（初期値は「ease」）
• animation-delay　…　アニメーションが何秒目から開始するか（初期値は「0」）
• animation-iteration-count　…　繰り返す回数（初期値は「1」）
• animation-direction　…　反転再生するかどうか（初期値は「normal」）

省略した場合は初期値になります。

もちろんアニメーションの内容は別途記述する必要があります。

こんな感じですね。