【CSS】脱初心者!ショートハンドでプロパティを一括指定しよう

【CSS】脱初心者!ショートハンドでプロパティを一括指定しよう

CSSのプロパティには一括でまとめられるショートハンドというものが使えるプロパティがいくつかあります。

ショートハンドを憶えてレベルアップしちゃいましょう!


まとめて記述できるものはまとめよう

CSSでプロパティを記述しているとmargin-right:0px;やらmargin-bottom:10em;やらの記述が多くなってしまいます。

そうなると同じプロパティだらけになって目的の部分を探しにくくなってしまいます。

…-leftとか…-topといった記述は確かに楽なんです。

「トップだけ変えたいからtopだけでいいか」なんて思って作ってたら、やっぱり横も調整しなきゃダメだ!なんて時の為に、プロパティをひとまとめに書けるショートハンドの記述に慣れてしまいましょう!

ショートハンドの説明

web用語辞典 - ショートハンド

ショートハンドとは、CSSにおいて値を簡略化できる記法のこと。

ショートハンドは最初はクセがあって使いにくいのですが、使う事で目的の箇所を変更する時に見つけやすくなります。

ショートハンドなしだとこんなに見づらい…

試しにショートハンドなしでborderプロパティを記述してみました。

[css]
.hoge1 {

border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;

}

.hoge2 {

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;

}

[/css]

なんか長いし!細かいし!

どこを修正したらいいかパッと見じゃわからないですね。

borderをショートハンドで記述したら見やすくなった!

上記の例をショートハンドで記述してみました。

[css]

.hoge1 {

border-bottom : 1px dotted #ccc ;

}

.hoge2 {

border : 1px solid #ccc ;

}

[/css]

うん。スッキリした :)

他のプロパティもショートハンドで記述できる

borderの他にもちまちまとひとつずつプロパティを書かなくてもOKなスタイルがあります。

これらを憶えて一気にレベルアップです!

background

text-indent:-9999px;の使用が非推奨になってからは頻繁には使ってないですがショートハンドでまとめて記述ができます。

ショートハンドなし

[css]

.hoge_bg {

background-color: #FFF;
background-image:url(../img/bg.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll;

}

[/css]

ショートハンドあり

[css]

.hoge_bg {

/*color image repeat postion attachmentの順で記述*/
background : #FFF url(../img/bg.gif) no-repeat top left scroll;

}

[/css]

list-style

リストスタイルは基本的にはlist-style:none;と記述する事が多いのですが、ショートハンドで細かく設定ができます。

ショートハンドなし

[css]
.hoge_list {

list-style-type: circle;
list-style-image: url(../img/list.gif);
list-style-position: inside;

}

[/css]

ショートハンドあり

[css]

.hoge_list {
/*type image postionの順に記述*/
list-style: circle url(../img/list.gif) inside;

}

[/css]

margin

marginのショートハンドは少しクセがあり、値の数によって対応する箇所が変わってきます。

marginとpaddingはよく使うスタイルなのでしっかりと覚えたいと思います。

ショートハンドなし

[css]
.hoge_margin {

margin-top:0;
margin-left:10px;
margin-right:10px;
margin-bottom:1em;

}
[/css]

ショートハンドあり

[css]
.hoge_margin01 {

/*上下左右に対応*/
margin:0;

}

.hoge_margin02 {

/*上下 左右の順に対応*/
margin:0 10px;

}
.hoge_margin03 {

/*上 左右 下 の順に対応*/
margin:0 10px 1em;

}

.hoge_margin04 {

/*上 右 下 左の順に対応*/
margin:0 10px 1em 10px;

}

[/css]

値が1つか2つの時は感覚でわかるのですが、3つ、4つとなると難しくなります。

4つの時は単純に「時計回り」になっていると覚えてしまいましょう:)

padding

paddingのプロパティはmarginのプロパティと同じ記述方法です。

ショートハンドなし

[css]
.hoge_padding {

padding-top:0;
padding-left:10px;
padding-right:10px;
padding-bottom:1em;

}
[/css]

ショートハンドあり

[css]
.hoge_padding01 {

/*上下左右に対応*/
padding:0;

}

.hoge_padding02 {

/*上下 左右の順に対応*/
padding:0 10px;

}
.hoge_padding03 {

/*上 左右 下 の順に対応*/
padding:0 10px 1em;

}

.hoge_padding04 {

/*上 右 下 左の順に対応*/
padding:0 10px 1em 10px;

}
[/css]

font

ショートハンドなし

[css]
.hoge_font {

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size/line-height: 100%
line-height:1.4em;
font-familly: Osaka, verdana, sans-serif;

}
[/css]

ショートハンドあり

[css]
.hoge_font {

/*[font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]の順*/
font:italic small-caps bold 100%/1.4em Osaka,verdana,sans-serif;

}
[/css]

[font-size] [font-family]の値は必ず設定しないとダメだったりと使い勝手が悪いかもしれません。

まとめ

一括して指定できるプロパティって結構多いですね。

記述を抜いた部分は自動的にデフォルト値になります。 ただしfontプロパティは必ず入れなければいけないプロパティがあるので要注意です。

sw2xはfontの一括指定は知りませんでした…

まとめられるプロパティは一括して記述していけば見やすいCSSコードが書けるようになるので積極的に使いたいですね。

個人で作るものに関しては、ショートハンドなしでの記述に慣れているのであればなしでも構わないと思います。