非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

VSCodeでEmmetを使ってみた(ざっくりレビュー)

   

最近話題になり始めているHTMLやCSSを省略文法で記述できるEmmet記法ですが、僕が使っているVSCodeでも標準装備されているとのことで早速使ってみました。

広告

最初の準備

特にプラグインを必要としませんが、最初に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ほど大きくなく、記号によっては思い出して書くより、一から書いた方が早いなんてことが慣れないうちはありそうです。

慣れればガンガン書いていくでしょうけど。

公式のチートシートがあるので確認しておくと良いでしょう。

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript, アプリ・サービスレビュー