CSS文法
目次
プロパティと値
emmetのcss文法はいたって単純です。HTMLのような構造化言語ではないので、記述したいCSSプロパティのスニペットを入力し展開するだけです。
例1
1 2 3 | bgbgcmt |
1 2 3 | background: ;background-color: #fff;margin-top: ; |
プロパティは数多いので覚えるのが大変でしょうか？しかしおおむねプロパティの頭文字1、2文字程度なので苦労することはないでしょう。なお、例ではスニペットと展開後をそれぞれまとめて書いていますが、これらは複数行まとめての展開はできません。
また、プロパティに値を入力する場合も同様です。
例2
1 2 | ov:hta:c |
1 2 | overflow: hidden;text-align: center; |
通常のCSSのルール通り「:（コロン）」の前がプロパティ名、後ろが値です。接尾の「;(セミコロン)」は不要です。数値でない値もほぼ値の頭文字と考えていいでしょう。
これらのスニペットについてはチートシートに一覧があるので不明な場合はそちらを参照ください。
単位
値に単位は通常使う単位通り入力すればいいのですが、以下のような省略記法もあります。
| スニペット | 単位 |
|---|---|
| p | % |
| e | em |
| x | ex |
| 指定なし数値のみ | px |
例
1 2 3 4 | p5pm7ew100xh50 |
1 2 3 4 | padding: 5%;margin: 7em;width: 100ex;height: 50px; |
あいまい検索
emmetではCSSスニペットを必ずしも厳密なルールにのっとって記述しなくとも解釈・展開が可能な場合が多々あります。
例えば
1 | overflow: hidden; |
このようなプロパティと値を指定したい場合、以下のショートーコードのいずれでも同じ展開結果が得られます。
1 2 3 4 5 6 7 | ov:hovhov-hoh |
いかがでしょうか。これは「あいまい検索（Fuzzy search）」という機能で、かなり柔軟にスニペットの解釈を行ってくれます。
ベンダープレフィックス
ベンダープレフィックスについては通常特に指定する必要はありません。そのバージョン時点において必要であると推測されるベンダープレフィックスは自動的に追加されます。
例1
1 | bdrs |
1 2 3 | -webkit-border-radius: ;-moz-border-radius: ;border-radius: ; |
また、通常ベンダープレフィックスを付けないプロパティに明示的にベンダープレフィックスを付ける場合はプロパティの前に「-(ハイフン)」を付けます。
例2
1 | -ov:h |
1 2 3 4 5 | -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
1 | -w-ov:h |
1 2 | -webkit-overflow: hidden;overflow: hidden; |