Emmetを使って爆速コーディング!【HTML編】

Emmetを使って爆速コーディング!HTML版
・HTML、CSSのコーディングに慣れてきたから速く打ちたい!
・効率よくスマートにコーディングをしたい!

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

CSS編の記事はこちら

[template id="3834"] ・HTML、CSSのコーディングに慣れてきたから速く打ちたい! ・効率よくスマートにコーディングをしたい! このようなお悩みの人におすすめのEmmet【CSS】をご紹介します![…]

Emmetを使って爆速コーディング!css編
ゆうくん
覚えたらだいぶ速くコーディングが出来るよ!
スポンサーサイト

Emmetとは

HTMLやCSSの入力を補助するプラグイン(拡張機能)のコトで、
ショートカットキーのように省略してくれるので入力回数を減らすことができる結果、速度が上がります!

まずEmmetに対応しているエディタソフトを使う必要があります。

おすすめエディタ
  • Visual Studio Code (VSCode)
    標準で搭載
その他のエディタ
  • Dreamweaver
    標準で搭載されたますが使用するのに設定が必要。
  • Sublime Text
    拡張機能を追加する必要あり
  • Atom
    拡張機能を追加する必要あり
  • Brackets
    拡張機能を追加する必要あり
ゆうくん
僕はVSCodeを愛用してます!
VSCodeだと標準ですぐに使用できるので、とても重宝してます^^
VSCodeのインストール方法はこちら

[template id="3834"] コーディングを始めたいけど、 どのエディタを使っていいかわからないや・・・ とお悩みのコーディングを始めたい人におすすめの 無料コードエディタ「VSCode」についてと導入方[…]

コードエディターはVSCodeは一番使いやすい、インストール方法と使い方を紹介

Emmetの使い方

では、使い方を解説していきます。
使用したいテキストを打ってTabEnterを打つだけ!

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
<p></p>

classやidを付けたい場合

たとえば、pタグにクラスを付けたい場合は「.」、idの場合は「#」を使います!

p.lead
<p class="lead"></p>
p#lead
<p id="lead"></p>

ちなみにclassを複数つけたい場合は「.」で繋げて記述していきます!

p.lead.lead2.lead3
<p class="lead lead2 lead3"></p>

pタグ内に文字をいれたい場合は{}を使います!

p.lead{テキストが入ります}
<p class="lead">テキストが入ります</p>

今回はpタグで紹介しましたが、divの場合はタグを省略して書くことが出来ます^^

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

ここまでが基本的なEmmetの紹介でした!
応用も書いていきます。

応用編

ネスト(入れ子)の書き方

>」をいれてあげると入れ子になります!

nav>ul>li
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

同じ要素の繰り返し

liタグなど複数繰り返したい場合は「*」と「数字」を入力すればOK!

nav>ul>li*4
<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

要素に連番をつける

$」を使う事で連番になります!

li.list-$*3
<li class="list-1"></li>
<li class="list-2"></li>
<li class="list-3"></li>

隣接要素

+」で繋げると隣接要素になります!

h1+p
<h1></h1>
<p></p>

1つ上の要素に戻る

^」で上の要素に戻ります!

div>h1+p^ul>li*4
<div>
    <h1></h1>
    <p></p>
</div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

グループ化

()で囲むとグループ化にできます!

(div>h1+p)+(ul>li)*2
<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>

まとめ

ここまでの使い方を覚えて実践していけば、
けっこうな時短になるはずっ

慣れるまでが少し大変ですが、試してみる価値は十分あります!!

ゆうくん
ぜひ覚えてみてね!
最後までお読みいただきありがとうございましたっ!!
このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^
CSS編の記事はこちら

[template id="3834"] ・HTML、CSSのコーディングに慣れてきたから速く打ちたい! ・効率よくスマートにコーディングをしたい! このようなお悩みの人におすすめのEmmet【CSS】をご紹介します![…]

Emmetを使って爆速コーディング!css編