emmetを初めて使う

昨日に引き続き、『Web制作者のためのsublime textの教科書』を参考に、

パッケージ「Emmet」の使い方を学びます。

● HTML5を挿入

「html:5」　の記述後に「ctrl + E」で展開してくれます。

展開するのに使うのが

・「ctrl + E」もしくは「tab」

入力後の一番最後にカーソルを持っていった状態で機能してくれます。

● タグを打つ

今回参考にしたサイトは

http://wada811.blogspot.com/2013/01/emmet-for-sublime-text-2-expand-html-abbr.html

です。基本的な役割を持つキーの説明をしてくれています。

以下は参考書の説明文を（私の復習も兼ねて）記述します。

header.site-header>h1.site-title>a[href="/"]>img[alt="サイト名"]^^p.site-description{テキストテキスト}

↓展開後

<header class="site-header">
<h1 class="site-title"><a href="/"><img src="" alt="サイト名"></a></h1>
<p class="site-description">テキストテキスト</p>
</header>

クラス名は後ろにcssのような記述をしています。複数クラス名を付けたいときは、

header.site-header.fixed-block

のように、続けます。

なんとなく分かるのが、「>」（子要素）です。

少々慣れが必要かなと思われるのが、「 ^」（階層をさかのぼる）文字ですね。

^^で２階層上にさかのぼっています。

nav.main-nav>h2.main-nav-title{メインメニュー}+ul.main-nav-list>li.main-nav-item#main-nav$$*5>a{メニュー$}

↓ 展開後

<nav class="main-nav">
<h2 class="main-nav-title">メインメニュー</h2>
<ul class="main-nav-list">
<li class="main-nav-item" id="main-nav01"><a href="">メニュー1</a></li>
<li class="main-nav-item" id="main-nav02"><a href="">メニュー2</a></li>
<li class="main-nav-item" id="main-nav03"><a href="">メニュー3</a></li>
<li class="main-nav-item" id="main-nav04"><a href="">メニュー4</a></li>
<li class="main-nav-item" id="main-nav05"><a href="">メニュー5</a></li>
</ul>
</nav>

テキスト打ちにする部分は「{}」内に記述しています。

あと、 h2とulが同じ階層にあって、上の状況の時（先程の^とは状況が少し違っています）これを兄弟と見ます。兄弟関係にあるとき使われるのが「+」です。

同じタグの繰り返しに「*」掛け算記号を使います。（ここではクラス名main-nav-item、id名にmain-nav01、main-nav02、main-nav03、main-nav04、main-nav05の「li」要素が5つのとき、「*5」で表示させています。）$$マークもidなどを付ける際に少し便利です。

 emmetと「Hayaku」のパッケージを使うことで、cssもかなり早く記述することが出来ます‼感覚的に素早く打てて楽ちんそうです。