Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは、水曜日のブログ担当の工藤です。

今日は、複数のCSSプロパティをまとめて表記するショートハンドについて解説していきます。

ショートハンドとは

CSSには、細かく分類されています。
例えばmarginなら、
margin-left
margin-right
margin-top
margin-bottom
があります。

これらを一括で表記することが出来、ショートハンドと呼びます。

#sample{
  margin-top: 26px;
  margin-right: 10px;
  margin-bottom: 18px;
  margin-left: 20px;
}

このようなプロパティなら

#sample{
  margin: 26px 10px 18px 20px;
}

marginプロパティだけで上下左右を指定出来ます。
見やすくなりますし、容量の節約にもなります。

書き方は、値の後に半角スペースで値、半角スペース、値、半角スペースといった書き方になります。

すべて別の単位にすることも可能です。

#sample{
  margin: 10% 1em 2rem 1pc;
}

順番に意味のあるショートハンド

margin,padding,border,border-radius

これらのショートハンドは、順番が重要になります。

marginとpadding

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

4回記述すると、上 右 下 左の順で指定します。上から時計回りと覚えておくとわかりやすいでしょう。

3回記述すると、上 左右 下で指定します。真ん中の数値が左右両方が同じ数値になります。（padding: 10px 10px 10px; ならpadding: 10px 10px 10px 10px; と同義）

2回記述すると、上下が一緒の数値、左右が一緒の数値。
1回だけ記述すると上下左右すべて一緒の数値になります。

コンテンツを真ん中に寄せるのに使う

margin: 0 auto;

は、上下に0。左右はautoで判定させています。これをショートハンドを使わないで記述すると

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
↓
margin: 0 auto 0 auto;

と同義ということです。

border

borderには、border-width,border-style,border-colorの3つがあります。

border: 1px solid red; /* 1pxの赤い直線*/

border-width

線の太さを指定します。

border-top-width: 10px;
border-right-width: 3px;
border-bottom-width: 5px;
border-left-width: 7px;
↓
border-width: 10px 3px 5px 7px; /*上10px 右3px 下5px 左7px */

border-style

線のスタイルを指定します。

border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: dotted;
↓
border-style: solid dotted dashed; /*上:直線 左右:破線 下:点線 */

border-color

線の色を指定します。

border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;
↓
border-color: red blue green yellow /*上:赤色 右:青色 下:緑色 左:黄色 */

border-radius

角丸の指定です。

border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 20px;
↓
border-radius: 10px 5px 20px 8px /* 左上10px 右上5px 左下20px 右下8px*/

順番を指定しないショートハンド

list-style,background

list-style

list-style-type,list-style-position,list-style-imageをまとめて指定出来ます。

list-style-type: circle;
list-style-position: inside;
list-style-image: url(point.gif);
↓
list-style: circle inside url(point.gif);

background

background-attachment,background-color,background-image,background-position,background-repeat,background-sizeをまとめて指定出来ます。

background-position: center top;
background-repeat: no-repeat;
background-image: url(background.jpg);
↓
background: url(background.jpg) no-repeat center top;

部分的に位置に意味があるもの

font

font-style,font-variant,font-weight,font-size,line-height,font-familyをまとめて指定出来ますが、厳格なルールがあります。

• font-style,font-variant,font-weightは、font-sizeの前に記述しないと無効になる。
• line-heightは、font-sizeの後に『/』で記述しなければいけない
• font-familyは、最後に記述しなければいけない
• font-familyは、必ず記述しなければいけない
• 直接指定していない場合でも、初期値に上書きされてしまう

なので、fontに関しては、ショートハンドを使うとかえって記述が多くなることがあります。
たとえば、font-sizeを変更したいだけなのに、ほかの値を記述しないと初期値に戻ってしまうのでかえって長くなってしまう可能性があります。

font-weight: bold;
font-size: 12px;
line-height: 1.6;
font-family: serif;
↓
font: bold 12px/1.6 serif;

終わりに

ショートハンドを使えば、コードが短くなります。
スタイルガイドでも、paddingやmarginでショートハンドが使える場合は必ず使うようにする。などといったルールが付けられます。
Dreamweaverなら、ショートハンドを自動で記述してくれる機能なんかもあります。

ショートハンドを利用して、短くきれいなコードを書けるように頑張りましょう。

Tweet

Pocket

Related posts:

フロートを解除して通常フローに戻すクリアプロパティー いろいろと便利なoverflow:hidden;についてのあれこれ before、afterを使ってコーディングの幅を広げよう Boostrapを使ってレスポンシブのグリッドシステムを扱ってみましょう