2016年10月25日火曜日

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

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

省略記法

プロパティ

t

top

b

bottom

l

left

r

right

mt

margin-top

pl

padding-left

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

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

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

省略記法

プロパティ

頭文字が優先されているプロパティ

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つです。

sizeshadowは、同じ頭文字の「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進数のカラーコードを指定します。

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

またEmmetv1.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 件のコメント:

コメントを投稿