CSS文法

目次

• プロパティと値
• 単位
• あいまい検索
• ベンダープレフィックス

プロパティと値

emmetのcss文法はいたって単純です。HTMLのような構造化言語ではないので、記述したいCSSプロパティのスニペットを入力し展開するだけです。

例1

bg
bgc
mt

background: ;
background-color: #fff;
margin-top: ;

プロパティは数多いので覚えるのが大変でしょうか？しかしおおむねプロパティの頭文字1、2文字程度なので苦労することはないでしょう。なお、例ではスニペットと展開後をそれぞれまとめて書いていますが、これらは複数行まとめての展開はできません。

また、プロパティに値を入力する場合も同様です。

例2

ov:h
ta:c

overflow: hidden;
text-align: center;

通常のCSSのルール通り「:（コロン）」の前がプロパティ名、後ろが値です。接尾の「;(セミコロン)」は不要です。数値でない値もほぼ値の頭文字と考えていいでしょう。

これらのスニペットについてはチートシートに一覧があるので不明な場合はそちらを参照ください。

単位

値に単位は通常使う単位通り入力すればいいのですが、以下のような省略記法もあります。

スニペット	単位
p	%
e	em
x	ex
指定なし数値のみ	px

例

p5p
m7e
w100x
h50

padding: 5%;
margin: 7em;
width: 100ex;
height: 50px;

あいまい検索

emmetではCSSスニペットを必ずしも厳密なルールにのっとって記述しなくとも解釈・展開が可能な場合が多々あります。

例えば

overflow: hidden;

このようなプロパティと値を指定したい場合、以下のショートーコードのいずれでも同じ展開結果が得られます。

ov:h

ovh

ov-h

oh

いかがでしょうか。これは「あいまい検索（Fuzzy search）」という機能で、かなり柔軟にスニペットの解釈を行ってくれます。

ベンダープレフィックス

ベンダープレフィックスについては通常特に指定する必要はありません。そのバージョン時点において必要であると推測されるベンダープレフィックスは自動的に追加されます。

例1

bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

また、通常ベンダープレフィックスを付けないプロパティに明示的にベンダープレフィックスを付ける場合はプロパティの前に「-(ハイフン)」を付けます。

例2

-ov:h

-webkit-overflow: hidden;
-moz-overflow: hidden;
-ms-overflow: hidden;
-o-overflow: hidden;
overflow: hidden;

どのレンダリングエンジン（ブラウザ）のプレフィックスを付けるか、ということを明示的に指定することもできます。「-(ハイフン)」に続きプレフィックスの接頭辞一字を付して入力します。

-w	webkit(Chrome,Safari)
-m	moz(Firefox)
-s	ms(Internet Explorer)
-o	o(Opera)

例3

-w-ov:h

-webkit-overflow: hidden;
overflow: hidden;