2020.10.18  2021.04.04

EMMETを使ってHTMLとCSSのコーディングを爆速にする方法を紹介

こんにちは!マコブログです!

今回は入力補完機能を搭載したソフトウェア、「EMMET」を使用して、WEBサイト構築を爆速にする方法について説明します。

divタグとかimgタグとかtableタグとか、いちいち打つのがしんどいな…という人は必見の記事です!



まず、今回使用するエディターは、マイクロソフトが提供するVSC(Visual Studio Code)と呼ばれるエディターです。

このVSCで、HTMLファイル、CSSファイルを準備してください。

HTMLでEMMETを使いこなす

まずはdivを打ってみましょうか。

div.

はい、完成です。これでenterキーを押してみてください。

<div class=""></div>

↑↑↑↑
こうなっていますよね?
これがEMMETの画期的なところです。(有能すぎ…。)

どんどん行きますよ~!!

「あ~<li>10個打つのだるいな~」
そんなときは、

li.*10.

こうです。簡単に解説すると、li.の「.」は、要素にclass=””をつけて生成してくれます。
*は掛け算で、何個要素を生成するかを決めることができます。
※最後に「.」がついていますが、これは「エディター側にEMMETで変換して!」という合図なので、li.*10を打って最後に、「.」を最後に着けると、EMMETから候補が出て変換してくれます!



<li>だけ生成したい時はliだけ打ってエンターキー押してください。
先ほどの結果はというと~…

<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>

じゃん!こうです!(あ~便利すぎるよ…)

HTMLの要素を大量に打つ時は、EMMETですね!

ちなみに使いこんでいくとこんなこともできるようになります。

ul>li.makoBlog_$*5>a{リンクだぜ$}.

これ、どうなると思いますか?
ulタグの中にliを置いて、liに「makoBlog_〇」をつけて、liの中にaタグで文字列を「リンクだぜ」をつける…?言葉で言われても分からないですよね。
結果はこうです。

<ul>
<li class="makoBlog_1"><a href="" class="">リンクだぜ1</a></li>
<li class="makoBlog_2"><a href="" class="">リンクだぜ2</a></li>
<li class="makoBlog_3"><a href="" class="">リンクだぜ3</a></li>
<li class="makoBlog_4"><a href="" class="">リンクだぜ4</a></li>
<li class="makoBlog_5"><a href="" class="">リンクだぜ5</a></li>
</ul>

上記を見てもわかるように、$は連番を記述してくれます。
$と*を合わせることで、自在に連番を生成できるのです。


CSSでもEMMETを使ってみる

CSSでもEMMETは効果を発揮します。

「position: absolute;」を打つか、といった時は、

poa

でenterキーです。
「は?」と思うでしょう?これはposition: absolute;の略で、po(position)a(absolute)です!

display: ;を打ちたいな、と思った時は、

dis

でenterキーです。
CSSではHTMLの様に繰り返し出てくる要素は無いので、基本的にこういった予測変換のみを使います。

実際にスペルミスもなくなるわけですから、使っていないときと比べれば圧倒的な速さになること間違いないですね!


まとめ

いかがでしたでしょうか?

今回は入力補完機能を搭載したソフトウェア、「EMMET」を使用して、WEBサイト構築を爆速にする方法について説明しました。

今回使用したエディター、VSC(Visual Studio Code)には、標準でついているので、これを使用してあなたも爆速コーディングをしてみてはいかがでしょうか?

こちらの記事も是非チェックしてみてください↓
CSSを使って埋め込んだGoogleMapを白黒にする方法を紹介

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →