Emmetで爆速コーディングを修得しよう

HTML/CSSのコーディングスピードをあげることができるEmmet記法について見ていきます。
0%

このレッスンをはじめる前に

このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。

#02 HTMLのひな型を展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

html:5
#03 要素タグを展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

h1
p
p{Hello}
#04 よく使う属性もあわせて展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

a{About}
img
#05 idやclass属性をつけて展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

section.container
button#close{Close}
#06 []で任意の属性をつけて展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

img
img[width="160"]
img[width="160" height="160"]
#07 *で複数の要素を一度に展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

p
p*3
div.box*3
div.box$*3
div.box$$$*3
#08 +で違う要素を一度に展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

header+section+footer
h1+p*2
h1+p*2+h2+p*2
#09 >で違う階層に要素を展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

section>h1
ul>li*3
table>tr*2>td*3
#10 ()で要素をグループ化してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

header+section>h1+footer
header+(section>h1)+footer
#11 暗黙的なタグ補完を使ってみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

.container
ul>.item*3
#12 フォーム関連のタグを展開してみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

form:p
input:t
textarea
label>{Name}+input:t
label>{Message}+textarea
button{Send}
#13 CSSでEmmet記法を使ってみよう
2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

link:css
m0
p0
p16-32
m0-auto
mb8
pl8
#14 CSSのプロパティを展開してみよう
2024年6月18日

動画中で紹介しているチートシートについては以下のサイトを参照してください。

・Cheat Sheet
https://docs.emmet.io/cheat-sheet/

2024年6月17日

今回の動画で使ったEmmet記法は以下のとおりです。

fsz
fw:b
ta:c
td:n
d:f
fxw:n
pos:r
pos:a