Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

覚えておきたいEmmet 20選(CSS編)

スポンサーリンク

CSS books

CSSを書く際によく使うEmmetをまとめました。


Emmetとは何かと基本の使い方に関しては、別記事で説明しているため、Emmetってなに?という方は下記記事から先にご覧下さい。


Emmet記法と結果が書いてある長文なので必要なところのみ参照してみてくださいね。

フォーマット設定関連

position

relative

pos + tabキー

position: relative;
absolute

pos:a + tabキー

position: absolute;
fixed

pos:f + tabキー

position: fixed;

display

block

d + tabキー

display: block;
none

d:n + tabキー

display: none;
flex

d:f + tabキー

display: flex;

overflow

hidden

ov + tabキー

overflow: hidden;
auto

ov:a + tabキー

overflow: auto;

マージン・パディング設定関連

margin

margin

m + tabキー

margin: ;
margin auto

m:a + tabキー

margin: auto;
padding

p + tabキー

padding: ;
padding上

pt + tabキー

padding-top: ;
padding右

pr + tabキー

padding-right: ;
padding下

pb + tabキー

padding-bottom: ;
padding左

pl + tabキー

padding-left: ;

t (top)・r (right)・b (bottom)・l (left)の記述はpaddign設定だけでなくmargin設定にもつかえます。

ボックスサイジング設定関連

box-sizing

border-box

bxz + tabキー

box-sizing: border-box;
box-shadow

bxsh + tabキー

box-shadow: inset hoff voff blur #000;

w + tabキー

width: ;
幅auto

w:a + tabキー

width: auto;
高さ

h + tabキー

height: ;
高さauto

h:a + tabキー

height: auto;

フォント設定関連

フォント

フォント基本設定

f + tabキー

font: 1em sans-serif;
フォントの太さ(普通)

fw + tabキー

font-weight: normal;
フォントの太さ(太い)

fw:b + tabキー

font-weight: bold;
フォントのスタイル

fs + tabキー

font-style: italic;
フォントのサイズ

fz + tabキー

font-size: ;
フォントファミリー

ff + tabキー

font-family: serif;

テキスト設定関連

テキストの配置

左揃え

ta + tabキー

text-align: left;
中央揃え

ta:c + tabキー

text-align: center;
右揃え

ta:r + tabキー

text-align: right;

テキストの装飾

なし

td + tabキー

text-decoration: none;
下線

td:u + tabキー

text-decoration: underline;
すべて大文字

tt + tabキー

text-transform: uppercase;
テキストラップ

tw + tabキー

text-wrap: none;

背景設定関連

バックグラウンド

背景色

bg + tabキー

background: #000;
背景画像

bgi + tabキー

 background-image: url();

バックグラウンドサイズ

基本形

bgsz + tabキー

background-size: contain;
カバー

bgsz:c+ tabキー

background-size: cover;

文字色設定関連

文字色

カラー

c + tabキー

color: #000;
オパシティ(透明度)

op + tabキー

opacity: ;

ボーダー設定関連

ボーダー

bd + tabキー

border: 1px solid #000;
角の丸み

bdrs + tabキー

border-radius: ;

リスト設定関連

リスト装飾

li + tabキー

list-style: ;

レスポンシブ設定関連

レスポンシブ書き出し

@m + tabキー

@media screen {
    
  }

フレックス設定関連

子要素の並ぶ向き

横並び

fxd + tabキー

 flex-direction: row;
縦並び

fxd:c + tabキー

  flex-direction: column;

子要素の折り返し

初期値

fxw + tabキー

 flex-wrap: nowrap;
折り返す

fxw:w + tabキー

 flex-wrap: wrap;

水平方向の揃えかた

初期値

fc + tabキー

 justify-content: flex-start;
中央揃え

fc:c + tabキー

justify-content: center;
要素同士に均等に間隔をあける

fc:sb + tabキー

justify-content: space-between;
要素周りに均等に間隔をあける

fc:sa + tabキー

justify-content: space-around;

垂直方向の揃えかた

初期値

ai + tabキー

  align-items: flex-start;
中央揃え

ai:c + tabキー

  align-items: center;

複数業になる時の揃えかた

初期値

ac + tabキー

  align-content: flex-start;
中央揃え

ac:c + tabキー

  align-content: center;
行同士に均等に間隔をあける

ac:sp + tabキー

  align-content: space-between;
行周りに均等に間隔をあける

ac:sa + tabキー

  align-content: space-around;

その他

子要素の基本幅の指定

fxb + tabキー

  flex-basis: fill;
まとめて指定

fx + tabキー

  flex: ;

最後に

ご紹介したのは実際私がCSSを書く時によく使うものをまとめたもなので、もっと知りたい場合はEmmetチートシートCheat Sheet)を確認して、よく使うタグのEmmet記法を確認してみてください。

HTMLのEmmetをまとめた記事もありますので、よければご覧ください。