2022/1/27 （更新日: 2022/2/12）

Emmetの使い方とよく使うパターン【コーディング速度アップへ！】

Emmetの使い方

コーディング速度が遅いんだけど…

そんな悩みにお答えします。

「コーディング速度が遅いなあ」「もっと早くコードを書きたい」と思ったことはないですか？

僕も最初パチパチと1文字1文字入力していましたが、それでは速くはならないですよね。

コーディング速度を上げるためには、スニペット登録、SassやGulpの導入などの方法がありますが、初心者が最初に取り組むべきはタイピング速度を上げること。

そしてもうひとつEmmetの使い方を覚えることです。

それではコーディングをより早く正確にできるようになるEmmetという記法を見ていきましょう。

目次

1 Emmetとは
2 Emmetの紹介
- 2.1 HTML
- 2.2 CSS
  - 2.2.1 プロパティの頭文字+Tab
  - 2.2.2 CSSショートハンド
3 まとめ：できるところから始めよう！

Emmetとは

Emmet（読み：エメット）は、短く略したコードを打つと本来の長いコードに変換されるようにする機能です。

僕が使っている「Visual Studio Code」であれば最初から使用できるように組み込まれているため特別な設定は必要ありません。

今回は「Visual Studio Code」を使っている前提で進めていきます。

なお他のテキストエディタ「Sublime Text」「Atom 」では外部プラグインとして導入することで使えるようになります。

Emmetの紹介

HTML

!（エクスクラメーションマーク）

!を入力してTabキーを押すだけで、以下のようなHTML5の雛形を展開することができます。

なおサンプルでは

<html lang="ja">

となっていますが、デフォルトでは

<html lang="en">

になっています。

ここを毎回書き直すのが面倒な場合は

基本設定→設定

html langの設定

画面右上のここをクリック

html langの設定

するとsettings.jsonがひらきますので、その末尾に

"emmet.variables":{
"lang": "ja"
}

と追加すれば「ja」がデフォルト設定となります。

通常のHTMLタグ

HTMLタグを入力したいときは、HTMLタグ名を入力してTabキーを押します。

これでHTMLタグとして保管されます。

h1と入力してTabキーを押すと以下のようになります。

<h1></h1>

要素>要素

ul>liとすると、ulタグの中にliタグが入るHTMLが作られます。

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

要素*数字

ul>li*3とすると、ulタグの中にliタグが３つ内包されたHTMLが作られます。

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

グループを指定

グルーピングしたいものを()で囲むことができます。

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

要素+要素で隣接

dl>dt+ddとすると、dlタグの中にdtタグとddタグが並列となるHTMLが作られます。

<dl>
  <dt></dt>
  <dd></dd>
</dl>

classの指定

.(ドット)クラス名→Tabとするとclass名をつけることができます。

<div class="test"></div>

idの指定

#（ハッシュ）id名→Tabとするとid名をつけることができます。

<div id="test"></div>

CSS

プロパティの頭文字+Tab

CSSの場合、Emmet記法はプロパティに対して使えます。

「m」をTabで展開すると

margin: ;

「P」をTabで展開すると

padding: ;

となります。

数値は

単位を指定しないと「px」
%は「p」
remは「r」
emは「e」

で展開されます。

CSSショートハンド

よく使うショートハンドを示しておきます。

CSSショートハンド

W100 →　width: 100px;
fz16　→　font-size: 16px;
c#fff　→　color: #ffffff;
mb20 →　margin-bottom: 20px;
p6-10-6-10 →　padding: 6px 10px 6px 10px;
db →　display: block;
dib　→　display: inline-block;
bg#000　→　background: #000;
tac　→　text-align: center;
m0-a　→　margin: 0 auto;
bd1-solid-#0　→　border: 1px solid #000;
por　→　position: relative;
poa　→　position: absolute;

まとめ：できるところから始めよう！

Emmet記法

Emmetのルールをあまりに気にしすぎると、逆に書くのが遅くなったりストレスになったりします。

すべてをEmmetに置き換えようとするのではなく、わずらわしく感じている部分を少し試してみるぐらいの方がいいと思います。

そのうち慣れてくるのでそうしたら少しずつEmmetで書く部分を増やしていけば、知らぬ間にコーディング速度は上がっていくはず。

Emmet化をどんどん増やして爆速コーディングを目指しましょう！

コメントを残すコメントをキャンセル

投稿者トシ