浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

HTML/CSSを少ないタイピング量で書ける省略記法 “Emmet”

HTMLって一から素で書くとなかなか大変な時ってありますよね。

sassのようなどんな環境でも使える言語ではないのですが、対応エディタ上で使えるHTMLの省略記法というものが存在するようです。

Emmet

例として、VSCodeはEmmetに標準で対応しているエディタですが、一行目で

!

を入力し、直後にTabキーを押すと…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

ここまでのひな形を自動で入れ込んでくれます。

また、bodyタグ内で次のように入力し、Tabキーを入力すると…

div

自動でdivタグのブロックを保管してくれます。

<div></div>

さらに、2階層以上のHTMLタグもEmmetで記述できます。

div>a>p
<div>
    <a href="">
        <p></p>
    </a>
</div>

HTML以外にも、CSSもEmmet記法があり、省略して記述することができます。

div {
    t30+w60
}

div {
    top: 30px;
    width: 60px;
}

今回はVSCodeを例として紹介しましたが、PhpStormなどの他の著名なエディタ/IDEなどでも利用できるようになっていることが多そうです。

HTMLやCSSを書いていて、コーディングのスピードが遅くて悩んでいる…という方は、Emmetを取り入れることで高速化を図れるかもしれません。

是非参考にしてみてください!

参考:

Emmetで素早くHTML/CSSコーディング!書き方と対応ツールの紹介 – tracpath

VS Code でEmmet使ったらHTML書くの速くなった~‼ – Qiita

Emmet Cheeat Sheet

  • この記事いいね! (0)