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