acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

その他のショートハンドプロパティ

ads

2007/11/27 初稿

CSSコーディングの効率を上げ、短いコードを書くためにはショートハンドプロパティを使用します。

普段のコーディングではああまり使わないであろうショートハンドプロパティのfont、border-width、border-color、border-style、list-style、outlineについて解説します。

fontは指定順に厳しく個別に書く方が指定ミスが減り、後から見直す際も簡単なのでショートハンドよりは個別に書いたほうが賢明です。また、省略不可能な部分があるので注意が必要です。
サイズと行間は半角spaceで区切るのではなく/で区切るのでここも注意が必要です。

font: スタイル スモールキャップ 太さ サイズ /行間 種類
normal
italic
oblique
normal
small-caps
100-900
normal
bold
bolder
lighter
px
em
%
/数字
/px
/em
/%
メイリオ
MS ゴシック
など
省略 可能 可能 可能 不可能 可能 不可能
初期値 normal normal normal
400
ブラウザ依存 ブラウザ依存 ブラウザ依存

border-width、border-color、border-styleの指定順序です。borderはmargin、paddingと同じように指定できます。
指定が4つの場合は上から右回りになります。
省略しますが、指定が2つの場合はbackgroundと同様に左右、上下の順になり、指定が1つの場合はすべての辺が同じ値になります。

border-width:
px
em
px
em
px
em
px
em
border-color:
#ffffff #ffffff #ffffff #ffffff
border-style:
solid
double
dashed
dotted
none
groove
ridge
inset
outset
solid
double
dashed
dotted
none
groove
ridge
inset
outset
solid
double
dashed
dotted
none
groove
ridge
inset
outset
solid
double
dashed
dotted
none
groove
ridge
inset
outset

list-styleです。
タイプは大半の場合ブラウザリセットでnoneに指定されているでしょうし、 画像はliのbackgroundで出すことが多いので使いどころが微妙です。

list-style: タイプ 画像 場所
none
disc
circle
decimal
square
upper-roman
lower-roman
upper-alpha
lower-alpha
url(01.png) outside
inside
初期値 disc   outside

最後にoutlineです。
ブラウザの:focusがサポートが必要です。IE7ではサポートされていません。
また、borderとプロパティは同じですがoutlineなので線の種類は4辺統一となり辺ごとの指定はありません。

outline: 線幅 線種
px
em
solid
double
dashed
dotted
none
groove
ridge
inset
outset
#ffffff
省略 可能 可能 可能
初期値 ブラウザ依存 solid ブラウザ依存
Copyright (C) acky. All Rights Reserved.