VSCodeでEmmetを使ってみた（ざっくりレビュー）
最近話題になり始めているHTMLやCSSを省略文法で記述できるEmmet記法ですが、僕が使っているVSCodeでも標準装備されているとのことで早速使ってみました。
[ad#top-1]
最初の準備
特にプラグインを必要としませんが、最初にhtml形式で保存しておく必要があります。まっさらな.txtファイル上では有効になりません。
HTML編
まず、まっさらなところから、html:5と書いて、「Tab」か「Enter」キーを押してみましょう。
あっという間に、htmlのひな型が現れます。これは便利ですね。
bodyタグ内にtable>tr>th+tdと打ってみましょう。
tableタグが現れます。
今度はnav>ul#menu>li*3>aと打ちます。
navigationのひな型が現れました。
かなり省略してHTMLを記述することができそうです。
まだまだ種類はいっぱいありますが、HTMLの記述にはかなり役立ちそうです。
CSS編
今度はCSSです。
headタグ内にstyleと打ちましょう。
styleタグが現れました。この中に記述していくわけですね。
fsz12ptと打つと…
フォントサイズ12ptが設定できます。
ちなみに、linkと打つと、
cssファイルの外部リンクを設定するタグが現れました。
CSSもいろいろ用意されています。基本は1行ずつ書くようになっているようです。
使った感想
たしかに書く文字をかなり省略できるので、使わない手はありません。
ざっくり思ったのは、HTMLの記述にはかなり便利だけどCSSはそうでもない、といったところでしょうか。CSSは記号→展開の文字量はHTMLほど大きくなく、記号によっては思い出して書くより、一から書いた方が早いなんてことが慣れないうちはありそうです。
慣れればガンガン書いていくでしょうけど。
公式のチートシートがあるので確認しておくと良いでしょう。
[ad#ad-1]
スポンサーリンク