HTML・CSSはEmmetで爆速コーディングを行おう!

Emmetでのcssコーディング

cssコーディングでのEmmetの使用方法は基本的に、プロパティの頭文字を入力し直後に[Tab]キーを押すという流れです。
また、cssに関しては数多くのプロパティがあり、プロパティごとに値のパターンもあるため「覚える」より「慣れる」ことが習得のコツです。
そこで今回はまず基本の入力方法をレクチャーし、使用頻度の高いプロパティの記述と展開を紹介します。

なお、htmlの記述と同様ですが、注意点は記述を半角英数字で行う事です。
全角で記述を行った場合、ただの文字列として認識・処理されてしまいます。

cssのEmmet記法(基本編)

cssはプロパティの頭文字を入力し直後に[Tab]キーを押すことで展開されます。

①プロパティのみの展開

例えば特定のセレクタに「margin」を指定する場合は、以下のように入力して[Tab]キーを押します。

記述例①「プロパティのみ」のEmmet記法

m[Tab]

すると「margin: ;」というように、プロパティ名および「:」「;」が展開されます。

記述例①「プロパティのみ」の展開

margin: ;

②プロパティと値の展開

またcssの指定にプロパティと合わせて値を指定する場合は、以下のように入力して[Tab]キーを押します。

記述例②「プロパティと値」のEmmet記法

m50[Tab]

すると「margin: 50px;」というように、プロパティ名「:」「;」に加え、値の「50px」が展開されます。

記述例②「プロパティと値」の展開

margin: 50px;

③プロパティが複数の場合の展開

プロパティが複数ある時の指定はプロパティどうしを「+」でつなぎ、[Tab]キーを押します。

記述例③「プロパティが複数」のEmmet記法

m+p

すると「margin: ;(改行)padding: ;」というように、複数のプロパティを展開することができます。

記述例③「プロパティ 複数の値」の展開

margin: ;
padding: ;

④値が複数の場合の展開

値が複数ある時の指定は値どうしを「-」でつなぎ、[Tab]キーを押します。

記述例④「プロパティと複数の値」のEmmet記法

p10-20-30-40[Tab]

すると「padding: 10px 20px 30px 40px」というように、複数の値を展開することができます。

記述例④「プロパティ 複数の値」の展開

padding: 10px 20px 30px 40px;

⑤プロパティと値が複数の場合の展開

プロパティと値の両方が複数ある時の指定はプロパティどうしを「+」、値どうし「-」でつなぎ、[Tab]キーを押します。

記述例⑤「プロパティと値が複数」のEmmet記法

m0-a+p30+bx

すると「margin: 0 auto;(改行)padding: 30px;(改行)box-sizing: border-box;」というように、
複数のプロパティと値を展開することができます。

記述例⑤「プロパティと値が複数」の展開

margin: 0 auto;
padding: 30px;
box-sizing: border-box;

cssのEmmet記法(番外編)

cssでも基本の記法以外にコーディングの手間を軽減するものがあります。

①CSS3 Media Queriesの展開

後ほど追記が必要ですが、スマホへの表示最適化対応「RWD」で紹介した、
CSS3 Media Queries(メディアクエリ)もEmmetで展開可能です。
「@media screen {}」を指定する場合は、以下のように入力して[Tab]キーを押します。

記述例①「CSS3 Media Queries(メディアクエリ)」のEmmet記法

@m[Tab]

記述例①「CSS3 Media Queries(メディアクエリ)」の展開

@media screen {

}

そこに以下の例のように「and (XXX: XXX)…」と追記をすれば、
CSS3 Media Queries(メディアクエリ)も簡単に対応が可能です。

@media screen and (min-width: 768px) and (max-width: 1023px) {

}

②!importantの展開

cssには値の優先順位を最大まで上げるための宣言である「!important」という記述があります。
例えば複数箇所で同じプロパティに対して違う値を指定している場合に、どちらを優先させるかの指定です。
「!important」に関しては以下のページを参考にしてください。

CSSの「!important」とは?CSSが適用されない時の対応方法 | 侍エンジニアブログ

例えば「pセレクタに中央揃えを指定し、他の箇所にあるpセレクタの指定より優先する」という場合は、
以下のように、「プロパティと値」のEmmet記述直後に「!」を入力して[Tab]キーを押します。

記述例②「!important」のEmmet記法

tac![Tab]

記述例②「!important」の展開

text-align: center !important;

ちなみにcss上では基本的に「id名やclass名の指定があるもの」「下に記述されているもの)」の順に優先されますが、
以下の記述がある場合、上述したもの無視して、セレクタ「p.left」よりもセレクタ「p」の方が優先されます。

p {
  text-align: center !important; /* コチラの方が優先される! */
}

p.left{
  text-align: left;
}

cssの基本入力練習

ではCodePenのウィンドウを使って練習してみましょう。
以下のCodePenのセレクタでmarginやpaddingのプロパティと様々な値の指定を行ってみましょう。
margin・paddingともに「プロパティのみ」「プロパティと値」のパターンを用意しています。

cssの入力① margin編

まずは以下のCodePenのpセレクタおよびdivセレクタに、
以下「プロパティのみ」「プロパティ + 値」の、それぞれ5つのmarginプロパティを展開してみましょう。

例題7-A「プロパティのみ」

mt[Tab]
mr[Tab]
mb[Tab]
ml[Tab]
m[Tab]

例題7-B「プロパティ + 値」

mt10[Tab]
mr20p[Tab]
mb0[Tab]
ml3e[Tab]
m0-a[Tab]

See the Pen Emmet練習 cssの入力① margin編 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

それぞれ・・・

例題7-Aの展開

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
margin: ;

例題7-Bの展開

margin-top: 10px;
margin-right: 20%;
margin-bottom: 0;
margin-right: 3em;
margin: 0 auto;

・・・と展開されていれば正解です。

cssの入力② padding編

次に以下のCodePenのpセレクタおよびdivセレクタに、
以下「プロパティのみ」「プロパティ + 値」の、それぞれ5つのpaddingプロパティを展開してみましょう。

例題8-A「プロパティのみ」

pt[Tab]
pr[Tab]
pb[Tab]
pl[Tab]
p[Tab]

例題8-B「プロパティ + 値」

pt10[Tab]
pr20p[Tab]
pb0[Tab]
pl3e[Tab]
p20-50-30[Tab]

See the Pen Emmet練習 cssの入力② padding編 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

それぞれ・・・

例題8-Aの展開

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
padding: ;

例題8-Bの展開

padding-top: 10px;
padding-right: 20%;
padding-bottom: 0;
padding-right: 3em;
padding: 20px 50px 30px;

・・・と展開されていれば正解です。

使用頻度の高いcssプロパティのEmmet記法と展開

ここからはコーディングを行う上で非常に頻度の高いプロパティのEmmet記法と展開を紹介します。
使用頻度の高いものには下線を引いておきます。

表示制御(displayプロパティ)

Emmet記法	展開
db[Tab]	display: block;
dib[Tab]	display: inline-block;
dn[Tab]	display: none;

位置指定系(position・left等のプロパティ)

Emmet記法	展開
ps[Tab]	position: relative;
psa[Tab]	position: absolute;
psf[Tab]	position: fixed;
t[Tab]	top: ;
r[Tab]	right: ;
b[Tab]	bottom: ;
l[Tab]	left: ;

縦横サイズ指定(width・height系プロパティ)

Emmet記法	展開
w[Tab]	width: ;
w数値[Tab]	例) w10 ・・・ width: 10px; 例) w20p ・・・ width: 20%;
h[Tab]	height: ;
w数値[Tab]	例) h50 ・・・ height: 50px; 例) h30p ・・・ height: 30%;
maw[Tab]	max-width: ;
mw[Tab]	min-width: ;
mah[Tab]	max-height: ;
mh[Tab]	min-height: ;

余白のサイズ指定(margin・padding系プロパティ)

Emmet記法	展開
m[Tab]	margin: ;
mt[Tab]	margin-top: ;
mr[Tab]	margin-right: ;
mb[Tab]	margin-bottom: ;
ml[Tab]	margin-left: ;
p[Tab]	padding: ;
pt[Tab]	padding-top: ;
pr[Tab]	padding-right: ;
pb[Tab]	padding-bottom: ;
pl[Tab]	padding-left: ;

フレックスボックス

Emmet記法	展開
df[Tab]	display: flex;
ai[Tab]	align-items: ;
aic[Tab]	align-items: center;
aifs[Tab]	align-items: flex-start;
fxw[Tab]	flex-wrap: ;
fxd[Tab]	flex-direction: ;
jc[Tab]	justify-content: ;
jcc[Tab]	justify-content: center;
jcfs[Tab]	justify-content: flex-start;

フォント・テキスト

Emmet記法	展開
c[Tab]	color: ;
fz[Tab]	font-size: ;
fw[Tab]	font-weight: normal;
ff[Tab]	font-family: ;
lh[Tab]	line-height: ;
ls[Tab]	letter-spacing: ;
ta[Tab]	text-align: ;
tac[Tab]	text-align: center;
td[Tab]	text-decoration: ;
tdn[Tab]	text-decoration: none;
tdu[Tab]	text-decoration: underline;

Emmetまとめ

今回は以上になります。
この他にもhtmlの属性などの指定やcssプロパティ・値などのEmmet記法がありますが、
Emmetの公式サイトやGoogleなどの検索エンジン「Emmet」などで検索して深掘りしてみましょう。

Emmet — the essential toolkit for web-developers