CSSの省略記法のルール – Emmetチートシートからの抜粋

Emmetで利用できるCSSの記法は600種類を超えます。Emmet公式のチートシートが用意されていますが、すべてを覚える必要はありません。

省略のパターンとよく使うものに限定すれば、学習コストは低く抑えられます。

単語の先頭

CSSの省略記法は、主に単語の頭文字から作られています。下記の表は、その具体例です。

省略記法	プロパティ
w	width
h	height
m	margin
p	padding
c	color
fw	font-weight
ta	text-align
ls	letter-spacing

topやbottomなどの位置を示すプロパティも一文字で表現でき、marginやpaddingなどのプロパティの方向を定義する時に利用します。

省略記法	プロパティ
t	top
b	bottom
l	left
r	right
mt	margin-top
pl	padding-left

単語の頭文字から外れたルール

省略記法は単語の頭文字から作られている、といいましたが、すべてこのルールで作成されているわけではありません。例えば、頭文字が「b」のプロパティを挙げても、bottom, border, background, box-shadowなどがあります。

頭文字がいくつも重複しているプロパティは、2〜3文字の省略した文字で表します。

省略記法	プロパティ	頭文字が優先されているプロパティ
bd	border	b -> bottom
bg	background	b -> bottom
bgc	background-color	b -> bottom
fl	float	f -> font
pos	position	p -> padding
ov	overflow	o -> outline
cnt	content	c -> color

このような省略記法を全部覚えておく必要はありません。すでに紹介していますが、Emmetには「Fuzzy Search」という機能があります。ある程度のパターンを理解しておけば、なんとなくでもCSSが展開されます。

正式な省略記法でなくても展開される例

あいまいな省略記法	展開後
of	overflow: hidden;
po	position: relative;
ct	content: ;

ただ「Fuzzy Search」でも対応しにくいものがあるので、もう少しだけ省略ルールを覚えておきましょう。

対応しにくいルールとは、「size」「shadow」「box」の3つです。

sizeやshadowは、同じ頭文字の「style」とバッティングしやすく、boxも「bottom」にバッティングしやすい名前になっています。下記のルールを覚えておくといいでしょう。

省略記法	期待する展開	例
*z	**-size	fz -> font-size / bgz -> background-size
*sh	**-shadow	tsh -> text-shadow / bxsh -> box-shadow
bx*	box-**	bxsh -> box-shadow / bxz -> box-sizing

値も展開する

プロパティの展開は少し難しく感じたかもしれませんが、値の展開は簡単です。

数値を記述する場合は、省略記法のプロパティの後ろに数値を記述します。

省略記法で数値を指定

省略記法	展開後
w80	width: 80px;
w80p	width: 80%;
w8e	width: 8em;
w8.5	width: 8.5em;
w8.	width: 8em;
m8-16	margin: 8px 16px;
m8-0-4	margin: 8px 0 4px;
m-8–4	margin: -8px -4px;

上記の例のように数値のみを記述すると「px」の単位が自動で付与され、数値の後ろに特定の文字を追加すると、その文字にあわせて単位が変化します。

また数値を「-」でつないで記述するとスペース区切りの値も表現できます。

しかしCSSの値は、数字だけでなく文字列や色もあります。例えば、positionプロパティの値には「absolute」や「fixed」などの単語があります。

この値の単語に関しては、プロパティの省略記法で解説した「単語の頭文字ルール」がほぼ当てはまります。省略記法のプロパティに「:」か「-」でつないで単語の頭文字を記述すると展開されます。

省略記法で文字列の値を指定

省略記法	展開後
pos-a	position: absolute;
pos:a	position: absolute;
pos-f	position: fixed;
maw-a	max-width: auto;
fl-r	float: right;
td-u	text-decoration: underline;
d-i	display: inline;
d-ib	display: inline-block;
m4-a-8	margin: 4px auto 8px;

Emmetの色の指定については、いくつかの方法があり、主にプロパティの省略記法の後ろに「#」で区切り、16進数のカラーコードを指定します。

カラーコードの記述方法によっては、カラーコードを短くしたり、コードを補完する機能を持っています。

またEmmetのv1.1から、16進数のカラーコードからrgba()に変換する便利な機能が追加されています。

省略記法で色の値を指定

省略記法	展開後
c#3296ca	color: #3296ca;
c#339900	color: #390;
c#f	color: #fff;
c#fe	color: #fefefe;
c#aaa	color: #aaa;
c#aaa.7	color: rgba(170, 170, 170, 0.7);