block;の15文字をdbの2文字で入力できるようになるのがEmmetです。1日中コーディングしているわたしにとってこの1回の差は大きく、100回入力したときには1,300文字分の差が生まれているわけですね。1,300文字入力するのにどれくらい時間がかかりますか?その他にもタイプミスが少なくなるタイピングが少なくなるので腕が疲れないなど、いいことだらけです!コーダーとして名乗るからには必須レベルで使っておきたいのがEmmetです。Code」であれば、標準でEmmetが使えるようになっています。個人的にはかなりおすすめのエディタです。Text」「Atom」もEmmetの拡張機能を導入することで使えるようになります。こちらお使いの方はGoogleで検索してEmmetを使えるようにしてください。Code」を使っている前提ですので、あらかじめご理解ください。(他のエディタでも基本的に使い方は変わらないはずですが)Emmetの使い方EmmetはHTMLとCSSの記述を短縮するために使える記法です。HTML、CSSそれぞれの書き方を見ていきましょう。EmmetでHTMLを記述index.htmlなど、htmlファイルを作成してEmmetが使えるエディタで開いてください。基本としては、divなどの要素を入力してTabキーを押すとHTMLタグとして保管されるような仕組みとなっています。h2と書いてTabキーを押すと、以下のようなHTMLが作られます。階層を指定ul>liと記載すると、ulタグの中にliタグが入るHTMLが作られます。複製ul>li*3と記載すると、ulタグの中にliタグが3つ内包されたHTMLが作られます。隣接dl>dt+ddと記載すると、dlタグの中にdtタグとddタグが並列で並ぶHTMLが作られます。コピー<dl><dt></dt><dd></dd></dl>ちなみに、dt+ddをまとめて複数設置したい場合は、カッコでまとめてあげてください。dl>(dt+dd)*3として記載してあげると、3つ複製されるようになります。コピー<dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>「>」「+」「*」の組み合わせHTMLのemmetは要素と「>」「+」「*」の記号の組み合わせです。この3つの記号の意味を覚えておけば、どうにかなります。EmmetでCSSを記述style.cssなど、cssファイルを作成してEmmetが使えるエディタで開いてください。基本いくつか具体例を出したほうが早いかもしれません。12px;といった具合です。Spaceでプロパティの候補が出るので、どういった優先順位になるか試してみてください!唐突にEmmetクイズ!唐突に問題です。個人的にはtableタグを思ったとおりに出せたら他も問題ないと思いますので、tableを思い通りに作るためのクイズを出します。以下のtableタグを作るには、Emmetでどういう記述にすればいいでしょうか。(ちょっと難しいかもしれません。リンクEmmetを使えばコーディングスピードが爆速に!Emmetの利用は単語の辞書登録と似ています。要するに、タイピングする回数を大幅に減らすことで全体のコーディング時間を大幅に減らすことができるというものです。block;と通常どおりタイピングすると、15文字分の文字を打つ必要があります。一方で、Emmetを使ってコードを表現すると、dbの2文字で済みます。13文字分の時短ができるわけですね。一回の時間に換算すると大したことないかもしれませんが、何百回と同じようなコードを打ち続けるコーダーにとって、1日に換算するとどれほどの差が出てくるでしょうか、というお話です。チリも積もれば山となります。時短の積み重ねが大きな時間の余裕を生むことになるので、HTML、CSSコーディング頻度の多い方は、ぜひEmmetを活用してみてください!【おまけ】よく使うショートハンド最後にわたしがよく使うEmmetのショートハンドをまとめました。transition:その他にもたくさんあります。リンクVSCodeこのページが役に立ったらいいね!お願いします運営の励みになります...。UIで「管理しやすい」編...前の記事Instagramの写真一覧をWordPress記事上に表示させるプラグイン「Ins...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。