今回は、前回ご紹介した「【HTML編】最低限知っておくと楽なEmmet」のCSS編についてご紹介していきます!
Emmetって何?という方は前回の記事を参考にしてください!
※展開の仕方はHTML同様、Tabキーで展開されます。
それでは早速説明していきます!
CSS編
プロパティの展開
CSSでは、プロパティと値の頭文字をつなげて展開する形多いです!
例)w100、h100、tdnをそれぞれ展開すると・・・
body{
width: 100px;
height: 100px;
text-decoration: none;
}
となります。長いプロパティもEmmetであっという間にかけちゃいますね!
単位の展開
よく使う単位の指定は最初の文字だけで展開することが可能です!
何も単位を指定せずに展開するとデフォルトでpxが付くようになります。
例)m5、m5p、m5e、m5rをそれぞれ展開すると・・・
body{
margin: 5px;
margin: 5%;
margin: 5em;
margin: 5rem;
}
となり、簡単に単位を指定することが出来ました!
複数の指定
+で複数のプロパティを展開できます。
例)w100+m100p+tdn+c#fffを展開すると・・・
body{
width: 100px;
margin: 100%;
text-decoration: none;
color: #ffffff;
}
+を入力するだけでそれぞれ展開せずに済みますね!
-で値を複数指定できます。
例)p5-10-0-20+m0-aを展開すると・・・
body{
padding: 5px 10px 0 20px;
margin: 0 auto;
}
-でつなげることが出来るので、いちいち単位を指定する必要もありません!
ベンダープレフィックス
例)-bdrs15を展開すると・・・
body{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
-を前につけることで一気に記載できてとっても楽ですね!
以上、最低限知っておくと便利なEmmet【CSS編】でした!
HTMLに続き、CSSでもEmmetをフル活用して、楽で早いコーディングをしていきましょう!