WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： マークアップ >html

本日は、自分が取り入れているコーディングを効率化するツールについてお話します。

通常、Webサイトを制作する場合は、HTMLやCSSのコードをすべて手で打ち込んでいきます。

周りのものをコピー＆ペースト出来る場合は、それで効率化を図ることが出来ますが、ゼロからサイトを立ち上げる場合は、そうはいきません。

そこで自分は、普段使っているエディタ（自分の場合はDreamweaver）にEmmet（以前はZen-Codingと呼ばれていました。）という機能を追加して、作業を行っています。

Emmet

このEmmetで何が出来るかというと、少しの文字列を打つだけで、HTMLやCSSのソースを補完してくれます。

例えば、まっさらなファイルに、「!」を1文字だけ打ち込んで、Ctrl + E（Macの場合はcommand + E）を打つと…

このように一瞬でHTML5のひな形を作ってくれます。

このEmmetは階層構造をもつ要素にも威力を発揮します。

「item」というクラス名を持ったliタグを5つ含むulを作りたいという場合も、
【ul>li.item*5】と入力してCtrl + Eで…

<ul>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>

このように一瞬で展開してくれます。

CSSも同様に「mb」を展開すると「margin-bottom」になったり、「ta」を展開すると「text-align」になったり、最後まで打ち込まなくても良いので、とても便利です。

一つ一つの部分では、ほんの少しの時短かもしれませんが、塵も積もれば山となり、サイト全体をつくり上げる頃には、結構な時間の差がでます。

Dreamweaver以外のエディタや、Mac/Windows両方に対応しているので、気になった方は一度試してみてはいかがでしょうか？

また、自分の場合は、エディタの画面を目にやさしい色に変えたり、コーディングしやすく見やすいフォントに変えたりして、効率化を図っています。

スピード以外の面でも、自分の開発しやすい環境を作って作業することは大切だと思います。