HTMLだけじゃない?emmetを使ってCSSを爆速で書く方法

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。今回はemmetというHTML/CSSを短縮記法で書けるようになるツールを紹介します。主にCSSのよく使う短縮記法をお伝えしようと思います。

emmetとは

emmetは、先に紹介したようにHTML/CSSの短縮記法を使えるようにするツールです。有名どころのテキストエディタであれば拡張機能として用意されていることがほとんどなのでぜひ入れましょう。

導入すると、エディタ上で短縮記法を入力し、tabキーでコードが展開されるようになります。HTMLの短縮記法は例えば以下のようなものがあります。

こんな感じで、少ない文字入力で一気にコードが展開されます。

このような短縮がCSSでも行えます。CSSではほとんどのプロパティを2〜4文字で書け、非常に効果が高いのでぜひこの記事を読んで覚えて欲しいです!

CSSの短縮記法

ここからは一気に記法を紹介します。一部テキストエディタによって展開されるコードが異なる場合があるようなので、ご注意ください。

margin/padding

display

position

overflow

width/height

background

flex系

text関係

随分長くなりましたが、よく使うのはこの辺りですね。

まとめ

いかがでしたでしょうか。
CSSのプロパティ名はタグ名に比べて長くなりがちですし、そもそもコード行数も基本的にはCSSの方が長いです(メディアクエリなどもあるので)。
他にも短縮記法はたくさんあるので、興味ある方はこちらを見てみてください。

CSSのemmetを覚えることで記述量をがっつり減らして、爆速コーディングしましょう!

この記事を読んだ人へのおすすめ記事

HTMLタグに必ずクラスをつけるべき理由

2019年5月20日

【Sass/Less/Stylus】たった2行書くだけ!CSSプリプロセッサ入門【習うより慣れろ】

2019年4月10日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz