Emmetを使ってHTML/CSSを楽に書こう!

スポンサーリンク
プログラミング
まさき君

HTMLとCSSを書き始めたんだけど、いっぱい文字を打たないといけなくて大変だ…

これじゃあ完成する前に疲れちゃうよ。セミ君、何かいい方法は無い?

セミ君
セミ君

そんな時はEmmetを使ってみよう!

HTMLやCSSを作成していると、とにかくたくさんタイピングします。

タイピング数が増えると疲れますし、タイプミスも発生しがちで面倒ですよね。

しかしこの記事で紹介するEmmetを導入すれば、タイピング数を削減することが可能です!

この記事でわかること

・Emmetとは?

・Emmetの導入について(Brackets・Atom)

・Emmetの基本

Emmetとは?

EmmetはHTMLとCSSを簡単に書けるようにするプラグインです。

Emmet独自の方式で記述をして、Tabキーを押して変換します。

Visual Studio Codeは最初からEmmetが入っていますが、他のエディタの場合自分で導入する必要があります。

Emmetの導入

セミ君
セミ君

まずはEmmetをエディタに入れないとね!AtomとBracketsへの導入方法を紹介するよ。

Brackets

①「拡張機能マネージャー」を開きます。

②「入手可能」タブを開きます。

③検索ボックスにemmetと入力します。

④Emmetの「インストール」ボタンをクリックします。

Atom

①画面上部の「ファイル」→「環境設定」の順に押します

②「Settings」タブの左側にある「Install」を押します

③検索ボックスに「emmet」と入力します

④emmetの「Install」ボタンを押します。

Emmetの基本

Emmetは導入できたよ!セミ君、さっそく使い方を教えてよ!

セミ君
セミ君

OK!まずは基本的なところからいくよ!

HTML

ポイント

・要素名をTabキーで展開する

・「要素名.class名」や「要素名#id名」でクラスやidを付与できる

・「>」と「^」と「+」で階層を指定

・「要素*任意の数字」で要素を複製できる

要素名をTabキーで展開

h1と打ってTabキーを押すと<h1></h1>となります。

他の要素でも同様です。

要素名にclassやidを付与できる

div.main-contentと打ってTabキーを押すと

<div class=”main-content”></div>となります。

div#main-contentならば、

<div id=”main-content”></div>となります。

特にclassの付与は多用するので覚えておきましょう!

複数のclassを付与したい場合は、

div.item.item2と打つと、

<div class=”item item2″></div>となります。

まさき君

classの付与って結構面倒だったからすごく助かるよ!

セミ君
セミ君

うんうん、僕もこれは多用してるよ!

「>」と「^」と「+」で階層を指定

ポイント

・「>」は階層を1つ下げる

・「^」は階層を1つ上げる

・「+」は同一階層に要素を増やす時に使う

実際に試してみましょう。

例:div>img+p^div

例を展開すると上のようになります。

セミ君
セミ君

上は例だから「^」を入れてみたけど、今のところあまり使ってないよ。最初のうちは「>」と「+」の使い方を覚えておけばいいと思うな!

まさき君

なんか複雑そうだし、慣れるまではそうするよ!

「要素*任意の数字」で要素を複製

例:ul>li*3

例を展開するとこうなります。

まさき君

ひたすらコピペしてたリストがこんなに簡単に作れるなんて!

セミ君
セミ君

メニューを作るときに重宝するよ!

応用編

今までの例を応用してよくありそうなリストを作ってみます。

例:ul>li.list-item*3>a>img+p

上の例を展開するとこうなります。

まさき君

Emmetを使うとこんなに少ない文字数で書けるんだね!

セミ君
セミ君

驚くのはまだ早いよ、次はCSSだ!

CSS

ポイント

・プロパティの頭文字を記述してTabキーで展開

・内容の指定もできる

プロパティの頭文字を入力して展開

text-alignならばtaと入力してTabキーです。

プロパティの内容の指定

頭文字の後に内容をつけてTabキーです。下の表は例になります。

展開前展開後
dbdisplay: block;
dibdisplay: inline-block;
op0.7opacity: 0.7;
tactext-align: center;
m0-automargin: 0 auto;
dfdisplay:flex;
fdrflex-direction: row;
fdcflex-direction: column;
w100%width: 100%;
fz1.2remfont-size: 1.2rem;
poaposition: absolute;
porposition: relative;
まさき君

HTMLほどの感動はないけど、こっちも便利そうだね!

セミ君
セミ君

「塵も積もれば山となる」だよまさき君!

まとめ

タイピング数を削減できるプラグイン「Emmet」をご紹介しました。

Emmetの記述方式を覚える必要はありますが、慣れるとHTML/CSSを書くのがとっても楽になります。特にクラスの付与やリスト作成!

HTML/CSSを書いているならぜひ試してみてください!

おまけ

Emmetは公式のチートシートがあります!(英語です)

うまく展開できないプロパティがあったら調べてみましょう!

Emmet公式チートシートページへ(外部サイト)
タイトルとURLをコピーしました