WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

【HTML】コーディングに便利なEmmetのアクションまとめ

2020年03月12日

投稿者: TORAT

ホームページ作成やWebサイトの開発をされてる方は、既にご存じのものが多いかもしれませんが、コーディングをする際に便利なEmmetをまとめてみました。
作業効率が上がる便利なものなので、ぜひ使ってみてください。

開発環境

Windows 10
Visual Studio Code、Dreamweaver

Emmetの概要

Emmetは、ショートカットを書いてTabを押すことでコードを展開する仕様になっています。
Emmetを使うと、短い記述を1行書くだけで多くのコードを出力することができます。
自動的に閉じタグも付けてくれるので、繰り返しコードを書いたりコピペする必要がなくなります。

タグのショートカット

早速、Emmetを使用して簡単にコードを書くことができるショートカットを紹介します。
「タグ名」などを記述した後に、Tabを押すだけの簡単な操作です。
「タグ名」や「数値」は自由に変更可能です。

タグの作成

ショートカットを記述してTabキーを押すとHTMLタグに変換されます。

p Tab

<p></p>

div Tab

<div></div>

クラスの付与

.を含めて記述すると、ID名を付与できます。

div.name Tab

<div class="name"></div>

複数のクラス名を付ける場合は、.を連続して記述します。

div.name.title.bold Tab

<div class="name title bold"></div>

IDの付与

#を含めて記述すると、ID名を付与できます。

div#page Tab

<div id="name"></div>

IDとクラス名を同時に記述することもできます。

div.name.title.bold#page Tab

<div class="name title bold" id="name"></div>

隣接

隣り合った要素をまとめて書く場合は+で繋ぐことで、以下のように変換されます。

h1+h2+p Tab

<h1></h1>
<h2></h2>
<p></p>

入れ子

リスト要素など、HTMLの入れ子は>でタグを繋ぐことで、以下のように変換されます。

ul>li Tab

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

繰り返し

*と繰り返したいタグの回数を記述することで、以下のように変換されます。

p*3 Tab

<p></p>
<p></p>
<p></p>

入れ子と繰り返しを同時に使うと、下記のようなリスト要素を簡単に記述できます。

ul>li.list*4 Tab

<ul>
 <li class="list"></li>
 <li class="list"></li>
 <li class="list"></li>
 <li class="list"></li>
</ul>

連番

クラス名などで連番が必要な場合は、$を記述することで、以下のように変換されます。

ul>li.list-$*4 Tab

<ul>
 <li class="list-1"></li>
 <li class="list-2"></li>
 <li class="list-3"></li>
 <li class="list-4"></li>
</ul>

最後に

僕はEmmetを使って、繰り返しの要素を記述する手間や、細かいコピペ作業が減って楽になりました。また、タグの閉じ忘れも防げるので、コーディングの効率化を実感できました。

この記事の投稿者

管理者

TORAT

ロリポップで.htmlのままphpを動かす

2010年11月5日 TORAT

チカッパ 拡張子htmlでphpを動作させる

2010年10月8日 TORAT

コピーライトの年号を自動表示する方法

2014年1月7日 TORAT

久しぶりにie6でレイアウトが崩れたので復習

2011年5月4日 TORAT

ブログ一覧へ

書いた人

WRITERS