Emmetの扱い方-CSS編
【こちらの記事は、約4分程でお読みいただけます。】
こんにちは、水曜日のブログ担当の工藤です。
前回に引き続きEmmetのCSSの書き方について解説していきます。
とはいっても、数が多すぎるためよく使うものをピックアップして紹介していきます。
CSSをEmmetで転換する
エディッタを使っていた場合、コードヒントは表示されますがEmmetを使用することで、さらにコーディングのスピードを上げる事が出来ます。
.sample{
m-10-5+p1vh-2em-3rem-4%
}
上記のようなコードを転換すると、下記のコードに変換してくれます。
.sample{
margin: -10px 5px;
padding: 1vh -2em -3rem -4%;
}
こちらのEmmetは、エディッタのプラグインを入れてなくてもcssPenのサイトで試すことが出来るので、試してみて気に入ったら導入してみるとよいでしょう。
基本
基本的にCSSプロパティの頭文字二文字目ぐらいまでを転換すると、該当するプロパティになってくれる事が多いです。
数が多いためすべては紹介出来ませんが、よく使うプロパティを紹介します。
.sample{
bg
p
m
f
cl
f
po
d
}
.sample{
background: #000;
padding: ;
margin: ;
font: ;
clear: both;
font: ;
position: relative;
display: block;
}
ショートハンド系は、更に一文字加えると
.sample{
bgi
bgs
bgr
bga
bgp
}
.sample{
background-image: url();
background-size: ;
background-repeat: ;
background-attachment: ;
background-position: 0 0;
}
プロパティを加えるなら
.sample{
por
poa
pof
pos:s
}
.sample{
position: relative;
position: absolute;
position: fixed;
position: static;
}
このように転換してくれます。慣れないうちは大変ですが覚えていくと法則性が見えてきて勘で書けるようになっていきます。
マージンとパディングのショートハンド
マージンとパディングのEmmetは大変便利なので、是非使いこなせると時間短縮になります。
.sample{
ml
mr
mt
mb
}
.sample{
margin-left: ;
margin-right: ;
margin-top: ;
margin-bottom: ;
}
[/cpde]
ショートハンドは、【-】で繋げます。
単位は記述しなければ、px。%やemなども可能です。
.sample{
m5-10
m1-auto
m1-2-3-4
}
.sample{
margin: 5px 10px;
margin: 1px auto;
margin: 1px 2px 3px 4px;
}
その他の転換
!important
!で!importantに転換出来ます。
.sample{
tar!
}
.sample{
text-align: right !important;
}
メディアクエリ
@mでメディアクエリに転換出来ます。
@m
@media screen {
}
終わりに
Emmetを使えば、コードを書く時間も短くすみます。
また、非常に簡単なのですぐに覚えれると思いますが、はじめからEmmetに頼って書いてしまうと本来のタグを思い出せなくなったりするので、2,3ヶ月はEmmetに頼らないで書くことをオススメします。
これは、便利なエディッタでも同じですがコードヒントなどを頼りにしすぎて本来の単語を忘れたりしてしまうので、勉強したての頃は覚えるつもりでコードを一字一句打っていくと、覚えるのも早くなるかと思います。
