スポンサーリンク
今回は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の使い方【HTML編】今回はHTMLやCSSを効率的に書くことができる便利なツールEmmetについてご紹介したいと思います。
こちらの記事では、HTMLの書き方についてまとめたいと思います。...
スポンサーリンク
     スポンサーリンク
     
 
 
 
 
 
 
 










