ショートハンドプロパティを使いこなす

|

ショートハンドプロパティとは、1つのプロパティタグを使用して複数のプロパティ値を指定するプロパティのことです。よくわからないと思うので、サンプルを交えながら説明していきます。

1.margin関連プロパティを一括指定する

marginでは個別にtop、bottom、left、rightを指定することができますが、これをmarginというショートハンドプロパティを用いることで一括で指定できます。

その際、以下のような組み合わせで指定できます。

CSSコード

/* 上下左右、全て10px */
margin:10px;

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

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

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

2.padding関連プロパティを一括指定する

paddingもmarginと全く同じなので説明は割愛します。

CSSコード

/* 上下左右、全て10px */
padding:10px;

/* 上下10px、左右20px */
padding:10px 20px;

/* 上10px、左右20px、下30px */
padding:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
padding:10px 20px 30px 40px;

3.list-style関連プロパティを一括指定する

list-styleではtype、image、positionを指定できます。省略したものは初期値が指定されます。順番も順不同です。

大抵、typeとimageのどちらかを指定し、あまりposionも変更することはないと思うので、以下のような使い方が多いかと思います。

CSSコード

list-style:none;

4.background関連プロパティを一括指定する

backgroundではcolor、image、repeat、position、attachmentを指定できます。省略したものは初期値が指定されます。順番も順不同です。ただし、posionは横軸、縦軸の順に指定します。

CSSコード

background:transparent url(img.gif) no-repeat 0 100% fixed;

5.border関連プロパティを一括指定する

borderには上下左右のwidth、style、colorを指定できます。そのため、様々なショートハンドプロパティがあります。

CSSコード

/* 線の幅が上1px、右2px、下3px、左4px */
border-width:1px 2px 3px 4px;

/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;

/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;

/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;

/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;

/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;

/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;

/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;

6.font関連プロパティを一括指定する

font-style、font-variant、font-weight、font-size/line-height、font-famillyの順で指定できます。line-heightはfont~で始まらないし、直前に「/」を入れないといけないので注意が必要です。

fontに関するショートハンドプロパティはあまりお勧めしません。なぜならプロパティの数も多い上に順番が決まっているからです。ただし、font-style、font-variant、font-weightの3つは順番を入れ替えて指定できます。順番を間違えてしまうとCSSが適用されないので注意です。

また、フォントの太さと種類は省略不可です。

CSSコード

font:italic small-caps 100%/1.4 Osaka, verdana, sans-serif;

このページに関連する記事

最近のブログ記事