Chapter 04

冬休み#2: イメットってなんすか

Ampoi
Ampoi
2021.12.25に更新
このチャプターの目次
  1. Emmetを使ってみよう！！
    1. Emmetを使える例

こんにちはWebサイト制作班班長です。この章ではEmmetというVScodeでHTML&CSSを書くときに使える裏技を紹介したいと思います。イメットの画像

Emmetを使ってみよう！！

EmmetはVScodeにデフォルトでインストールされているので追加で何かをダウンロードしたりする必要や設定をしたりする必要はありません。
具体的に使う方法としては以下にあげた例を入力してTabキーを押すことで使います。
(divやa・hogeは他の要素・文字に置き換えても構いません)

Emmetを使える例

div.hoge => <div class="hoge"></div>

div#hoge => <div id="hoge"></div>

div>a => <div><a href=""></a></div>

div*3
=><div></div>
  <div></div>
  <div></div>

<!--div*xでx回div要素を追加する-->

今回は僕の気力的によく使う3つだけを紹介しましたが、これ以外にもHTML・CSSでたくさん使える例があるのでぜひこちらのサイトから見てみてください!