正しいショートハンドの書き方のまとめ

• 2016/03/04
• 2013/09/22
• Webデザインテクニック
• css, ショートハンド

コピペ用、ショートハンドのまとめです。
まずはややこしい【background】プロパティから。

【background】 〜color・image・repeat・position（x/y）/ size〜

#WebDesign-ABC{
  background: #ABCABC url(../images/JUN_Always_Be_Cool.jpg) no-repeat fixed left top / 123px 456px;
}

最後の【background-size】は、autoも使用可です。
【background】のショートハンドの詳細は『こちら』

次はよく使うけど覚えられない【border】プロパティ。

【border】 〜width・style・color〜

/*四辺が同じ場合*/
#WebDesign-ABC{
  border: 1px solid #ABC;
}

/*四辺それぞれがバラバラな場合*/
#WebDesign-ABC{
  border-width: 0 1px 2px 3px;  /* top right bottom left 以下全部同じ*/
  border-style: none dotted dashed solid;
  border-color: red green blue #ABC;
}

/*border-radiusの場合*/
#WebDesign-ABC{
  border-radius: 0 1em 2em 3em;  /* 左上、右上、右下、左下 */
}

borderついでに、これはショートハンドとは関係ないですが、border-styleプロパティの種類もいつもどれがどれか忘れるので、ついでに書いておきました。次はborder-colorの色々な書き方も。

【border-color】について

下の（↑）4つは、それぞれ全部に指定しないと違いがわかりにくそうなので、全部 border-width:10px; border-color:red; で、
border-styleだけ変えたのを作ってみます。

う〜ん。これでもわかりにくい。ちなみにブラウザ毎で見え方はぜ〜〜〜んぜん違うので、色んなブラウザで見てみてください。
そうそう。このborderのプロパティ、width、style のプロパティを省略すると、ボーダーの表示がなくなるようですので、ボーダーを指定する場合は、border-width、border-style の省略をしないようにした方がよいようです。

では次。使用時、注意が必要な【font】プロパティ。

【font】 〜style・weight・size/line-height・familly〜

#WebDesign-ABC{
  font: italic bold 1em/1.5 Arial, sans-serif;
}

ちなみに【font】プロパティのショートハンドは、他のショートハンドよりも記述順や省略可能な個別プロパティ等が厳密に定められているため、利用しない方がコード量が少なくなったり、色々と上書きされてややこしくなるようなので、ショートハンドは使用せず、bodyに簡単なものを使用し、あとは個別に記述して行く方がよいようです。

【margin】と【padding】プロパティ。これはおまけかもしれませんが、一応書いておきます。

【margin】と【padding】〜top・right・bottom・left〜

#WebDesign-ABC{
  margin: 0 auto 2px auto;/* top right bottom left */
  padding: 0 1px 2px 3px;
}

とりあえずこんなものかな？
まだまだありそうですが、また追加して行きます。

このサイトを参考にしました。
https://developer.mozilla.org/ja/docs/Web/CSS/Shorthand_properties