Emmet入門

HTML/CSSを効率的にコーディングするためのEmmet記法について見ていきます。
0%
#01 Emmetを使ってみよう
2022年7月12日

VS CodeのVersion: 1.69.0以降にて「!」によるHTMLの雛形が入力できなくなったようです。かわりに「html:5」と打ってからタブキーで入力するようにしてください。

2019年7月25日

このレッスンを理解するには以下も参考にしてみてください。

・詳解HTML 基礎文法編 (全30回)
https://dotinstall.com/lessons/basic_html_tags
・詳解CSS 基礎文法編 (全37回)
https://dotinstall.com/lessons/basic_css_styles
・Visual Studio Code入門 (全13回)
https://dotinstall.com/lessons/basic_vscode

#10 Emmet記法でテキストを囲ってみよう
2021年3月29日

Visual Studio Codeの更新で「Wrap Individual Lines with Abbreviation」が「Wrap with Abbreviation」に統合されたようです。コマンドパレットからは「Wrap with Abbreviation」を呼び出し、同じように操作してみてください。

#12 Emmet記法をカスタマイズしよう
2021年6月14日

1:43〜 で紹介している Extensions Path の設定方法ですが、Visual Studio Code のバージョンアップに伴い設定画面の UI が変更されました。

レッスン動画内では settings.json の編集画面に遷移していますが、現在は以下のように『Add Item』と表示されるようになっています。

01.png

『Add Item』をクリックすると以下のような入力画面になるので、レッスンと同様 ~/emmet と入力してください。

02.png

入力後、OKをクリックすれば設定が完了します。

03.png