皆さんこんにちは！
匠本舗の現役WEBデザイナーのひぐちです。

最近HTMLやCSSを勉強し始めた方でこんな悩みをお持ちではないでしょうか？
「コーディングに時間がかかる…」
「タグを書くのがめんどくさすぎる…」
コーディングをしたことがある人であれば誰もが思うことだと思います。

今回はそんな悩みを解決するために、HTMLとCSSを超効率的に書くことができる「Emmet」をご紹介したいと思います。

この記事を読めばより効率的にコードを書けるようになりますので、ぜひ最後まで読んでいってください。それではいってみましょう！

EmmetはHTMLとCSSのコード補完ツールで、特定のキーワードや短縮記法を入力してタブキーを押すだけで展開できます。Visual Studio CodeやDream Weaverなどにも対応しており、特に繰り返しの多いWeb開発作業の効率を大幅に向上させます。
「タグの名前＋タブキー」を押すだけで自動で開始タグと閉じタグを入力してくれます。これがEmmetの機能です。

「タグの名前＋タブキー」で開始タグから閉じタグまで自動に入力されますが、今から解説する記述方法ではもっと複雑なネスト化したコードを簡単に書く方法を説明します。
以下のコードをみてください。

WEBサイトのナビゲーションでよく見るコードですが、先ほど説明した「タグの名前＋タブキー」で記述しても少しめんどくさそうな気がします。

こんな時に活躍してくれるのが以下の記述ルールです。

Emmetでは、記号と簡略化した文字列を組み合わせてコーディングを効率化します。
この表をもとにして上記コードを書こうと思うと以下のような入力になります。

この状態でタブキーを押すことで、先ほどのコードのような複雑にネスト化されたコードを一発で記述することができます。

■HTMLの基本構造を生成する方法

Emmetでは「!」と入力してタブキーを押すと、HTML5の基本構造が展開されます。

■親子関係の生成

div.container>ul>li.itemと入力してタブキーを押すと、以下のような親子関係のコードが展開されます。

■複数の兄弟要素を同時生成

header+main+footerと入力すれば、以下のコードが生成され、兄弟関係の要素がすべて展開されます。

■繰り返し要素の生成

Emmetの繰り返し機能を使うと、リストやグリッドのような繰り返し要素を一気に生成できます。 例えば、ul>li.item$*5と入力してタブキーを押すと、番号付きで5つのli要素が生成されます。

■CSSプロパティのショートカット

EmmetはCSSのプロパティ入力にも対応しており、短い記述でプロパティを展開できます。
例えば「m10」と入力してタブキーを押すと「margin: 10px;」を自動入力することができます。

• m10 → margin: 10px;
• p10-20 → padding: 10px 20px;
• bd1-s#333 → border: 1px solid #333;

■複数プロパティの組み合わせ

Emmetでは、複数のCSSプロパティを連続して指定することも可能です。例えば、d:f-jcsb-aicと入力すると、以下のコードが展開されます。

■条件付きクラスやIDの設定

Emmetの構文では、複数のクラスやIDを同時に設定可能です。例えば、.box#main.box1.box2と入力すれば、以下のような要素が展開されます。

■組み合わせによる複雑な構造の生成

Emmetの{}構文を利用すると、カスタムテキストを追加できます。例えば、ul>li{Item $}*3とすると、以下のようにリスト項目が自動生成されます。

Emmetを使いこなすと、HTMLとCSSの記述効率が格段に上がります。特に、繰り返し作業が減ることで作業時間が短縮され、クリーンなコードが自動生成されます。Emmetの構文を積極的に活用し、開発スピードを向上させましょう！

かにやおせち、海鮮食材などの新鮮な食材をお取り寄せしたい方へ
厳選食材の通販サイト
匠本舗/かに本舗

匠本舗【かに本舗】は、かにしゃぶやたらば蟹、おせち、明太子、貝などを中心としたかに通販のお店です。産地直接買い付けを行うなど、お客様の目や舌に代わって味や品質、価格に徹底してこだわった厳選食材の通販店です。蟹、特にかにしゃぶを中心に、おせちや梅干し、明太子などご好評を頂いています。

ネットショップ大賞 12年連続1位

【匠本舗/かに本舗】商品一覧