50代からのHTML / CSS / JavaScriptチャレンジNo.85 emmet

こんにちは～今日はemmetについて学習をします。が、じつは番外編の方でもやってるんですよねぇ・・・ただ、個人的には消化不良を起こしてるので、こちらでも講座の内容どおりに進んでいこうと思ってます。番外編と内容がかぶるところが多々あると思うのですが、読まれている方にとっては申し訳ありません。

そもそもEmmetとは？

簡単に言うと、htmlを簡単に書くための記法。で、このemmetは別にVScodeでしか使えないわけじゃない。対応したエディタで使うか、各エディタ用のプラグインがあるので、これをインストールして使う形になるんだって。

で、VScodeは、標準でemmetに対応しているので、特になにもしなくてもemmetがすぐに使える状態になっているんだって。（便利じゃん！）

そしたら、実際にemmetと使ってみたいと思います。VScodeを立ち上げてメニューから新規ファイル→index.htmlと名前を付けて、とりあえず、今回はデスクトップに保存するかぁ。そしたら、ファイルを作成をクリック。

それじゃemmetを使っていくんだけど、まずはh1と入力してみる。そしたら、emmet省略記法ってでてくると思うんだけど、エンターかTabキーかもしくは、クリックしてみる。これだけで、<h1></h1>のタグが一気に展開される。慣れるまで大変だと思うけど、HTMLをできるだけ簡単に書けるようになるんだね。

あと注意しないといけないのは、例えば、h1と入力したのに、emmet省略記法が出てこない時があるんだけど、たいてい、ファイルがhtmlになってないのが原因。要は言語モードがhtmlのモードになってないとこのemmet記法は使えない。

あと、emmet記法は一機に入力しないと出てこない時があるんだって。要は書き直したりするとemmet記法が出てこないらしい。そんな時は一番最後の文字を消して、入力しなおすのがいいらしい。

というわけで、今日からしばらく、こっちでもemmetの学習をしていきます。お疲れ様でした＾＾