Emmetの使用(2)

今回はHTMLマークアップを効率的に記述することができる
Emmet(エメット)を紹介したいと思います。
本記事は前回の「Emmetの使用(1)」の続きとなります。

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

「h1」と入力して「TABキー」で以下が生成されます。

<h1></h1>


classを付与する場合は「.」のあとにclass名を指定します。
例えば、「h1.title」と入力して「TABキー」で以下が生成されます。

<h1 class="title"></h1>


bootstrapなどのcssフレームワークを使用する場合は
大量のclassを指定する必要がありますが、そのような場合
classを連結して指定すると便利に使用できます。

例えばbootstrapボタンの場合
「button.btn.btn-sm.btn-danger」と入力して「TABキー」で以下が生成されます。

<button class="btn btn-sm btn-danger"></button>


さらにcssフレームワークで多用されるdivは
省略することも可能です。
divを省略しないでclassを指定する場合、
「div.row」と入力して「TABキー」で以下が生成されます。

<div class="row"></div>


divを省略して、class名だけを指定した場合も同様の結果が得られます。
例えば以下のように「.row」と入力して「TABキー」だけで以下が生成されます。

<div class="row"></div>


木曜日担当:nishida



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム