まとめて書くことができるCSSプロパティの8つのパターン

先日は基本的なセレクタの使い方について書きましたので、今度はプロパティの基本ということでまとめてみました。

1. border

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

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

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

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;

border-left: 1px solid red;

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

続いてはこちら。

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

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

border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;

border: 1px solid red;

最後にこんな使い方も

border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid blue;

border: 1px solid red;
border-right: blue;

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

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）

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

background-color: #f5f5f5;
background-image: url: url(img/bg.png);
background-repeat: repeat-x;
background-position: left top;
background-attachment: scroll;

background: #f5f5f5 url(img/bg.png) repeat-x left top scroll;

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

3. font

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

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

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

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 120%;
font-family: "ＭＳ Ｐゴシック";

font: italic normal bold 80%/150% "ＭＳ Ｐゴシック";

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

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

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

4. padding、margin

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

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

padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 3px;

padding: 10px 5px 8px 3px;

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

padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;

padding: 10px 5px 8px;

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

padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;

padding: 10px 5px;

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

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

padding: 10px;

5. ul、ol、li

今度はリストです。

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

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

list-style-type: disc;
list-style-position: inside;
list-style-image: url(sample.png);

list-style: disc inside url(sample.png);

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

6. border-radius

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

border-top-left-radius: 3px;
border-top-right-radius: 4px;
border-bottom-left-radius 5px;
border-bottom-right-radius: 6px;

長くなって面倒ですね。

border-radius: 3px 4px 5px 6px;

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

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

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

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

7. transition

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

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

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0s;

transition: width 1s linear 0s;

省略した場合は初期値になります。「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」）

animation-name: slide;
animation-duration: 16s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;

animation: 'slide' 16s ease 0s infinite normal;

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

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

@keyframes 'slide' {
   0% { top: 20px; left: 10px; }
 100% { top: 50px; left: 20px; }
}

こんな感じですね。

animationの使い方については、以前書いた「CSS3のanimationを使ったWebKit系対応の画像スライドの作り方」をぜひご覧ください。

最後に

ということでまとめて書くことができるCSSプロパティを思いつくだけ集めてみました。

ひょっとしたら他にもあるかもしれません。

前半は基本的すぎる内容で、後半はブラウザによっては使えないプロパティということですがお役に立てたなら幸いです。