7

Emmet初心者のためのコードの書き方講座


ホームページ作成のプロジェクトに関わっているとスケジュール通りに進まず、結果的に納期ギリギリになってしまう…。そんなことありませんか?

どこかしらの工程で短縮できれば最高なのですが、設計やデザインは中々短縮することができず、コーディングにしわ寄せが来ることが多々あります。

そんな中、コーディングを少しでも早く行うことができれば、余裕をもってスケジュール内に終わらせることができるのにって思います。

そんなコーディング速度を上げてくれるプラグインツール、Emmetはご存知でしょうか?

Zen-Codingの後継なんても言われているEmmetですが、これを導入することでコーディング業務のスピードを上げることが可能になります。

Emmetって?!コーディング初心者からでも使える便利ツール

Emmetはどういったことができるのか?

どうやってやるの?

という質問に対して答えるのであれば、Emmetで規定されているスニペットを記載し、ショートカットキーでコーディングに展開していくと言うもの。

例えば、

タグを記述したいとしたならば

a だけ記載し、文末で展開すれば同様の結果が得られます。

Emmetで使えるスニペットは数多く存在しますが、チートシートと照らし合わせながら書いていけば自然と覚えられます。

Emmetのチートシート

時間があるときに覚えようと思っても時間が作られることは経験上少ないはず。
それだったら、実践と共に行っていくのが一番です。

タグだけでなく、タグのclassやidも同様に短縮記述があります。

class は .(ドット)
id は #(シャープ)

と覚えて下さい。書き方としては、

div#fruit.apple

これを展開したら、

となります。
テーブルタグやULタグなどの階層構造になっているタグは、

table>tr>td

というように記述し、展開すると

となります。
テーブルタグやULタグでは、おそらく繰り返し記述するところも出てくるでしょう。
その場合、*数字を使用することで、解決します。

table>tr*3>td*2

と記述し展開すると

という具合になります。

コーディングを行う場合、様々なタグを使用するのと同様にスニペットも数多く用意されています。

最初のうちは、チートシートを照らし合わせながら書いていくうちにできるようになっていきます。

基本的な考え方を身につけさえすれば、チートシート見ながらでも、おそらく普通に記述するより早く書き上がると思います。

デフォルト設定のlangをenからjaに修正する

!のスニペットは、HTML5のDOCTYPE宣言ですが、デフォルトenになっています。
こちらは、jaに修正する必要があります。

[Preferenes] > [Package Settings] > [Emmet] > [Settings-User]

こちらに、以下のコードを貼り付けます。

{
“snippets”: {
“variables”: {“lang”: “ja”}
}
}

これで設定完了です。

言語圏が違うとこういった事も出てくるので、あらかじめ設定しておくことが必要ですね。

まとめ

Emmetは、Zen-Codingと同様に、コーディング速度を高めてくれるものです。

image03

使いこなすまで人によっては多少時間がかかるかもしれませんが、最初のうちは見ながら覚えて慣れるということを繰り返し、いち早くマスターしてコーディングスピードを少しでも上げてみてはいかがですか?

他にもオリジナルのスニペットが作成できたりと使いこなせば痒いところまで手が届きます。

最小の労力で最大限の結果が出るように日々研究してみてください。自分にあった使い方をマスターすれば、今までの半分近くの時間短縮になることでしょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【CSSのみ】画像を使わずリストをデザインをする方法