【爆速コーディング】よく使うEmmet一覧

はじめに

この記事では前回の記事で少し説明したEmmetに関して紹介していきます。

Emmetを使いこなすことができれば作業効率は格段にあがります。

この記事を読む方の中には、「Emmetってなんだろう?」と思う方もいるかと思います。

なので前回の記事を読んでいない方は、まず読んでみてください。

Emmetに関する記事はこちら

目次

爆速コーディング! よく使うEmmet一覧

事前準備

Emmetはある特殊な記述をした後にTabもしくはEnterを押すことで使用できます。

例えば、<h1></h1>を記述する場合、

この状態でTabもしくはEnterを押せばOKです。

HTML編

ひな形

!もしくはhtml:5

要素+要素 (隣接)

例 h1+h2+h3

要素*数字 (複製)

例 li*3

要素{文字}

例 h1{おためし}

$ (連番)

例 h$*3

要素>要素 (ネストした要素)

例 ul>li*2

(計算) (まとめて計算)

例 (nav>ul>li*2)+header

要素.名前 (class)

例 p.sample

div以外の要素ではこのルールでEmmetが使えます

point
divのみ .(ドット) がなくても良い

要素.名前.名前 (複数class)

例 p.sample.title

要素#名前 (id)

例 p#sample.sample

CSS編

CSSのEmmetは基本的にはプロパティの頭文字や途中の文字を入力することで使えます。

入力した内容から部分一致でプロパティを表示してくれます。

例 bgcbackground-color

c#f00 (color)

colorでは色を指定しない場合、初期値#000が使用されます。

他にも、c:bluecolor:blue;を作ることができます。

bgc#f00 (background-color)

color同様、複数記述方法があります。

何も色を指定しない場合、初期値#fffが使用されます。

w〇〇 h〇〇 (width:〇〇px height:〇〇px)

pxを打たなくても数字を打つだけで自動でpxになります。

もし他の単位を使う場合は数字の後に単位を打てばOKです。

例 w100%width:100%;

w〇〇+h〇〇+bgc#〇〇 (プロパティの足し算)

プロパティを +(プラス)に続いて記述することで一度に複数プロパティのEmmetを使うことができます。

fz〇〇 (font-size)

m〇〇 p〇〇 (margin:〇〇px padding:〇〇px)

marginpaddingには2パターン記述方法があります。

  • margin-top:〇〇など個々で1方向指定する場合
  • margin:〇〇で同時に4方向指定する場合

margin-top:〇〇など個々で1方向指定する場合

margin-topmt margin-bottommbのようにmarginの頭文字mと方向の頭文字を記述することで指定ができます。

margin:〇〇で同時に4方向指定する場合

例えばmargin:0 autoとしたい場合、1個目の数字はすぐ横に記述し、2個目以降の数字は :(コロン)を挟んで記述することでEmmetを使えます。
もしくは -(ハイフン)でも代用できます。

d〇〇 (display:〇〇)

displayの場合、displayの頭文字dとblock,flex…etc それぞれの頭文字を記述することでEmmetが使えます。

bd (border: 1px solid #000)

bsh〇〇 (box-shadow:〇〇)

psr psa (position:relative position:absolute)

relativeabsoluteそれぞれの頭文字で使い分け可能

tac (text-align:center)

まとめ

今回はEmmetの中でよく使う種類のみピックアップしました。

これを覚えるだけで今までより何倍も、楽に、早くコーディングができるでしょう。

Emmetは他にもたくさん存在するので、気になる方は「Emmet チートシート」で検索してみてください。

実践的なプログラミングを学ぶなら

CodeShipでは、ただ知識をインプットするだけではなく、現場で使えるテクニックや勉強の仕方など周辺知識まで幅広く教えています。

勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発実戦経験豊富な現役エンジニアキャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポート。

独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。

さらに、期間内であれば選択した以外のコースのカリキュラムも無料で受講可能。
頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。

まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。