CSSを素早く書く方法 (Emmet)

はじめに

この記事は先日投稿した記事のCSS版です。
Emmetについてご存知ない方や、HTMLでの使用例にご興味のある方は、
以下の記事も併せて参照していただけると嬉しいです。

今回も私がよく使うものに絞って紹介します。
詳しく知りたい方は以下のチートシートを参照してください。

使い方

HTMLと同様、キーワードを入力してTabキーまたはEnterキーを押すだけです

よく使うキーワード

() 付きのプロパティ値に付いて

コードブロックで () を付けているものは初期値で、変換後に続けて値を入力することで変更可能です。
複数ある場合はTabキーで次の入力欄に飛びます。
↓こんな感じです↓

top, right, bottom, left

/* tをr, b, lに変えればそれぞれright, bottom, leftに */

/* t */
top: ;

/* t10 */
top: 10px;

display

/* d */
display: (block);

/* df */
display: flex;

margin, padding

/* mをpに変えればpaddingに */

/* m */
margin: ;

/* m5 */
margin: 5px;

/* m10px20px */
margin: 10px 20px;

/* mb2r */
margin-bottom: 2rem;

box sizing

/* wをhに変えればheightに

/* w */
width: ;

/* wa */
width: auto;

/* w50p */
width: 50%;

/* maw */
max-width: ;

/* miw */
min-width: ;

font

/* fw */
font-weight: (normal);

/* fz */
font-size: ;

/* fz16 */
font-size: 16px;

text

/* ta */
text-align: (left);

/* tac */
text-align: center;

/* td */
text-decoration: none;

background

/* bc */
background-color: (#fff);

/* bc#333 */
background-color: #333;

color

/* c */
color: #000;

/* c#eee */
color: #eee;

border

/* tをr, b, lに変えればそれぞれright, bottom, leftに

/* bd */
border: (1px) (solid) (#000);

/* bdn */
border: none;

/* bdt */
border-top: (1px) (solid) (#000);

lists

/* lis */
list-style: ;

/* lisn */
list-style: none;

flexbox

/* fxd */
flex-direction: (row);

/* fxw */
flex-wrap: (nowrap);

/* jc */
justify-content: (start);

/* ai */
align-items: (start);

おわりに

CSSはプロパティが多くEmmetであいまい検索が働くこともあって、書き方は多種多様です。
チートシートや当記事以外のものでも、それらしい書き方をすれば変換できたりしますので、
ぜひいろいろ試してみてください。