WebEmmetはHTMLだけなく、CSSでも省略記法を利用できます。Emmetを使ってCSSを書くには慣れが必要ですが、ある程度覚えればコードヒントを使うよりも素早くCSSの記述ができるようになります。今回はCSSの省略記法について解説します。多くのエディタにはコードヒントが付いており、コードの記述をサポートしてくれる機能があります。CSSのコードヒントの場合は、入力した文字からプロパティの絞り込みが行われ、文字をさらに入力していくか、コードヒントの候補から選択することでプロパティを確定します。プロパティの値もプロパティ名と同様に文字を入力するか、コードヒントの候補から値を探す流れになります。このように、コードヒントを利用すると長いプロパティ名などを記述せずに済むので、正確にCSSを定義することができます。EmmetのCSSの省略記法を用いると、コードの正確性を保ったまま、コードヒントよりもCSSの記述スピードを上げられます。下記のGIF画像は、同じCSSの内容をコードヒントとEmmetを使って記述した比較です。EmmetのCSS記法の特徴は、候補の中から探すことをせずに、一瞬でプロパティと値の両方を展開できる点です。そのためプロパティと値をそれぞれ一つ一つ選択していくコードヒントと比べて、約半分の時間でCSSを記述することができます。EmmetでCSSの省略記法を展開する方法は、HTMLと同様です。Abbreviation」のショートカットキーか、キーボードの[Tab]キーで展開します。Search(あいまい検索)CSSの省略記法はZen-Codingの頃から利用できましたが、チートシートを丸暗記しなければならず、1文字でも間違えると展開されませんでした。そのため敷居が高く、あまり話題に挙がることが少ない機能でした。Search」という機能が追加され、あいまいに記述してもCSSが展開されるように改良されています。この機能によってCSSの省略記法の敷居が下がり、Emmetのルールをある程度理解すれば、使いこなすことができます。Emmetチートシートからの抜粋Emmetで利用できるCSSの記法は600種類を超えます。Emmet公式のチートシートが用意されていますが、すべてを覚える必要はありません。省略のパターンとよく使うものに限定すれば、学習コストは低く抑えられます。単語の先頭CSSの省略記法は、主に単語の頭文字から作られています。下記の表は、その具体例です。letter-spacingtopやbottomなどの位置を示すプロパティも一文字で表現でき、marginやpaddingなどのプロパティの方向を定義する時に利用します。padding-left単語の頭文字から外れたルール省略記法は単語の頭文字から作られている、といいましたが、すべてこのルールで作成されているわけではありません。box-shadowなどがあります。頭文字がいくつも重複しているプロパティは、2〜3文字の省略した文字で表します。colorこのような省略記法を全部覚えておく必要はありません。Search」という機能があります。ある程度のパターンを理解しておけば、なんとなくでもCSSが展開されます。Search」でも対応しにくいものがあるので、もう少しだけ省略ルールを覚えておきましょう。対応しにくいルールとは、「size」「shadow」「box」の3つです。sizeやshadowは、同じ頭文字の「style」とバッティングしやすく、boxも「bottom」にバッティングしやすい名前になっています。下記のルールを覚えておくといいでしょう。box-sizing値も展開するプロパティの展開は少し難しく感じたかもしれませんが、値の展開は簡単です。数値を記述する場合は、省略記法のプロパティの後ろに数値を記述します。-4px;上記の例のように数値のみを記述すると「px」の単位が自動で付与され、数値の後ろに特定の文字を追加すると、その文字にあわせて単位が変化します。数値を「-」でつないで記述するとスペース区切りの値も表現できます。CSSの値は、数字だけでなく文字列や色もあります。positionプロパティの値には「absolute」や「fixed」などの単語があります。この値の単語に関しては、プロパティの省略記法で解説した「単語の頭文字ルール」がほぼ当てはまります。省略記法のプロパティに「:」か「-」でつないで単語の頭文字を記述すると展開されます。8px;Emmetの色の指定については、いくつかの方法があり、主にプロパティの省略記法の後ろに「#」で区切り、16進数のカラーコードを指定します。カラーコードの記述方法によっては、カラーコードを短くしたり、コードを補完する機能を持っています。Emmetのv1.1から、16進数のカラーコードからrgba()に変換する便利な機能が追加されています。以上の内容だけでもEmmetを使って、CSSを素早く記述できまが、プラスαで覚えておくと記述がより楽になる機能を紹介します。Abbreviation(interactive)」という機能があります。この機能はHTMLだけでなく、CSSの展開にも利用できます。CSSの省略記法は、どのように展開されるのか想像しにくいものもあるので、最初はこの機能で省略記法を入力していくといいでしょう。[複数の]プロパティを繋げるときは、[画像上→上のアニメーション]で行っているように「+」でつなげて記述します。「+」はプロパティをつなげて1行で記述する時に使用しますが、特定の値を表示するする時にも利用します。「bd+」と記述すると、線幅や色などが追加された状態で展開されます。backgroundやborderプロパティでよく利用する方法です。Arial,sans-serif;IEのサポートEmmetはIEの独自拡張機能にも、一部サポートしています。これらの拡張機能はほとんど使わなくなってきましたが、IE8でも使える「op:ms」は覚えておくと便利な機能です。1;CSS3の対応Emmetは多くのCSS3プロパティにも対応しています。user-selectといったマイナーなものまでサポートしています。ブラウザのサポートが進んでいるCSS3プロパティはベンダープリフィックスを表示しないようになっていたり、グラデーションの最新の構文に対応しているなど細かい調整が行われています。#000);さらに-o-のベンダープレプレフィックスを表示したくない場合や、CSS3のグラデーション時にフォールバックの指示などの細かい設定もできます。これらの設定方法は第4回で解説します。CSSの省略記法は複雑に感じたかもしれませんが、コードヒントでやっていたことの延長線でしかありません。今回の内容を読んだ後に、少しだけでもEmmetのCSSを触っていただけると幸いです。これだけでは展開できない箇所も出てくると思います。その時は、チートシートを確認して少しずつ覚えていきましょう。Emmetの公式チートシートがありますが、載っていない省略記法もあります。すべての省略記法を確認したい場合は、Emmetを開発しているGitHubのsnippets.jsonを参照するといいでしょう。