タイ研修いってきました
2021.06.17

【Emmet】省略記法でコーディングを効率化【HTML/CSS】

  • このエントリーをはてなブックマークに追加

Emmetとは?

EmmetとはHTMLやCSSを省略記法で簡潔に記述するためのツールです。エディター向けのプラグインとして用意されています。使いこなせればマークアップの作業効率がぐんとあがります。

使い方

Emmetでは、省略記法で記述した後、ショートカットキー(基本的にはTabキー)を使ってHTMLやCSSのコードに変換します。Emmetではこのことを「展開」と言います。ショートカットキーはエディターによって異なりますが設定によって変更可能です。

いくつか紹介していきます。

要素ひとつを入力 [ 要素名 ]

記述

展開

 

要素をネストさせる場合 [ > ]

記述

展開

 

同じ要素を繰り返す [ * ]

記述

展開

 

HTMLのテンプレートを出力 [ ! ]

記述

展開

 

id名をつける [ # ]

記述

展開

 

class名をつける [ . ]

記述

展開

 

 

連番をつける [ $ ]

記述

展開

 

対応ツール

下記ダウンロードページを見ていただくと主要なエディターでは大体使えます。

ダウンロードページ : http://emmet.io/download/

 

Visual Studio Code
Adobe Dreamweaver
Brackets
Atom
vim 等

まとめ

いかがだったでしょうか。 意外と簡単に覚えられるかと思います。 慣れてしまえばコーディングがどんどん早くなりますよ。

この記事を書いた人

だいちゃんdaichan

コーダー。趣味は音楽、旅行、DIY、ゲーム。

  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

売れてるサイトはこんなに違う。
イキツケ制作所