Emmet記法

PENGIN BLOGさんでEmmet記法という存在を知ってから、ドットインストールでEmmet入門の動画があることを発見したので早速視聴しました!

Emmet記法とは、VSコードに備わっている、コードを書くうえでのショートカットキーのようなものです。ワードやエクセルでショートカットキーを使ったことはありましたが、VSコードにもそんな便利なものがあると、少し前の私はその存在すら知りませんでした。

初めてのデザインカンプの時に、スペルミスや打ち間違いが多く(タグの位置がズレていたり、ダブルクォーテーションがなかったり)少なからずストレスを感じていたので、Emmet記法を習得することによって少しでもこれが改善されればと期待しています。

コーディングでは毎回開始タグや終了タグ、クラス名やID名も「class=””」「id=””」から何度も書いていたので、そこに注力しなくて良くなりました!貴重な勉強時間の中でいかに効率よくやっていくかを常に感じているので(子どもを育てるようになって強く感じるようになりました)、Emmet記法を上手に使いこなして、全体のコーディングやググること、考えることなど、本当に注力すべきことに時間を割いていきたいと思います。

始めはうまく書けないこともあると思いますが、今のうちから慣れておきたいと思います。

Emmet記法の凄さを動画で実感したら、プロパティや要素名を一生懸命暗記しなくても良いんだな、とも感じました。気になる方は調べてみてください。ドットインストールの動画は上級者向けの動画もありました。勉強し始めた頃で、無料で学ぶなら、PENGIN BLOGさんがサイトでまとめてくれる記事を読むだけでも十分だと思います↓

PENGIN BLOGさんの方ではチートシートを配布していました↓リンクを貼っておきます↓

https://crestadesign.org/emmet/

この記事を書いた人