3. CSSの短縮した書き方

この章では、CSSの省略記法について紹介します。

省略記法とは?

筆者が勝手にそう呼んでいます。呼び方が正しいかどうかは知りません。ですが、長々と指定しなくとも、複数のプロパティをまとめて指定することができる便利な書き方です。例えば、marginプロパティは、上、右、下、左の順番で値を指定することができます。以下のように書くことができます。

.element {
    margin: 10px 20px 30px 40px;
   /* 上 右 下 左の順番で指定 */
}

ほかにも、padding, borderなど、複数のプロパティをまとめて指定できるものがあります。これらのプロパティを使うことで、コードを短く、読みやすくすることができます。

VSCodeの補完機能を活用することで、CSSの省略記法を簡単に書くことができます。例えば、w100と入力してEnterを押すと、以下のようなコードが自動で生成されます。

.element {
    /*w100*/
    width: 100%;
}

補完を活用する書き方で、多く使うものをいくつか紹介します。

補完	生成されるコード	入力単位	生成されるコード
`w100`	`width: 100px;`	単位は省略	`px`
`h100vh`	`height: 100vh;`	単位:`vh`	`vh`
`m10p`	`margin: 10%;`	単位:`%`	`%`
`p10`	`padding: 10px;`	単位は省略	`px`
`t0`	`top: 0;`	単位は省略	0なので単位なし
`l0`	`left: 0;`	単位は省略	0なので単位なし

このように、補完機能を活用することで、面倒な単位入力などの作業を効率的に進めることができます！

作成:2026-06-15 YGMS_yukkuri