コーディング作業は、何かと面倒くさいものです。
特に最近はレスポンシブWEBデザインが浸透してきていますし、JQUERYやCSS3でちょっとリッチな動きをつけたりする必要もあり、コーディングに必要な技術力と工数は右肩上がりの成長を続けています 笑
その割に、単価がそんなに上がらない。
となると、オフショアで中国やベトナムに発注!という選択肢も出てきたり、国内で安くやってくれる人を探すようになってしまいますが、安く綺麗にコードを書いてくれる人はなかなか見つからないものです。
ならば、作業をできるだけ高速化して工数を削減するしかないという選択肢になります。
今回は、コーディング効率化の1つの選択肢として、「Emmet」を紹介します。
「Sass」「Compass」「Sublime Text2」と組み合わせて使いこなすとかなり良いようですが、今回の記事は、「Emmet」の基本的な使い方を解説したいと思います。
「Emmet」の書き方を覚えてHTML・CSSコーディングを高速化し、本来一番時間を費やすべき、デザインやユーザビリティ、UX/UIに時間を注ぎたいですね。
Emmetの導入
まずは、Emmetを使えるようにしましょう。
下記から、各エディタのプラグインがダウンロードできます。
簡単にいうとこんな感じ
たとえば、リンクであれば、
1 2 3 |
a |
とまず記述し、「tab」キーを押すだけで、
1 2 3 |
<a href=""></a> |
のタグが出来上がります。
div要素に名前をつけたいなら、
1 2 3 4 5 6 7 8 |
div#container <!-- 展開後 --> <div id="container"></div> |
かなり覚えやすいですよね?
基本的な記述方法
「#」・・・idの追加
1 2 3 4 5 6 7 8 |
#container <!-- 展開後 --> <div id="container"></div> |
「.」・・・classの追加
1 2 3 4 5 6 7 8 |
.box <!-- 展開後 --> <div class="box"></div> |
「>」・・・ネストします。
1 2 3 4 5 6 7 8 9 10 11 12 |
div.box>ul>li <!-- 展開後 --> <div class="box"> <ul> <li></li> </ul> </div> |
「+」・・・同階層に展開
1 2 3 4 5 6 7 8 9 10 |
div+h1+p <!-- 展開後 --> <div></div> <h1></h1> <p></p> |
「^」・・・上の階層に展開
1 2 3 4 5 6 7 8 9 10 11 |
div>p>span^p <!-- 展開後 --> <div> <p><span></span></p> <p></p> </div> |
「*」・・・数字と組み合わせて複数要素の展開
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul>li*5 <!-- 展開後 --> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> |
「{}」・・・テキストの追加
1 2 3 4 5 6 7 8 9 |
h2{タイトルです。}+p{テキストです。} <!-- 展開後 --> <h2>タイトルです。</h2> <p>テキストです。</p> |
「()」・・・グループ化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
header+(nav>ul>li)+div+footer <!-- 展開後 --> <header></header> <nav> <ul> <li></li> </ul> </nav> <div></div> <footer></footer> |
「$」・・・番号の付与
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul>li.navi$*5 <!-- 展開後 --> <ul> <li class="navi1"></li> <li class="navi2"></li> <li class="navi3"></li> <li class="navi4"></li> <li class="navi5"></li> </ul> |
「[]」・・・属性を追加
1 2 3 4 5 6 7 8 9 10 11 12 13 |
table>tr>td[colspan=3] <!-- 展開後 --> <table> <tr> <td colspan="3"></td> </tr> </table> |
応用編
それでは、実際に現場で使っていくイメージで書いていくと。。。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
(header#header>(div#logo+h1)+nav#gmenu>ul>li*6)+ (section>div.content1)+(section>div.content2)+(footer>(div#footerlink+p#copyright)) <!-- 展開後 --> <header id="header"> <div id="logo"></div> <h1></h1> <nav id="gmenu"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </header> <section> <div class="content1"></div> </section> <section> <div class="content2"></div> </section> <footer> <div id="footerlink"></div> <p id="copyright"></p> </footer> |
これでHTMLのさっくりとしたマークアップができます。
かなり効率的な書き方が出来るようになりますね。
最初はちょっとややこしいですが、基本的に「+」や「*」や「()」などは算数の計算みたいな考え方なので、すぐに馴染むと思います。
下記のシートでタグの一覧が参照できます。
次回は、CSS編を解説していきます。