【Visual Studio code】Emmetよく使うものまとめ

HTML & CSS
2020.03.04

VS codeで非常に便利なEmmetですが、私のような初心者でコードを書く練習をしているレベルであればよく使うものは限られています。

備忘録も兼ねて少しずつですがここにまとめておきます。

最初の設定

まずは"html:5"タイプで自動入力されるコードを"en"から"ja"にデフォルトを変更

Macは「code→基本設定→設定」か「⌘＋,」で設定画面。"variables"を検索。"Emmet:Variables"の”setting.jsonで編集”をクリック。

{}内に以下を追記
"emmet.variables": {"lang": "ja"}

よく使うEmmet

プロはもっともっとたくさん使うのでしょうが、とりあえず基本的な構造はこれで分かるかと。

Emmetサイトはこちら

Emmet — the essential toolkit for web-developers
emmet.io

分かりにくいかも知れませんが、コード書いてる部分のイコールより前がタイプする部分です。ですからイコールはタイプしなくて良くて「これをタイプすると？」の意味で＝を付けています。

基本的なタグは「タグ名＋tab」

ほとんどのタグはこれで開始、閉じタグが自動入力される

h2 + tab = <h2></h2>
p + tab = <p></p>
ul + tab = <ul></ul>
li + tab = <li></li>

複数作成する場合

掛け算で何個作るか指示出来る。

h2*3 + tab =
<h2></h2>
<h2></h2>
<h2></h2>

p*3 + tab =
<p></p>
<p></p>
<p></p>

階層は＞を使う

リストを作る際は特に便利。これも掛け算が使える。

ul>li + tab =
<ul>
  <li></li>
</ul>

ul>li*3 + tab = 
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ulの下に（＞）liを３つ（*3）作るの意

Hタグの下にPタグを入れる場合にも使える

h2>p*3 + tab =
<h2>
  <p></p>
  <p></p>
  <p></p>
</h2>

id、classも指定可能

idは＃、classは.(ピリオド)

ul>li#*2 + tab = 
<ul>
  <li id=""></li>
  <li id=""></li>
</ul>

ul>li.*2 + tab =
<ul>
  <li class=""></li>
  <li class=""></li>
</ul>

ulの下に（＞）liをつけて、IDをつけて（#）２つ（*2）作る

連番を打つ

複数作成の際の連番を打つ

ul>li.pic$*4　+ tab ＝
<ul>
  <li class="pic1"></li>
  <li class="pic2"></li>
  <li class="pic3"></li>
  <li class="pic4"></li>
</ul>

ul>li#member$*5 + tab =
<ul>
  <li id="member1"></li>
  <li id="member2"></li>
  <li id="member3"></li>
  <li id="member4"></li>
  <li id="member5"></li>
</ul>

ulの下に（＞）liをつけて、IDを（#）memberで連番にして(member$)５つ（*5）作る

数字の途中から連番をスタートするには

$の後に@（スタート番号）を入れるだけ。

ul>li.class$@4*6 + tab =
<ul>
  <li class="class4"></li>
  <li class="class5"></li>
  <li class="class6"></li>
  <li class="class7"></li>
  <li class="class8"></li>
  <li class="class9"></li>
</ul>

テキストを入れる

{}内はテキストになり、連番を入れるなら$を付ける。

ul>li#member${メンバー$}*5　＝
<ul>
  <li id="member1">メンバー1</li>
  <li id="member2">メンバー2</li>
  <li id="member3">メンバー3</li>
  <li id="member4">メンバー4</li>
  <li id="member5">メンバー5</li>
</ul>

ulの下に（＞）liをつけて、IDを（#）memberで連番にして(member$)テキストをメンバーの連番にして（{メンバー$}）５つ（*5）作る

テーブルなどちょっと複雑な形

加算を使った際、階層が下がっていくのを防ぐ（階層を上げる）のは「＾」

「^」を使わなかったら

table>tr>(th{セル$})*3+tr>(td{セル$@4})*3+tr>(td{セル$@7})*3　+ tab =
<table>
  <tr>
    <th>セル1</th>
    <th>セル2</th>
    <th>セル3</th>
    <tr>
      <td>セル4</td>
      <td>セル5</td>
      <td>セル6</td>
      <tr>
        <td>セル7</td>
        <td>セル8</td>
        <td>セル9</td>
      </tr>
    </tr>
  </tr>
</table>

「^」を使ったら

table>tr>(th{セル$})*3+^tr>(td{セル$@4})*3+^tr>(td{セル$@7})*3　+ tab =
<table>
  <tr>
    <th>セル1</th>
    <th>セル2</th>
    <th>セル3</th>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
    <td>セル6</td>
  </tr>
  <tr>
    <td>セル7</td>
    <td>セル8</td>
    <td>セル9</td>
  </tr>
</table>

どうなってるのか構造が解ればそんなに難しくない

何が何を意味してそのように出力されるのかが解れば、そんなに無茶苦茶難しものでもありませんし、慣れれば思うように使えるようになって、コード書くスピードがすごく早くなりそうですね。

おわりに

自分のメモ的な記事ですが、記録するためどんどん追記していきます。