

・効率よくスマートにコーディングをしたい!
今回はHTML、CSSなどのコーディング作業を爆速になる!?
「Emmet」という入力を補助するプラグイン(拡張機能)について紹介していきます!
ボリュームが多いのでHTML編とCSS編で分けて書きます^^


Emmetとは
HTMLやCSSの入力を補助するプラグイン(拡張機能)のコトで、
ショートカットキーのように省略してくれるので入力回数を減らすことができる結果、速度が上がります!
まずEmmetに対応しているエディタソフトを使う必要があります。
- Visual Studio Code (VSCode)
標準で搭載
- Dreamweaver
標準で搭載されたますが使用するのに設定が必要。 - Sublime Text
拡張機能を追加する必要あり - Atom
拡張機能を追加する必要あり
- Brackets
拡張機能を追加する必要あり


Emmetの使い方
では、使い方を解説していきます。
使用したいテキストを打ってTabかEnterを打つだけ!
HTMLのEmmetを使ってみよう!
「!」の1文字でTabを打つだけでHTML5の基本構文が打ち終わっちゃいます^^
<!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>

<p></p>
classやidを付けたい場合
たとえば、pタグにクラスを付けたい場合は「.」、idの場合は「#」を使います!
<p class="lead"></p>
<p id="lead"></p>
ちなみにclassを複数つけたい場合は「.」で繋げて記述していきます!
<p class="lead lead2 lead3"></p>
pタグ内に文字をいれたい場合は{}を使います!
<p class="lead">テキストが入ります</p>
今回はpタグで紹介しましたが、divの場合はタグを省略して書くことが出来ます^^
<div class="classbox"></div>
ここまでが基本的なEmmetの紹介でした!
応用も書いていきます。
応用編
ネスト(入れ子)の書き方
「>」をいれてあげると入れ子になります!
<nav> <ul> <li></li> </ul> </nav>
同じ要素の繰り返し
liタグなど複数繰り返したい場合は「*」と「数字」を入力すればOK!
<nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav>
要素に連番をつける
「$」を使う事で連番になります!
<li class="list-1"></li> <li class="list-2"></li> <li class="list-3"></li>
隣接要素
「+」で繋げると隣接要素になります!
<h1></h1> <p></p>
1つ上の要素に戻る
「^」で上の要素に戻ります!
<div> <h1></h1> <p></p> </div> <ul> <li></li> <li></li> <li></li> <li></li> </ul>
グループ化
()で囲むとグループ化にできます!
<div> <h1></h1> <p></p> </div> <ul> <li></li> </ul> <ul> <li></li> </ul>
Emmetコード一覧(HTML)
使えそうなEmmet用コード集(HTML)をまとめてみました^^
a |
<a href=””></a>
|
a:mail |
<a href=”mailto:”></a>
|
link |
<link rel=”stylesheet” href=””>
|
link:css |
<link rel=”stylesheet” href=”style.css”>
|
script |
<script></script>
|
img |
<img src=”” alt=””>
|
input |
<input type=”text”>
|
input:c |
<input type=”checkbox” name=”” id=””>
|
input:r |
<input type=”radio” name=”” id=””>
|
input:f |
<input type=”file” name=”” id=””>
|
input:s |
<input type=”submit” value=””>
|
input:i |
<input type=”image” src=”” alt=””>
|
input:b |
<input type=”button” value=””>
|
textarea |
<textarea name=”” id=”” cols=”30″ rows=”10″></textarea>
|
btn:s |
<button type=”submit”></button>
|
btn:r |
<button type=”reset”></button>
|
fig>figc |
<figure>
<figcaption></figcaption> </figure> |
ifr |
<iframe src=”” frameborder=”0″></iframe>
|
sect |
<section></section>
|
art |
<article></article>
|
hdr |
<header></header>
|
ftr |
<footer></footer>
|
mn |
<main></main>
|
ol |
<ol></ol>
|
ul |
<ul></ul>
|
dl |
<dl></dl>
|
div |
<div></div>
|
table |
<table></table>
|
まとめ
ここまでの使い方を覚えて実践していけば、
けっこうな時短になるはずっ
慣れるまでが少し大変ですが、試してみる価値は十分あります!!


コメント