トップページ > TIPS > CSSのショートハンド

CSSレイアウト[TIPS]

CSSのショートハンド

CSSでは複数のプロパティ値を一括にまとめて短く記述することができ、これをショートハンドと言う。
ショートハンドの書き方の作法を覚えてしまえば、自分の記述もスッキリするし、人が書いたCSSを見る時には何の記述かすぐにわかってタメになる。

CSSのショートハンドのひとつは、プロパティ名を省略し、値のみを「スペース」で区切って書く方法。
これができるプロパティは「background」「border」「font」。

ほかに、上下左右の値を1行にまとめて指定する方法がある。
これができるプロパティは「margin」「padding」「border-style」「border-width」「border-color」。
backgroundのショートハンド
#body {
background-color: #FFF;
background-image:url(../img/bg.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll;
}

背景に関する5つのプロパティを全部指定すると、右のように5行になる。
これをショートハンドでまとめると、下記のように1行にすることができる。

※background-attachment:の値は「fixed」と「scroll」。
「fixed」にすると背景はスクロールしないで固定される。
「scroll」では、通常通り本文と一緒にスクロールする

#body {
background : #FFF url(../img/bg.gif) no-repeat top left scroll;
}
それぞれの値のあいだに、スペースがはいっていることに注目。値はスペースで区切る。
borderのショートハンド
border : style (スペース) width (スペース) color;
border-bottom, border-top, border-right, border-leftにも同様にショートハンドで指定できる。

（例）border : solid 1px #CCCCCC ←上下左右全部のボーダーを、実線で線幅1pxでカラーは#CCCCCC
（例）border-left : solid 2px #999999 ←左ボーダーを、実線で線幅2pxでカラーは#999999
fontのショートハンド

fontのショートハンドでは、必ず「font-size」と「font-family」が必要。
「line-height」を指定する時は必ず「font-size」のあとに「/ (スラッシュ)」を入れて直後に記述する。行間は文字サイズが無いと指定できないと覚えること。
「font-style」「font-variant」「font-weight」は必ず「font-size」より前に書く。
「font-family」は必ず最後に書く。

font :  style (スペース) variant (スペース) weight (スペース) size (/スラッシュ) line-height (スペース) family;

（例）font : italic bold 90%/2em "Times New Roman", Times, serif;
↑イタリックのボールドで、サイズは90％で行間は2文字分、書体はTimes New Roman、無ければTimes系かセリフ系の書体

ちなみに、文字色はどうした？と思うあなた。
文字の色のプロパティは「color」。これだけはfontプロパティから独立している。font-colorというプロパティは無い。HTML文書にとって文字の色は基本中の基本だからだと思う。

上下左右の値を1行にまとめる指定

「margin」「padding」「border-style」「border-width」「border-color」に使用できるショートハンド。
一定の法則を覚えてしまえば便利。

値が1つ = 上下左右の全部同一の値である事を表す。
（例）margin: 0px;（マージンは上下左右全部0px）
2つ = 上下と、左右の値である事を表す。
（例）border-color: #000000 #CCCCCC（ボーダー色は上下が黒で、左右は薄いグレー）
3つ = 上、左右、下の値である事を表す。
（例）padding: 0px 10px 30px（paddingは上が0、左右が10px、下が30px）
4つ = 上から始まる時計回りで上、右、下、左の値である事を表す。
（例）margin: 0px 0px 10px 30px（マージンは上と右が0pxで、下が10px、左は30px）
（例）border-width: 0px 0px 1px 5px（ボーダー幅は、上と右は無しで、下が1px、左が5px）
ページの最上部へ