「Emmet記法ってどんなものかサッと確認したい。」
「Webサイトの制作スピードを上げて、時間に余裕を持ちたい。」
「Webデザインスキルをもう一歩高めたい。」
この記事はそんな方へ向けて書いています。
Emmet記法。
WebやIT業界にいると、なんだか略語や横文字が当たり前の様に飛び交い、正直、単語を聞いただけで帰宅して布団にくるまりたくなります。
そんな僕でもサッとEmmet記法の概要と書き方に目を通すだけで、コーディングスピードの上昇を体感する事ができました。
「Emmet記法って名前は聞いた事あるけど、どんなもの良く知らないのでざっくりとした概要を知りたい。」
Emmet記法の書き方を忘れてしまったから、ちょっと確認したい。」
そんな方へ向けて、本記事では、Emmet記法についてザックリとした概要とチートシートについてと、とりあえずこれだけは覚えといたら便利、という記法について抜粋して解説しています。
目次
Emmet記法とは？
htmlやcssのコーディングを略語で入力する事で、コードを補完して一気にコードが書ける記法です。
僕はコーディングにVSCodeを最近は使用しているのですが、VSCodeではデフォルトでEmmet記法に対応しており、ややこしい設定の必要なくそのまま使えます。
多くのコーディングエディタにデフォルトで入っていたりするのですが、もし使っているエディタにEmmetの設定がない様でしたら、公式サイトからプラグインをダウンロードして設定するだけで、簡単にEmmet記法でのコーディングを始める事ができます。
DreamWeaverやAtom、SublimeTextなどなど、有名なエディタはもちろん対応しています。
Emmet記法のチートシートはコチラ。
忘れてしまっても、いつでも確認できます。
もしEmmet記法をすでに知っている方で、Emmet記法の一覧を確認できるチートシートをお探しの方は公式サイトから手に入れる事ができます。
公式サイトより一覧の確認ができ、pdf版にしたダウンロード版もあります。
もし忘れてEmmet記法を忘れてしまった場合でも、公式サイトで確認しながら進める事ができます。
とりあえずこれだけは覚えといたら便利。っていうEmmet記法。
公式サイトは英語サイトです。
「英語は見ただけで拒否反応が、、」
という方へ向けて、とりあえずこれを覚えておけば便利、というよく使うEmmetを日本語チートシートがわりに載せておきます。
『Child: >』階層を指定して一気に記述する
使用例
nav>ul>li
出力結果
<nav>
<ul>
<li></li>
</ul>
</nav>
メモ
大なり記号を使ってタグ文字をつないでいく事で、階層を指定したhtmlタグの出力結果を得る事ができます。
『Sibling: +』同じ階層に一気に記述する
使用例
div+p+bq
出力結果
<div></div>
<p></p>
<blockquote></blockquote>
メモ
プラス記号を使ってタグ文字をつないでいく事で、同階層でのhtmlタグの出力結果を得る事ができます。
『Multiplication: *』同じタグを一気に記述する
使用例
ul>li*5
出力結果
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
メモ
アスタリスク記号を使ってタグ文字と出力したい数値を記述する事で、指定した数値の数のhtmlタグの出力結果を得る事ができます。
『Grouping: ()』タグをグループにする
使用例
div>(header>ul>li*2>a)+footer>p
出力結果
<div>
<header>
<ul>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
メモ
カッコも数学の計算式と同様な感覚で使う事ができます。カッコでくくったタグをグルーピングしたhtmlの出力結果を得る事ができます。
『id』と『class』を付けたタグを一気に記述する
使用例
#header
.title
form#search.wide
p.class1.class2.class3
出力結果
<div id=”header”></div>
<div class=”title”></div>
<form id=”search” class=”wide”></form>
<p class=”class1 class2 class3″></p>
メモ
idをすでに付けたhtmlタグを出力したい場合は、cssの記述と同じ要領で「タグ#id名」で記述します。
idをすでに付けたhtmlタグを出力したい場合は、「タグ.class名」で記述します。
idとclassをつけたhtmlタグを一気に書きたい場合は合わせて書く事で出力する事もでき、class名を複数つけたhtmlタグを一気に書きたい場合も、使用例の4行目の様子にピリオドでつないでいけば、classを複数つけたhtmlタグを簡単に出力する事ができます。
『Text: {}』テキストを含んだタグを一気に記述する
使用例
a{次のページはコチラ}
出力結果
<a href=””>次のページはコチラ</a>
メモ
タグと波カッコを合わせて記述する事で、波カッコに書いたテキストを含んだhtmlタグを素早く出力する事ができます。
『!』htmlのベースとなるテンプレートを出力する
使用例
!
出力結果
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
</head>
<body>
</body>
</html>
メモ
htmlコードを書くにあたり、最初に記述すべきテンプレート的なコード。
一回一回書くのはとてもめんどうでもあるのですが、Emmetを使えばエクスクラメーションマーク「!」を入力してリターンを押すだけで一気にhtmlのベースとなるテンプレートを出力してくれます。
Emmet記法について、もっとしっかり勉強したいんだけど…、オススメの書籍はどれ？
「Emmet記法についてもっとしっかり勉強したいんだけど、オススメの書籍は？」
もしそんな方がいれば、Udemy 
の「HTMLやCSSをサクサク書こう！ Emmet基礎講座 
」がオススメです。
書籍ではないですが、Emmet記法については、これといった書籍がなぜか販売されてないのでの、Udemyの上記コースが評判も良く参考になります。
正直公式サイトの記法を確認しながらバリバリWebサイトを作っていれば自然に身につけることはできますが、
「効率良く最短期間で正確で実務レベルで使用できる様になりたい！」
という方は利用してみるのも全然アリです。
あまり大きな声では言えないですが、、Udemyのコースは通常価格で購入するとなかなかのお値段がしますが、定期的に（とういうか結構頻繁に）半額以下になる様なセールをしているので、その時期を狙って気になっているコースを購入すれば（1,500円くらい）で気になるコースをゲットできるのでオススメです。
僕もこれといったスキルをしっかり身につけたい時は、最近は専門書より安く、実際にやっている動画を確認しながら、現役の方の説明を聴いて勉強できるUdemyをよく利用する様になりました。
もしまだ一度も利用した事がない方は試しにやってみると、動画講座の方が相性が良く、スキルが着実に身につける事ができると気づく事もできるかもしれません。
まとめ：Emmet記法を使って、神速Webコーダーへ。
Emmet記法についてのザックリとした概要とよく使う記法についての簡単な解説でした。
一気に全部の書き方を覚えなくても、まずは2・３個覚えるだけでコーディングのスピードアップを体感できるはず。
便利なチートシートもあるので、その都度確認しながらコードを書いていれば、そのうち自然に使える様になります。
「Webコーダーとしてレベルアップしたい！」
「Webサイトの制作スピードをアップして、ゆっくり家の布団で眠りたい！」
この記事がそんな方のお助けになれば幸いです。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
