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); |
0 件のコメント:
コメントを投稿