【CSS】Emmet使い方メモ

html

先月から週１で　"""本気の筋トレ"""　が始まりました、seconです。

前回（【HTML】Emmet使い方メモ - seconの日記）ではHTMLにおけるEmmetの使い方をまとめたので、今回は「CSS編」ということでまとめていきます。

使用環境などは前回を参照してください。

今回参考にしたページはこちらです。

使用例（CSS編）

大体はプロパティの頭文字を入力して [Ctrl + E] でなんとかなります。なんとかなります、というかなんとかなるからすごい。そして非常に気持ちいい。

他に気をつけておくべき点としては、

  • 複数行まとめて展開は出来ない
  • 基本的に "-" で繋がるプロパティ名は、頭文字を打てばOK
  • 先頭に "-" を打つと、ベンダープレフィックスを適切に入れてくれる

などがあります。

3つめについては、どうやらCSS3において使うようなので今回はまとめません。

基本

では実際にやってみましょう。手始めに、20px の margin でも設定してみましょう。

{
m20
}

これだけです。そして[Ctrl + E]。
するとこうなります。

{
margin: 20px;
}

気持ちいい。

まさかたったのこれだけで margin の設定ができる日が来るとは思いもしなかった。

次は padding も設定してみましょう。複数の値も設定可能です。

{
p5-10-15e20e

padding: 5px 10px 15em 20em;
}

単位を指定しない場合は基本的に px がつきます。

文字を中央揃えするための text-align も、これだけ。

{
tac

text-align: center;
}

値の指定

":" を使って値の指定もできます。float でやってみましょう。

{
fl:r

float: right;
}

clear も同様に。

{
cl:r

clear: right;
}

一括指定

backgroun など、複数の値を設定するプロパティには"+"を使ってやりましょう。

{
bg+

background: #fff url() 0 0 no-repeat;
}

border なんかでも使えますね。

{
bd+

border: 1px solid #000;
}

困ったら頭文字に[Ctrl + E]してるだけでも十分捗るのでお試しあれ。