「Emmet」でコーディング作業を効率化しよう。-HTML編-

コーディング作業は、何かと面倒くさいものです。 特に最近はレスポンシブWEBデザインが浸透してきていますし、JQUERYやCSS3でちょっとリッチな動きをつけたりする必要もあり、コーディングに必要な技術力と工数は右肩上がりの成長を続けています 笑 その割に、単価がそんなに上がらない。 となると、オフショアで中国やベトナムに発注!という選択肢も出てきたり、国内で安くやってくれる人を探すようになってしまいますが、安く綺麗にコードを書いてくれる人はなかなか見つからないものです。 ならば、作業をできるだけ高速化して工数を削減するしかないという選択肢になります。 今回は、コーディング効率化の1つの選択肢として、「Emmet」を紹介します。 「Sass」「Compass」「Sublime Text2」と組み合わせて使いこなすとかなり良いようですが、今回の記事は、「Emmet」の基本的な使い方を解説したいと思います。 「Emmet」の書き方を覚えてHTML・CSSコーディングを高速化し、本来一番時間を費やすべき、デザインやユーザビリティ、UX/UIに時間を注ぎたいですね。

Emmetの導入

まずは、Emmetを使えるようにしましょう。 下記から、各エディタのプラグインがダウンロードできます。 emmet

簡単にいうとこんな感じ

たとえば、リンクであれば、 とまず記述し、「tab」キーを押すだけで、 のタグが出来上がります。 div要素に名前をつけたいなら、 かなり覚えやすいですよね?

基本的な記述方法

「#」・・・idの追加 「.」・・・classの追加 「>」・・・ネストします。 「+」・・・同階層に展開 「^」・・・上の階層に展開 「*」・・・数字と組み合わせて複数要素の展開 「{}」・・・テキストの追加 「()」・・・グループ化 「$」・・・番号の付与 「[]」・・・属性を追加

応用編

それでは、実際に現場で使っていくイメージで書いていくと。。。 これでHTMLのさっくりとしたマークアップができます。 かなり効率的な書き方が出来るようになりますね。 最初はちょっとややこしいですが、基本的に「+」や「*」や「()」などは算数の計算みたいな考え方なので、すぐに馴染むと思います。

下記のシートでタグの一覧が参照できます。 次回は、CSS編を解説していきます。

WEB制作についてのご相談はお気軽にどうぞ。

WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/webデザイナー/フロントエンドエンジニア
2009年1月よりフリーランスのwebデザイナー/ディレクターとして活動しながら、ノマドな働き方を試み始める。 過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。 2015年11月にスカイゴールド株式会社として法人化。 現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。 Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。 国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。 旅と音楽と酒と料理作りが好き。 最近は、映像制作の勉強も行なっている。
アーカイブ