【CSS】のショートハンドまとめてみた【プロパティを一括で指定しよう！】

おはこんばんちわ、たまにデザインすると通常の１７倍くらいストレスがたまるやのっぱです(´・ω・｀)おほー

今回は、後輩にちょっとコーディング手伝わせた時にショートハンド使ってなくて気になったので、CSSのショートハンドについてまとめてみました。

ショートハンド？なにそれ？ショートケーキかなにか？おいしいの？っという方のためにちょっとご説明します。

ショートハンドとは

例）

margin-top: 10px;
margin-right: 8px;
margin-bottom: 6px;
margin-left: 20px;

このように、marginなどは四方向個別に指定できますよね。
しかし、こんなだらだら書くのはかっこ悪いので、スマートに一括指定したのがショートハンドです。

例）ショートハンド版

margin: 10px 8px 6px 20px; /*上 右 下 左の順*/

このように短い記述で同じ指定が出来ます。
スマートになって、かっこいいですよね！←ここ重要

CSSの行数も短くなって、見やすくなります。
全ページのCSSのをstyle.cssなどに全部記述しなくてはいけない時とか、行数多いとうんざりです(´・ω・｀)

それでは、よく使うショートハンドをまとめてみます(´・ω・｀)まとめはじまるよー

margin/padding ショートハンド(指定方法はどちらもいっしょ）

.className {
  margin: 10px 8px 6px 4px; /* 上 右 下 左 */
  margin: 10px 20px 8px;    /* 上 左右 下 */
  margin: 10px 20px;        /* 上下 左右 */
  margin: 20px;             /* 四方向共通 */
}

基本時計回りですね。
この方式は四方向の指定ができるプロパティほぼすべてに使えます。

他の使用可能プロパティ

・border-width(枠線の太さ）

例）

.className {
  border-width: 2px 1px 2px; /* こんな感じ */
}

・border-style(線の種類)

例）

.className {
  border-style: solid dashed double dotted; /* 上:直線 右:破線 下:二重線 左:点線 */
}

・border-color(線の色）

例）

.className {
  border-color: red blue grey green; /* 上:赤 右:青 下:灰色 左:緑 */
}

・border-radius(角丸指定)

※border-radiusは角の指定なので上下左右ではなく、四角の指定にかわります。

例）

.className {
  border-radius: 3px 5px 7px 9px; /* 左上 右上 右下 左下 */
  border-radius: 3px 5px 7px;     /* 左上 右上左下 右下 */
  border-radius: 5px 7px;         /* 左上右下 右上左下 */
  border-radius: 5px;             /* 四つ角共通 */
}

時計回り型ショートハンドはこんな感じでした。

次にbackgroundプロパティのショートハンド

background

例）

.className {
  background-image: url(bgimg.jpg);  /* 画像 */
  background-position: left bottom;  /* 表示位置 */
  background-repeat: repeat-x;       /* 繰り返し */
  background-color: red;             /* 背景色 */
  background-attachment: fixed;      /* scroll(一緒にスクロール)かfixed(画面に固定) */
}

backgrondを分解するとこのようなプロパティにわかれます。

これをショートハンドで記述すると

例）ショートハンド版

.className {
  backgrond: url(bgimg.jpg) left bottom repeat-x red fixed;
}

っとなります。
短くて素敵ですね。
気をつけないと行けないところは、positionの記述ですね。基本、左右 上下の順に記述します。

あと、backgrond-sizeはたぶんショートハンド化は出来なかったと思うので書いてないです。
background-positionと記述がかぶるからだと思われます。

記述順に特に決まりはありませんが、自分なりの順番を決めておくことをおすすめします。

最後にfontのショートハンドです。

font

例）

.className {
  font-style: normal;
  font-variant:normal;
  font-weight:bold;
  font-size:140%;
  line-height:1.6;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

こちら、fontを一括指定できるのですが、他のショートハンドと違って、記述順に注意しなくては行けません。

例）ショートハンド版

.className {
  font:normal normal bold 140%/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

このようにfont-style font-variant font-weightまでは順番は自由なのですが

font-size line-height font-familyはこの順番で記述しないといけません。

僕は面倒いので、fontに関してはショートハンド無しで記述していますね。

fontは別として、padding margin border backgroundはほとんどショートハンドで記述します。
一つだけ指定する場合は個別ですが、２つ以上指定する場合、ショートハンドの記述です。

web初心者の方は別々で書いているかもしれませんが、ショートハンドを使用して見慣れておくことをおすすめします。

現場ではほぼショートハンドですので、読めないと大変ですよ(´・ω・｀)

それでは、良きコーディングライフを～(・ω<)ﾉｼ