Izanagi's site

HTML・CSSをより簡単に描こう！Emmetとは！？

みなさんこんにちは！
　
イザナギです！
みなさんはHTML・CSS使ってますか？
HTML・CSSはWebサイトを構築・デザインする上で欠かせないものですよね。
HTMLの書き方、CSSでのデザインの仕方によってサイトの良し悪しが決まると言っても過言ではありません。
ですが、HTML・CSSで同じことを繰り返し書いたり、コードが長くて書きずらかったりする時ってありませんか？
今回はそんな時におすすめなプラグイン「Emmet」について紹介していきたいと思います！

Emmetとは

「Emmet」とは以前「Zen-Coding」と呼ばれていた、HTML・CSSをより書きやすくできるプラグインのことです。
どのように使いやすくなるかというと「HTML・CSSを省略してかける」ようになります！
例えば


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

のようなリストを作りたいと思った時通常ですと毎回改行させて打ち込まなければなりませんよね。
しかし、「Emmet」を利用すると


ul>li*5

なんとこれだけで済むのです！
ちなみにこれは「ul」タグを作ってその中に「li」タグを５個作ってくださいというふうなコードです。
CSSでも


background-image:url();

と書きたいのであれば


bgi

と３文字書くだけで候補として出てきます。
コマンドは上記のように省略形を書いた後に「Tabキー」を押すだけ！（Ctlr + eという記事も見つけましたのでエディタによって違うのかもしれません）
簡単ですね！Cloud9とかのように標準で搭載されているエディタもあります。
これがあれば今までよりも作業効率が上がること間違いなしです！
こちらの方に省略形の一覧が記載されています。
Cheat Sheet

まとめ

今回は簡単にHTML・CSSをかけるようになるチートのようなプラグインの「Emmet」を紹介してきました。
こんなに楽にかけるようになってたなんて、技術の進歩は素晴らしいですね。
もっと早く気付けばよかったです。
これを使ってさらにWebデザインにも力を入れていきたいと思います。
それでは今回はこの辺で筆を置かせていただきます。
最後まで記事をご覧いただきありがとうございました！

2025 - Izanagi's Site