HTMLやCSSを記述する時に、Emmetは使っていますか?
Emmetを使えば、コーディングのスピードが劇的に速くなります。
Emmetとは?
HTMLやCSSを省略して書ける記法のことです。
例えば、以下のHTMLを書こうとすると、あなたはどうやって書きますか?
<ul>
<li><a href="test1.html">test01</a></li>
<li><a href="test2.html">test02</a></li>
<li><a href="test3.html">test03</a></li>
<li><a href="test4.html">test04</a></li>
<li><a href="test5.html">test05</a></li>
</ul>
Emmetで書くと以下のようになります。
ul>li*5>a[href=test$.html]{test$$}
なんと1行で済んでしまいます!
イメージが湧きにくいと思いますので、動画も載せておきます。
VisualStudioCodeでの使い方
VisualStudioCodeは標準でEmmetに対応しています。
Emmetの記法で書くと、サジェストで展開されたコードが表示されますので、Enterを押すと、変換されます。
ショートカットなら「Ctrl + E」で展開されます。
Emmetの基本
主な記法
>は子要素
【展開前】
p>span
【展開後】
<p><span></span></p>
+は要素の並列
【展開前】
【展開後】
+は要素の並列
【展開前】
p+p
【展開後】
<p></p>
<p></p>
*は複数
【展開前】
ul>li*5
【展開後】
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
^は1つ上の階層
【展開前】
ul>li*5^p
【展開後】
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
.はクラス
【展開前】
.box
p.text
【展開後】
<div class="box"></div>
<p class="text"></p>
※タグ名を書かずに先頭に.を書くと、divタグになる。
#はID
【展開前】
#container
【展開後】
<div id="container"></div>
[]は属性
【展開前】
img[src=pic.jpg]
【展開後】
<img src="pic.jpg" alt="">
{}は要素の内容
【展開前】
p{テキストテキスト}
【展開後】
<p>テキストテキスト</p>
CSSのEmmet使用例
EmmetはCSSのプロパティでも使えます。
例えば、text-aligin:center; であれば頭文字を取って「tac」と書きます。
【展開前】
h1 {
tac
}
【展開後】
h1 {
text-align: center;
}
CSSのEmmet使用例
【展開前】
h1 {
m10-15-10-15
p10-20
mr10
tac
fz30
lh1.5
c#fff
bg#000
w100
h50
}
【展開後】
h1 {
margin: 10px 15px 10px 15px;
padding: 10px 20px;
margin-right: 10px;
text-align: center;
font-size: 30px;
line-height: 1.5;
color: #ffffff;
background: #000000;
width: 100px;
height: 50px;
}
CSSのEmmetはめちゃくちゃ便利です!
是非使いこなして、コーディングスピードを上げていきましょう!
スポンサーリンク