22 ホームページ制作基礎講座 Emmet!プラグインの使いかた(adobe Brackets 使って)

スポンサーリンク
Webサイト制作
Yoshiko先生
Yoshiko先生

爆速プラグイン「Emmet!」の紹介です。
これを設定すると入力が非常に楽になります!

EmmetでHTMLのタグを入力してみようっっw

Emment でHTMLのタグ(要素)を入力する場合は、要素名を入力してTabキーを押します。

下記の例だと、 div を入力してからTabキーです。ここまでだったら通常のエディタでもあまり変化はありませんが

EmmetでHTMLのタグを入力してみよう。classに設定するcontent の説明

<div class=”content”>の場合は、div.content Tabキーとなります。

EmmetでHTMLのタグを入力してみよう。

<div> <h1 id=”title”></h1></title>の場合は、div > h1.title となります。

div 要素の中に h1 タイトルその下の行に p要素がある場合は、

div > h1 + p tabキーとなります。

EmmetでHTMLのタグを入力してみよう。h1の入力

ul 箇条書き要素の中にli リスト要素があり、その中にa 要素が入っている行が5行ある場合は

ul > li * 5 > a tabキーとなります。

EmmetでHTMLのタグを入力してみよう。ul>li>a*4

Emment チャートシートのアドレスはこちらです。

Cheat Sheet

Emmet!プラグインの使い方動画はこちらです。

22 ホームページ制作基礎講座 Emmet!プラグインの使いかた(adobe Brackets 使って)
タイトルとURLをコピーしました