Emmetのチートシートから抜粋 コーディング超初心者のための書き方【動画あり】

そんなあなたのために、本当によく使うEmmetのショートカットキー7つを紹介します。

この記事を書いているわたし、実は最近Emmetを使い始めたばかりなんです。
Emmetってめちゃめちゃ便利！すごい！でもこんなにたくさん覚えられない！

ということで具体例を出しながらアウトプットしつつ、
この記事に辿り着いてくださったあなたと一緒に覚えていきたいと思います。

【前提】WindowsでVisual Studio Codeを使っている人向けです

※この記事は、WindowsのパソコンでVisual Studio Codeというテキストエディタを使っている駆け出しプログラマーさん向けの記事です。

先輩プログラマーさんは、これから成長していく初心者プログラマーのわたしたちを暖かく見守ってくださると嬉しいです(^ω^)

Emmetは『tabキー』で展開します

もう一つ大前提が。

Emmetでショートカットキーをタイピングしたら、最後にtabキーを押してくださいね。
そうすればコードが展開して正しい形で記述されます(^o^)

【HTML】よく使う3つのコードの書き方

Emmetのチートシートはブックマークで保存しておくと良いでしょう。

見てみると分かるのですが、ショートカットキーの量がハンパない…！
こんなに覚えられないです。

ですのでまず最初はHTML編。3つ覚えましょう。

それぞれ解説します。

【HTML】class名付きのdivタグを書く時

というタグ、めちゃめちゃ頻繁に登場しますよね。
例えば testというclass名が付いたdivタグを書きたい時は
『div.test』を押せば…

ばーん！

すごい！瞬時に打つことができました。

【HTML】リストを書く時

と打ちたい時は…
『ul>li*3』これです。

h2だけではなく

divタグやpタグでも使えちゃいます。とっても便利！

【HTML】テキスト入りの要素

例えばこんなコード、よく書きますよね。
これは『h2{てすとてすと}』とすればOKです。

途中で日本語を挟むので、もしかしたらEmmetは使わずにh2タグだけ先に書いて
あとからテキストを入れたほうが早いかも知れません。

ですがpタグやspanタグにも使えるので、知っていて損は無いはず…！

【CSS】よく使う4つのコードの書き方

HTMLとセットのCSS。もちろんこちらにもショートカットキーがたくさん用意されています。
今回ご紹介するのは下記の4つ。

それぞれ解説していきます。

【CSS】colorを指定する時

まずはカラープロパティ『c#fff』です。
#の後ろには指定したい色のコードを書きましょう。
#fffはwhite、#000はblackです。

その他の色のコードを調べたい時は、
WEB色見本を使ったり、

配色パターンを参考にしたい時は、サルワカさんのこちらの記事を参考にしています。

【CSS】font-sizeを指定する時

『fz16px』とすればポンっとコードを書くことができます。
この場合はフォントサイズを16pxに指定。

px指定だけではなく、remやemでも使うことが可能です。

【CSS】displayの指定をblockやinline-blockに指定する時

blockにしたいときは『db』
inline-blockにしたいときは『dib』です。

「displayってなんだっけ…？」という方は再び登場サルワカさんのこちらの記事をどうぞ。

要素の表示形式を変えてくれるプロパティです。

【CSS】要素のpositionを指定したい時

要素のpositionを指定するプロパティ。こちらもコーディングをしているとよく登場します。
親要素に指定する position: relative; →『pore』
子要素に指定する position: absolute; →『poab』

長い単語はそれだけでタイプミスしやすい…。
そこでこのショートカットを覚えておけば、スペルを覚えていなくても安心です！

まとめ｜まずは簡単でよく使うものから覚えよう

また新しいショートカットを覚えたら記事を書いていきますね。

「Emmet使い始めたばっかり！とりあえず初めに覚えたら良いやつ教えて！」
というあなたのためのショートカットキー紹介でした。