【Emmetで爆速コーディングCSS編①】エメットの使い方を習得して素早く効率的にコーディングしよう！
こんにちは！IMG-FLOWでコーディングやECサイトの運用保守を担当しているmuu(むぅ）です。
今回はコーディングのスピードアップや効率化することができるEmmetのCSS編をご紹介したいと思います。
EmmetのHTML編に関しては、別記事 「Emmetで爆速コーディング【HTML編】 で詳しく紹介していますので、興味がある方はぜひ参考にしてみてください！
INDEX
Emmet 使い方の基本（css編）
cssもhtmlと同じように省略記法を記述した後tabキーを押すと展開することができます。
例えば、以下のようなcssを書きたい場合、
|
display: block; |
以下のような省略記法で展開することができます。
|
d:b+w100p+m0-a+fw:b+c#f00+bd+bgc#ff0+po:a+z100! |
上記のように、見比べてみると、タイプ数が圧倒的に少ないですよね！
慣れないうちは少し難しく感じるかもしれませんが、かなり効率的にコーディングできることが分かると思います。
では、上記の省略記法について、順番に詳しく見ていきましょう。
プロパティ
先ほどの省略記法の例でいうと、以下の赤字部分「d」「w」「m」「fw」「c」「bd」「bgc」「po」「z」がプロパティになります。
|
d:b+w100p+m0-a+fw:b+c#f00+bd+bgc#ff0+po:a+z100! |
| 省略記法 | 展開後 |
| d | display: ; |
| w | width: ; |
| m | margin: ; |
| fw | font-weight: ; |
| c | color: ; |
| bd | border: ; |
| bgc | background-color: ; |
| po | position: ; |
| z | z‐index: ; |
上記でご紹介した以外にもたくさんの省略記法があります。
|
すべて網羅したチートシートも公開されています。もっとエメットを極めたい方はチートシートも参考にしてみてください！ |
値・単位・色指定
プロパティの値にも省略記法を使用することができます。以下赤字部分が、その値になります。
|
d:b+w100p+m0-a+fw:b+c#f00+bd+bgc#ff0+po:a+z100! |
基本的にはCSSを書く時の同じように「：」で区切って書き、値の頭文字が省略記法となることが多いです。
数値と色の値を書く際は「：」を省いても展開可能です。
| 省略記法 | 展開後 |
| d:b | display: block; |
| w100p | width: 100%; |
| m0-a | margin: 0 auto; |
| fw:b | font-weight: bold; |
| c#f00 | color: #f00; |
| bd | border: 1px solid #000; |
| po:a | position: absolute; |
| z100 | z-index: 100; |
値の複数指定
「margin:0 auto」のように複数の値を指定したい場合は、「m0-a」のように「-」（ハイフン）で繋ぎます。
| 省略記法 | 展開後 |
| m0 | margin: 0; |
| m0-a | margin: 0 auto; |
| m10-0-20 | margin: 10px 0 20px |
| m10-0-20-10 | margin:10px 0 20px 10px |
ちなみにVScodeでは「m10-a-20」を展開すると、「margin: 10px auto -20px;」と「auto」の後ろの値が「ー（マイナス）」の値になってしまいます。。。
こちらは解決方法が分かれば、またご紹介したいと思います。
単位の指定
「w100」を展開した際の単位は基本的にpxになりますが、数字の後ろに単位の頭文字を記載することで、使いたい単位を指定できます。
| 省略記法 | 展開後 |
| w100 | width: 100px; |
| w100p | width: 100%; |
| w100e | width: 100en; |
| w100r | width: 100rem; |
色の指定
色を指定する場合はプロパティの後に「＃」を記述し、続けてカラーコードを指定します。
色によっては、さらに省略した書き方ができます。
もちろん、省略せずに普通に指定しても大丈夫ですよ！
| 省略記法 | 展開後 |
| c#f | color: #fff; |
| c#fefefe | color: #fefefe; |
| c#123abc | color: #123abc; |
!important
スタイルの優先度を高くする「!important」は、省略記法「!」を展開することで、簡単に追記することができます。
|
d:b+w100p+m0-a+fw:b+c#f00+bd+bgc#ff0+po:a+z100! |
| 省略記法 | 展開後 |
| z100! | z-index: 100 !important; |
さいごに。。。
今回は、より効率的に楽しくコーディングするために覚えておきたいCSSのエメットについて紹介させていただきました。
CSSのエメットは、HTMLのエメットに比べて少し難しく感じるかもしれませんが、いつも普通に記述していたものを１つでも多く、２つでも多く、エメットに置きかえて記述することで、少しずつコーディングスピードアップを目指せると思います！
より簡単なHTMLのエメットについて知りたい方は別記事 「Emmetで爆速コーディング【HTML編】でご紹介していますので、ぜひ参考にしてみてください。
それでは、最後までご精読いただき、ありがとうございました！
また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！
デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。