スポンサーリンク
今回は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の書き方についてまとめたいと思います。...
スポンサーリンク
スポンサーリンク