Emmetの使用(2)

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

「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

nishida at 2022年08月04日 10:00:00

アプリ関連ニュース

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

tel. 06-6454-8833（平日 10:00～17:00）