京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

Emmetの扱い方-CSS編

2016年01月13日工藤
Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは、水曜日のブログ担当の工藤です。

前回に引き続きEmmetのCSSの書き方について解説していきます。
とはいっても、数が多すぎるためよく使うものをピックアップして紹介していきます。

CSSをEmmetで転換する

エディッタを使っていた場合、コードヒントは表示されますがEmmetを使用することで、さらにコーディングのスピードを上げる事が出来ます。

.sample{
  m-10-5+p1vh-2em-3rem-4%
}

上記のようなコードを転換すると、下記のコードに変換してくれます。

.sample{
  margin: -10px 5px;
  padding: 1vh -2em -3rem -4%;
}

こちらのEmmetは、エディッタのプラグインを入れてなくてもcssPenのサイトで試すことが出来るので、試してみて気に入ったら導入してみるとよいでしょう。

基本

基本的にCSSプロパティの頭文字二文字目ぐらいまでを転換すると、該当するプロパティになってくれる事が多いです。
数が多いためすべては紹介出来ませんが、よく使うプロパティを紹介します。

.sample{
  bg 
  p
  m
  f
  cl
  f
  po
  d
}
.sample{
  background: #000;
  padding: ;
  margin: ;
  font: ;
  clear: both;
  font: ;
  position: relative;
  display: block;
}

ショートハンド系は、更に一文字加えると

.sample{
  bgi
  bgs
  bgr
  bga
  bgp
}
.sample{
  background-image: url();
  background-size: ;
  background-repeat: ;
  background-attachment: ;
  background-position: 0 0;
}

プロパティを加えるなら

.sample{
  por
  poa
  pof
  pos:s 
}
.sample{
  position: relative;
  position: absolute;
  position: fixed;
  position: static;
}

このように転換してくれます。慣れないうちは大変ですが覚えていくと法則性が見えてきて勘で書けるようになっていきます。

マージンとパディングのショートハンド

マージンとパディングのEmmetは大変便利なので、是非使いこなせると時間短縮になります。

.sample{
  ml
  mr
  mt
  mb
}

.sample{
  margin-left: ;
  margin-right: ;
  margin-top: ;
  margin-bottom: ;
}
[/cpde]

ショートハンドは、【-】で繋げます。
単位は記述しなければ、px。%やemなども可能です。


.sample{
  m5-10
  m1-auto
  m1-2-3-4
}
.sample{
  margin: 5px 10px;
  margin: 1px auto;
  margin: 1px 2px 3px 4px;
}

その他の転換

!important

!で!importantに転換出来ます。

.sample{
  tar!
}
.sample{
  text-align: right !important;
}

メディアクエリ

@mでメディアクエリに転換出来ます。

@m
@media screen {
  
}

終わりに

Emmetを使えば、コードを書く時間も短くすみます。
また、非常に簡単なのですぐに覚えれると思いますが、はじめからEmmetに頼って書いてしまうと本来のタグを思い出せなくなったりするので、2,3ヶ月はEmmetに頼らないで書くことをオススメします。
これは、便利なエディッタでも同じですがコードヒントなどを頼りにしすぎて本来の単語を忘れたりしてしまうので、勉強したての頃は覚えるつもりでコードを一字一句打っていくと、覚えるのも早くなるかと思います。

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら