※当サイトではアフィリエイト広告を利用しています

その他

【コーディング爆速】Emmetの使い方【CSS編】

【コーディング爆速】Emmetの使いかた【CSS編】

今回はHTML編に続けて、CSSで使う頻度が高そうなEmmetを
自分なりにグループ分けしてまとめてみたいと思います。

レイアウト系

レイアウト:position

  • pos→position:relative;
  • pos:a→position:absolute;
  • pos:f→position: fixed;

レイアウト:display

  • d→display:block;
  • d:n→display: none;
  • d:i→display: inline;
  • d:ib→display: inline-block;
  • d:tb→display: table;

レイアウト:flex

  • ai→align-items:;
  • ai:c→align-items:center;
  • jc→justify-content:;
  • jc:sb→justify-content:space-between;
  • fxd→flex-direction:;

レイアウト:その他

  • z→z-index:;
  • fl→ float:left;
  • fl:r→float: right;
  • cl→clear:both;
  • ov→overflow: hidden;
  • cur:p→cursor: pointer;

ボックスモデル系

ボックスモデル:ボックス関連

  • bxz→box-sizing:border-box;
  • bxsh→box-shadow:inset x y blur color;

ボックスモデル:高さ・幅

  • w→width:;
  • h→height:;
  • maw→max-width:;
  • miw→min-width:;
  • mih→min-height:;

ボックスモデル:余白

  • m→margin:;
  • m:a→margin: auto;
  • p→padding:;

文字系

  • fw→font-weight:;
  • fz→font-size:;
  • ff→font-family;
  • ta:c→text-align:center;
  • td→text-decoration: none;
  • lh→line-height:;
  • lts→letter-spacing:;

装飾系

装飾:色

  • c→color:#000;
  • c:ra→color:rgba(0, 0, 0, .5);
  • op→opacity:;

装飾:背景

  • bg→background:#000;
  • bgr:n→background-repeat:no-repeat;
  • bgsz:cv→background-size:cover;

装飾:ボーダー

  • bd+→border:1px solid #000;
  • drs→border-radius:

装飾:リスト

lis:n→list-style:none;

アニメーション系

  • anim→animation:;
  • bfv:h→backface-visibility:hidden;
  • trf→transform:;
  • @kf→@keyframes identifier {
    from {}
    to {}
    }

その他

  • @i→@import url();
  • @m→@media screen {}

以上、CSSのemmetの書き方でした。

【コーディング爆速】Emmetの使いかた【CSS編】
【コーディング爆速】Emmetの使い方【HTML編】今回はHTMLやCSSを効率的に書くことができる便利なツールEmmetについてご紹介したいと思います。 こちらの記事では、HTMLの書き方についてまとめたいと思います。...