PhpStormのEmmetを使ってコーディングの作業効率をあげよう

こんにちは。デザイナーのKです。
１年半くらい産休＆育休で休職しており、最近復職しました。
そうしたら仕事の色々な事を見事に忘れててこれはまずい・・( ˊᵕˋ； )ってなったので、初心に戻ってツールの使い方から再確認することにしました。

コーディングで使用するEmmetのショートカットについてまとめたので、これから使用する方や勉強中の方の参考になったらいいなと思います。

Emmetとは

入力補完機能によって、HTMLやCSSをより素早く編集できるテキストエディター用プラグインです。（現在のPhpStormにはデフォルトで入っているので、改めてプラグインを入れる必要はありません。）

公式のドキュメントやチートシートがあるので、どんなショートカットが利用できるかは確認してみてください。

ドキュメント：https://docs.emmet.io/
チートシート：https://docs.emmet.io/cheat-sheet/

Emmetの使い方

決められた記法で入力して、tabキーで展開します。
例えば、htmlのulとliとaタグを一気に書いてみます。

と記入して、tabで展開します。

このように少ない記述からHTMLのソースを作成することができます。

CSSも同じように決められた記法で入力してみます。

複数のプロパティを一気に記述したいときは、上記のように「+（プラス）」でつなげます。
呪文のようですが、まずはよく使うものから少しずつ覚えていくと良いかと思います。

今回は基本的な記法をいくつかピックアップしました。

【HTML】

『>』を使用して要素をネストさせる。

展開前

展開後

 

『+』を使用して要素を同じレベルで配置する。

展開前

div+p

1

div+p

展開後

<div></div> <p></p>

1 2	<div></div> <p></p>

 

『*』を使用して要素を繰り返す。

展開前

展開後

idやclassをつける

展開前

展開後

ちなみに、PhpStormの環境設定＞Emmet＞HTMLの設定で、「略語プレビューを有効化」にチェックを入れると、展開前のコード入力時にプレビューが表示されるようになります。

【CSS】

プロパティの頭文字のみを入力して展開すると、空の値もしくはデフォルトの値で展開されます。

Emmet	展開後
w	width: ;
m	margin: ;
p	padding: ;
c	color: #000;
bd	border: ;
d	display: block;

値の指定して展開することもできます。

Emmet	展開後
w100	width: 100px;
m0auto	margin: 0 auto;
p10-20	padding: 10px 20px;
c#3	color: #333333;
bd+	border: 1px solid #000;
d:f	display: flex;

CSSの省略記法はプロパティの頭文字になっていることが多いですが、中には２文字、３文字の記法になっているプロパティもあります。

まとめ

今回紹介したものはほんの一部なので、気になった方はぜひ公式ドキュメントなどを確認してみてください。
特に新規コーディングでは大活躍すると思うので、ぜひマスターしてコーディング速度を上げていきましょう。