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

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

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

Emmetとは?

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

使い方

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

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

要素がひとつの場合 [ 要素名 ]

記述

展開

 

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

記述

展開

 

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

記述

展開

 

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

記述

展開

 

id名をつける [ # ]

記述

展開

 

class名をつける [ . ]

記述

展開

 

連番をつける [ $ ]

記述

展開

 

対応ツール

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

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

 

Visual Studio Code
Adobe Dreamweaver
Brackets
Atom
vim 等

まとめ

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

この記事を書いた人

だいちゃんdaichan

コーダー兼デザイナー。趣味は音楽、旅行、映画。

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金