Emmet

Emmetは、HTMLやCSSを簡単に記述できるツールです。私が使っているテキストエディタ——Visual Studio Code——では、標準で使用できます。その省略記法をいくつか紹介しましょう。

HTML

! …… DOCTYPE宣言、htmlタグ、headタグ、bodyタグを一気に作ってくれます。

Image from Gyazo

タグは要素名を書くだけで<></>を補ってくれます。要素によっては、よく使う属性も自動でつけてくれます。

Image from Gyazo

idは「#id名」classは「.class名」タグ内のテキストは「{テキスト}」とします。idとclass以外の属性は[]内に記述します。

Image from Gyazo

一つ下の階層は「>」同じ階層は「+」一つ上の階層は「^」で指定できます。「*」を使って同じ要素を一度に複数作ったり、数学のように()で記述をまとめることもできます。

Image from Gyazo

CSS

marginやpaddingは「m」「p」で指定できます。方向を指定するには、「pt(padding-top)」「mb(margin-bottom)」のようにします。

数値の指定は以下のようになります。

  • 単位なしなら「px」
  • 「p」なら「%」
  • 「r」なら「rem」
  • 数値を複数指定する場合
    • pxならハイフンでつなぐ
    • %やremならハイフンなしでつなぐ
Image from Gyazo
m10p20p => margin: 10% 20%;
p10r20r => padding: 10rem 20rem;

その他のプロパティも、頭文字や最初の2〜3文字を入力すれば補完してくれます。

Image from Gyazo

コメント

タイトルとURLをコピーしました