こんにちは。櫻井です。
今回はEmmetというHTMLとCSSの開発を手助けしてくれるとても便利なツールの使い方について実際にHTMLを構築をしながら説明しようと思います。最終的に以下のような簡単なheader構造をEmmetで構築することを目標にやっていきたいと思います。
<header class="l-header">
<h1 class="l-header_logo"><img src="./img/logo.png" alt="LOGO"></h1>
<nav class="l-header_nav">
<ul class="l-header_nav_item_wrapper">
<li class="l-header_nav_item"><a href="">menu1</a></li>
<li class="l-header_nav_item"><a href="">menu2</a></li>
<li class="l-header_nav_item"><a href="">menu3</a></li>
</ul>
</nav>
</header>
EmmetはCSSのセレクタと似たような構文を使ってHTMLを生成することができます。
例えばCSSで
div>pと記述した場合div要素の中のp要素にスタイルがあたりますよね。
Emmetの場合は
div>p
と記述してショートカットキーを押してHTMLを展開させた場合
<div>
<p></p>
</div>
といった形になります。Emmetでは、div要素の中にp要素がある形でHTMLを生成してくれます。また、要素を<>で囲んだりする必要はありません。CSSも<>で囲まないしちょっと似てますよね。
では、例で出した「>」から紹介していきます。
子要素を作る>
>は例で挙げたように「div>p」という書き方をするんですが「>」は「左の要素(例だとdiv)の中に右の要素(例だとp)を作る」という処理をしてくれています。なので例えば
section>div>h2
これを展開した場合
<section>
<div>
<h2></h2>
</div>
</section>
こんな感じになります。
これでもうheaderの中にh1を入れる構造はできますね。
header>h1
と記述するだけです。まだまだ完成は遠いですね。次はh1要素の兄弟要素になるnav要素を作りましょう。
兄弟要素を作る+
>を要素の間に入れた時は右のものを子要素にしましたが、+でつなげると兄弟要素になります。例えば
div+p
展開した場合は
<div></div>
<p></p>
このようになります。これでh1要素の兄弟要素のnav要素を入れられますね。この二つだけでもかなり完成形に近づいたんじゃないでしょうか？
header>h1+nav>ul>li>a
これをを展開すれば
<header>
<h1></h1>
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
</header>
このようになります。かなり近づいてきましたね。Emmetを知らなかった方は記入量の少なさにおどいているんじゃないでしょうか？
しかしまだメニューの数が足りなかったり、ロゴを入れられてなかったりクラスがついていなかったりします。まずはh1要素にimg要素を入れるやり方から説明していきます。
親要素に戻る^
^は少しCSSのセレクタの書き方とは意味が変わってきます。左の要素の親要素の位置に戻ってくれます。説明がこれだけだとわかりにくいと思うのでもう少し掘り下げます。ここまでの説明だとdiv>pとした場合にはdivの兄弟要素をEmmetで記述することはできませんよね。^はこういったときにdiv要素に兄弟要素を作れるようにする処理をしてくれるんです。
例えば、div>p^ul>liと記述すればdivとulが兄弟要素になって以下のように展開されます。
<div>
<p></p>
</div>
<ul>
<li></li>
</ul>
これでh1要素の中にimg要素を入れられます。
header>h1>img^nav>ul>li>a
これを展開すれば
<header>
<h1><img src="" alt=""></h1>
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
</header>
このように展開されます。次はnav要素の中のliを増やしていきましょう。
量産してくれる*
*は左の要素を*の右に書いた数字分だけ量産してくれます。
例えば、
ul>li*3
これを展開した場合
<ul>
<li></li>
<li></li>
<li></li>
</ul>
このような形でli要素を3つ作ってくれます。
実はli要素を増やす方法として「li>a^li>a….」と記述して増やすことも可能ではあります。でもこんなことやっていたら面倒ですよね。なので*を使って量産しましょう。
header>h1>img^nav>ul>li*3>a
これを展開すれば
<header>
<h1><img src="" alt=""></h1>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
このようになります。かなり近づいてきましたがクラスついてないしテキストが入ってないですね。次はクラスを付けていきましょう。ついでにIDの付け方も説明します。
クラスを付ける. IDを付ける#
クラスとIDはまんまCSSと同じでクラスの場合は要素の後に.クラス名、Idの場合は#ID名を付けるだけです。
例えば、div.containerを展開すれば
<div class="container"></div>
となります。
これでさらに近づきますね。
header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a
これで展開すれば
<header class="l-header">
<h1 class="l-header_logo"><img src="" alt=""></h1>
<nav class="l-header_nav">
<ul class="l-header_nav_item_wrapper">
<li class="l-header_nav_item"><a href=""></a></li>
<li class="l-header_nav_item"><a href=""></a></li>
<li class="l-header_nav_item"><a href=""></a></li>
</ul>
</nav>
</header>
あとはテキストとimgのsrcとsltが入れられれば完成です。次はテキストの入れ方を説明します。
テキストを入れる{}
テキストを入れたい時は{}を使います。例えばp{テキスト}とすれば
<p>テキスト</p>となります。この時に気をつけて欲しいのが{}の中で改行は使えないことです。改行を入れたい時は
を入れてください。
これでテキストが入りますね。header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu}
これを展開すると
<header class="l-header">
<h1 class="l-header_logo"><img src="" alt=""></h1>
<nav class="l-header_nav">
<ul class="l-header_nav_item_wrapper">
<li class="l-header_nav_item"><a href="">menu</a></li>
<li class="l-header_nav_item"><a href="">menu</a></li>
<li class="l-header_nav_item"><a href="">menu</a></li>
</ul>
</nav>
</header>
これだとまだ数字のmenuの後ろに連番が入ってないですね。
次は連番の入れ方を説明します。
ナンバリングをしてくれる$
$はナンバリングをしてくれます。基本的に量産をしてくれる*と合わせて使うことで連番を入れてくれるのでそういう使い方をすることが多いのですが、必ずしも*と一緒に使わなければいけないわけではありません。
使い方はテキストやクラス名の後ろに$を付けるだけです。
一つだけ書くと1から始まり、二つ続けて書くと01から始まります。
例えばul>li.l-item$$*5を展開すると
<ul>
<li class="l-item01"></li>
<li class="l-item02"></li>
<li class="l-item03"></li>
<li class="l-item04"></li>
<li class="l-item05"></li>
</ul>
このように展開されます。
これでテキストの横に連番を載せられます。
header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu$}
このようにして展開すれば
<header class="l-header">
<h1 class="l-header_logo"><img src="" alt=""></h1>
<nav class="l-header_nav">
<ul class="l-header_nav_item_wrapper">
<li class="l-header_nav_item"><a href="">menu1</a></li>
<li class="l-header_nav_item"><a href="">menu2</a></li>
<li class="l-header_nav_item"><a href="">menu3</a></li>
</ul>
</nav>
</header>
次で最後です。画像のsrcとaltの入れ方を説明します。
クラスやID以外の属性を付けてくれる[]
srcやhref、jsで使うdata属性などを付けたい時は[]を使います。
使い方は{}と同じです。
例えばa[href=”https://knap.jp/”]を展開すると
<a href="https://knap.jp/"></a>
このようになります。続けて書くこともできるので
header.l-header>h1.l-header_logo>img[src=”./img/logo.png” alt=”LOGO”]^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu$}
こんな形で入れて展開すれば
<header class="l-header">
<h1 class="l-header_logo"><img src="./img/logo.png" alt="LOGO"></h1>
<nav class="l-header_nav">
<ul class="l-header_nav_item_wrapper">
<li class="l-header_nav_item"><a href="">menu1</a></li>
<li class="l-header_nav_item"><a href="">menu2</a></li>
<li class="l-header_nav_item"><a href="">menu3</a></li>
</ul>
</nav>
</header>
これで目標としていた形になりましたね。お疲れ様でした。
まとめ
Emmetがいかに便利か伝わりましたか？慣れるまでは少し難しいかもしれませんが少しずつでも使っていけば鎖状効率の違いに気付けると思います。
実はEmmetにはまだまだ実用的な機能が色々あります。()で囲むことでグループ化できたり、CSSでも使うことができます。
今回説明した内容だけでも十分扱えると思いますがもっと詳しく知りたい場合は英語になりますが以下の公式ドキュメントを読んでみてください。
https://docs.emmet.io/