コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。
何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。
目次
EmmetでHTMLのタグを入力してみようっっw
Emment でHTMLのタグ(要素)を入力する場合は、要素名を入力してTabキーを押します。
div のあと TABキー で開始と終了タグ
![EmmetでHTMLのタグを入力してみよう。classに設定するcontent の説明](https://fukuokamiyako.com/wp-content/uploads/2020/12/01ac8f302d0c39e8a193564c5e28c582-1024x831.png)
div.content のあとTabキー
![EmmetでHTMLのタグを入力してみよう。](https://fukuokamiyako.com/wp-content/uploads/2020/12/59a2a40c3c6a77d9feec7d732344dd37-1024x545.png)
div>h1.title のあとTabキー で<div><h1 class=”title></h1></div>
![](https://fukuokamiyako.com/wp-content/uploads/2020/12/f88e97a001520752f944d09e5d84f2f0-1024x552.png)
div 要素の中に h1 タイトルその下の行に p要素がある場合
div > h1 + p tabキーとなります。隣接セレクタの要領です。
![EmmetでHTMLのタグを入力してみよう。h1の入力](https://fukuokamiyako.com/wp-content/uploads/2020/12/d7a8ddec48a38acfe86e95e1a574d2c7-1024x542.png)
ul 要素の中にli 要素があり、その中にa 要素が入っている行が5行ある場合
ul > li * 5 > a tabキーとなります。行数が多い時はかなり時短になります。
![EmmetでHTMLのタグを入力してみよう。ul>li>a*4](https://fukuokamiyako.com/wp-content/uploads/2020/12/08ae1d3b6e2e14d44ccc0a20a4b81030-1024x390.png)
覚えておくと便利なEmmentの時短一覧
入力後TABキー | HTML |
---|---|
a | <a href=””></a> |
a:link | <a href=”http://”></a> |
link:css | <link rel=”stylesheet” href=”style.css”> |
meta:vp | <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
img | <img src=”” alt=””> |
form | <form action=””></form> |
fig | <figure></figure> |
figc | <figcaption></figcaption> |
ul>li*5>a | <ul> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> </ul> |
! | <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> </head> <body> </body> </html> |
Emment チャートシートのアドレスはこちらです。
あわせて読みたい