HTML/CSS コーディング

VS codeのEmmetで長いコーディングを時短しよう

emmetで爆速コーディング

HTML、CSSでのコーディングをする際、
長々とコードを入力するのは面倒‥
知らぬ間にスペルミスが発生してしまってエラーが起きてしまう‥

そんな悩みを解決するのがEmmetです!

EmmetはVS CodeやDreamweaver、Atomといったエディタで使用できる、HTMLやCSSを短く、早く入力できるツールです。

通常のコードだと、box-sizing:border-boxとながーいコードもEmmetを使えば、bxz:bbと入力するだけでOKです。

今回は私が使用しているVS CodeでEmmetの使い方を勉強していきましょう。

VS Codeについて

VS Codeは正式名称がVisual Studio Codeで、Microsoftが提供している無料のエディタです。

数あるエディタの中でもVS Codeの使用率が一番高いと言われています。

Emmetの使い方

作成したHTMLファイルに!と入力します。

!を入力

Emmet Abbreviという箇所をクリックするか、キーボードのTabキーをクリックしましょう。

個人的にカーソルを移動させる時間が無駄なのでTabキーを押すのが素早くておすすめです。

Tabキーを押すと‥

HTMLの雛形が展開

なんと一発でHTMLの雛形(DOCTYPE)、html、head、bodyタグが展開されました。

これだけの宣言文を自力で入力するのも良いのですが、時間がもったいなく感じますのでEmmetでの展開がおすすめです。

HTMLでの応用例

タグの展開

divと入力

divタグの展開

divタグだけではなく、h1、img、navなど全てのタグがこの方法で展開できます。

タグにclassを付ける

div.containerと入力

div class="container"が展開

タグにclassを付ける時は『タグ + . class名』で展開できます。

タグにはclassの他にidを使用することもありますが、idの場合は . ではなく # を入力します。

複数のタグを展開

img*3と入力

imgが3つ展開

*は掛け算の記号なので*3でimgタグが3つ展開されます。

親タグと子タグを同時に展開

div#container>img*3と入力

divの子にimgが展開

id名containerのdivタグの子にimgタグを3つ展開しました。

子タグを展開する時は親と子の間に>を挟んであげます。

テキストを入力

{}の間にテキストを入力

テキストが入ったp要素が展開

テキストを{ }で囲うことで展開できます。

ちなみに要素の間に+を入力すると並列で展開することができます。

並列は+ 、 子要素にする時は>なのでお間違いなく。

CSSでの応用例

CSSでの入力一覧

今回は一気に紹介したいのでまとめて記載しましたが、本来は1つのCSSに対して1回ずつTabキーを押してください。

CSSでの展開結果

もっと深く知りたい方へ

今回の紹介は以上です。

Emmetにはたくさんの機能があるので、もっと詳しく学びたい方は下記サイトがおすすめです。

https://docs.emmet.io/cheat-sheet/

 

 

にほんブログ村 デザインブログ Webデザインへ

PVアクセスランキング にほんブログ村

-HTML/CSS, コーディング

© 2022 Yu-Design Powered by AFFINGER5