emmet
マリンロード

2015.12.3HTML/CSS 

マリンロード

[第①弾] DreamWeaverの便利機能 ーEmmet編ー

こんにちは(*^U^)
マリンロードスタッフの佐藤です。

さてさて、今回のブログは前回ご紹介したDreamWeaverの機能をもっと詳しくご紹介していきます!!
まず第①弾は「Emmet」について。

みなさまはEmmetご存知でしょうか?
知ってる人も知らない人も、とりあえずおさらいしてみましょう!

■Emmet(エメット)とは・・・

エディタの機能拡張で、主にHTML/CSSの作成をサポートするプラグイン。
DreamWeaver以外にも様々なエディタに対応している。
もともとは「Zen-Coding」という名前だったが、2012年9月ごろから「Emmet」に名称変更された。

独自の省略記法を使ってコーディングが高速化できちゃいます。

ズラズラ説明してもわかりにくいと思いますので、
今までのコーディングとEmmetを使ったものを見てみましょう!(DreamWeaver使用)

ごくごく普通のHTMLコーディング

1

はぁ。。。長くてめんどくさいですね。
これが・・・・

Emmetを使用したHTMLコーディング

2

こうなります!

どうですか?断然Emmetの方が早いですよね。

■Emmetの使い方

Emmetの速さをお分かりいただいたところで、次は詳しい使い方&書き方を紹介します。
Emmetは以下で紹介するコードを記述した後、tabキーを押すことでコードに展開できます。 エディタによって設定が異なるみたいなので、確認してみてください。

入れ子 「>」

同階層 「+」

上の階層に戻って展開 「^」

繰り返し 「*」

IDとclassの付与 「#」「.」

グループ化 「()」

連番 「$」

テキストを入れる 「{text}」

属性の付与 「[attr=”value”]」

いや〜、とっても便利ですね!
Emmet、早速使って見ましょう。
慣れてくるとこれなしでは生きていけなくなりそう。

それではみなさまも良きEmmetライフを!

( ´∀`)ノ 次回はExtract機能についてです。ではまた〜

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ