絶対絶対使おうEmmet

(一緒に読んでほしい→AtomエディタからVScodeエディタに乗り換えた理由)
Emmet使ってますか？
先に言っておきますがEmmetを使わない理由はないと私は思っています
(htmlでタイピング練習←→RubyなどEmmetを使わないところをタイピング練習しようという気持ち)
Emmetのチートシートhttps://docs.emmet.io/cheat-sheet/
使い方は一番下を参考にしてください

VS Codeで
EmmetでHTML雛形展開でenをjaに直してる人
設定を開いて設定のjsonファイルに
"emmet.variables": {
        "lang": "ja"
    },

これを足すんだ〜

Emmetとはなにかなにができるかとりあえずみてみよう！

まず！マークを入力そしてCtrl と e を押すと(Atomの場合)

！マークが一気にhtmlの形に大変身

更にリスト形式で使うものにも魔法をかけます

 最後の＊3 は li要素を3つという意味でこうなります

Emmetは最初から入っていなくてパッケージでEmmetと検索してインストールしてくださいね！

しかし前に紹介したVS codeはすごかったそもそもEmmetが入っている！！

 ！マークを入力してTabを押す(VS codeはTab)

ででん！！　
なにも入れなくてもここまでできるVS codeがすごいのは前にも記事書いた通り

他にもEmmetは入力パターンを簡潔に書けるように工夫されているのでぜひ使えるようになりましょう！
チートシートでよく使うものをピックアップしてPCの近くにプリントアウトしたものを張るとかが手っ取り早い活用法だと思います
同時にhtmlの構造パターン＋要素の作り方もまとめてプリントアウトしておけばかなりWebページ制作の時間を短縮できて
別のことに時間をかけれると思います
似たようなことをBootstrapでもできるのでhtmlとcssのスピードがあげられるかも

チートシートhttps://docs.emmet.io/cheat-sheet/

こちらが参考になりますが少しCSSは難易度高め
Emmetを始めるのにとりあえずこれだけ～