• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

sass/cssで使いたい!Emmetのおすすめショートカット集

投稿者アイコン
2017/04/03
書いた人:
rurippa!
カテゴリ:
CSS   Web制作
12,199 views

sass / scss / cssコーディングで使用できるものに限定した、Emmetおすすめショートカット一覧です。

sass/cssで使いたい!Emmetのおすすめショートカット集

皆さんはEmmetを使っていますか?

Emmetチートシートという便利なものもありますが、
実際に使っているのは、この中の一部だったりします。。

ということで、
今回はsass/cssコーディングで使用できるものに限定し、
その中でもオススメを紹介します!

ちょこっと応用編もありますので、合わせてチェックしてみてください。
早速紹介していきます〜

おすすめショートカット(基本編)

※コマンドに使用している「:」は省略できます。

display

コマンド 展開後
d display: block;
d:n display: none;
d:i display:inline;
d:ib display:inline-block;

position、z-index系

コマンド 展開後
pos:a position:absolute;
pos:r position: relative;
t top: ;
r right: ;
b bottom: ;
l left: ;
z z-index: ;

float系

コマンド 展開後
fl float: left;
fl:r float: right;
cl clear: both;

margin

コマンド 展開後
m margin: ;
mt margin-top: ;
mr margin-right: ;
mb margin-bottom: ;
ml margin-left: ;
m0-a margin: 0 auto;

padding

コマンド 展開後
p padding: ;
pt padding-top: ;
pr padding-right: ;
pb padding-bottom: ;
pl padding-left: ;

background

コマンド 展開後
bg background: #000;
bgc background-color: #fff;
bgi background-image:url();
bgr background-repeat:;
bgp background-position:0 0;

font,text系

コマンド 展開後
fz font-size: ;
fw font-weight: ;
lh line-height:;
ta:c text-align:center;
c color: #000;

ちょこっと応用編

数字・単位の扱い方

デフォルトの単位はpxになっています。
%はp、emは.で扱うことができます。

コマンド 展開後
w10 width: 10px;
w10p width: 10%;
w10. width: 10em;

カラーの指定方法

通常のコマンドの後に、カラーを指定します。

コマンド 展開後
c#eee color: #eee;
bgc#eee background-color: #eee;

ショートハンドプロパティの展開

最後に+をつけることで、ショートハンドプロパティが記述された状態で展開されます。

コマンド 展開後
bg+ background: #fff url() 0 0 no-repeat;
bd+ border: 1px solid #000;

ベンダープレフィックスの追加

頭に-をつけることで、ベンダープレフィックスが記述された状態で展開されます。

コマンド 展開後
-trf -webkit-transform: ;
-ms-transform: ;
transform: ;

+でつないで、一気に展開する方法

各コマンドを+でつなげることで、一気に展開することができます。

コマンド 展開後
w100+h200+m0-a width: 100px;
height: 200px;
margin: 0 auto;

まとめ

今回は以上になります。

なんとなく使っているうちに覚えてきたりもしますので、 少しづつ使っていきましょ〜!


この記事を読んだ人はこんな記事も読んでいます