恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【CSS編】最低限知っておくと便利なEmmet!

投稿日:




 

今回は、前回ご紹介した「【HTML編】最低限知っておくと楽なEmmet」のCSS編についてご紹介していきます!

Emmetって何?という方は前回の記事を参考にしてください!
※展開の仕方はHTML同様、Tabキーで展開されます。

それでは早速説明していきます!

CSS編

プロパティの展開

CSSでは、プロパティと値の頭文字をつなげて展開する形多いです!

例)w100、h100、tdnをそれぞれ展開すると・・・

body{
    width: 100px;
    height: 100px;
    text-decoration: none;
}

 

となります。長いプロパティもEmmetであっという間にかけちゃいますね!

単位の展開

よく使う単位の指定は最初の文字だけで展開することが可能です!

何も単位を指定せずに展開するとデフォルトでpxが付くようになります。

例)m5、m5p、m5e、m5rをそれぞれ展開すると・・・

body{
    margin: 5px;
    margin: 5%;
    margin: 5em;
    margin: 5rem;
}

 

となり、簡単に単位を指定することが出来ました!

複数の指定

+で複数のプロパティを展開できます。

例)w100+m100p+tdn+c#fffを展開すると・・・

body{
    width: 100px;
    margin: 100%;
    text-decoration: none;
    color: #ffffff;
}

 

+を入力するだけでそれぞれ展開せずに済みますね!

-で値を複数指定できます。

例)p5-10-0-20+m0-aを展開すると・・・

body{
    padding: 5px 10px 0 20px;
    margin: 0 auto;
}

 

-でつなげることが出来るので、いちいち単位を指定する必要もありません!

ベンダープレフィックス

例)-bdrs15を展開すると・・・

body{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

 

-を前につけることで一気に記載できてとっても楽ですね!

以上、最低限知っておくと便利なEmmet【CSS編】でした!

HTMLに続き、CSSでもEmmetをフル活用して、楽で早いコーディングをしていきましょう!




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

noda

noda

めざせ万能デザイナー。HTML/CSS、JavaScript、PHP、Photoshop、Illustratorを扱っています。好きな食べものはうどん。