HTMLとCSSのEmmet記法まとめ

今回はコードを効率的に書くことが出来るEmmetの書き方について紹介します。

Emmetをマスターすることで、スペルミスを無くしたり、コーディング速度をあげることが出来るメリットがあります。

実務でよく使うEmmetを中心に紹介していくので、是非実装者の方は参考にしてください。

HTMLのEmmet

HTMLの雛形

□入力

!

□出力表示

通常のタグ

□入力

h1

□出力表示

タグを入れ子にする

□入力

nav>ul>li

□出力表示

タグを隣接する

□入力

div+p+bq

□出力表示

同じタグを複数記述する

□入力

ul>li*5

□出力表示

タグをグループにする

□入力

div>(header>ul>li*2>a)+footer>p

□出力表示

classを振ったタグを記述する

□入力

.title

em>.class

□出力表示

idを振ったタグを記述する

□入力

#header

□出力表示

classとidを指定したタグを記述する

□入力

form#search.wide

p.class1.class2.class3

□出力表示

テキストを含んだタグを記述する

□入力

a{こちらをクリック}

p>{Click}+a{here}+{to continue}

□出力表示

classを連番で記述する

□入力

ul>li.item$*5

h$[title=item$]{Header $}*3

ul>li.item$$$*5
($の数が例えば1つだと1、2つだと01と表示される)

ul>li.item$@-*5

ul>li.item$@3*5

□出力表示

CSSのEmmet

margin & padding

margin[m]

padding[p]

Visual Formatting

position:absolute;[posa]

position:relative;[posr]

position:fixed;[posf]

top:;[t]

right:;[r]

bottom:;[b]

left:;[l]

z-index:;[z]

display:block;[db]

display:none;[dn]

display:flex;[df]

display:inline;[di]

display:inline-block;[dib]

overflow:hidden;[ovh]

overflow:visible;[ovv]

overflow:scroll;[ov:s]

overflow:auto;[ov:a]

overflow-x:scroll;[ovx:s]

overflow-x:auto;[ovx:a]

cursor:pointer;[curp]

box-sizing

box-sizing:border-box;[bxz]

width[w]

height[h]

height:auto;[ha]

max-width[maw]

max-height[mah]

min-width[miw]

min-height[mih]

font

font-weight:normal;[fwn]

font-weight:bold;[fwb]

font-size[fz]

text

vertical-align:top;[va]

vertical-align:middle;[vam]

vertical-align:baseline;[vabl]

vertical-align:bottom;[vab]

text-align:left;[ta:l]

text-align:center;[ta:c]

text-align:right;[ta:r]

text-decoration:none;[td:n]

text-decoration:underline;[td:u]

letter-spacing[lt]

background

background[bg]

background-color[bgc]

background-image:url();[bgi]

background-repeat:no-repeat;[bgr:n]

background-position[bgp]

background-size[bgsz]

background-size:auto;[bgsza]

background-size:contain;[bgszct]

background-size:cover;[bgszcv]

color

color[c]

color:rgb(0, 0, 0);[cr]

color:rgba(0, 0, 0, .5);[cra]

opacity

Generated content

content:’’;[cnt]

Border

border[bd]

border:none;[bdn]

border-width[bdw]

border-top[bdt]

border-right[bdr]

border-bottom[bdb]

border-left[bdl]

border-radius[bdrs]

Others

!important[!]

align-items:baseline;[aib]

align-items:center;[aic]

align-items:flex-end;[aife]

align-items:flex-start;[aifs]

flex-direction:column;[fxdc]

flex-direction:column-reverse;[fxdcr]

flex-direction:row;[fxdr]

flex-direction:row-reverse[fxdrr]

flex-wrap:wrap;[fxww]

justify-content:center;[jcc]

justify-content:flex-end;[jcfe]

justify-content:flex-start;[jcfs]

justify-content:space-between;[jcsb]

まとめ

以上が、Emmetのまとめでした。

Emmetに慣れるとかなり効率的にコードを書くことが出来るので、是非導入してみましょう。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事