Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

覚えておきたいEmmet 5選(HTML編)

スポンサーリンク

HTML tiles

HTMLを書く際によく使うEmmetをまとめました。


Emmetとは何かと基本の使い方に関しては、別記事で説明しているため、Emmetってなに?という方は下記記事から先にご覧下さい。


Emmet記法と結果が書いてある長文なので必要なところのみ参照してみてくださいね。

書き出し

HTMLの書き出し、大枠が書けます。

! + tabキー

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

たった2つのキーを押すだけでこんなに書けちゃうのはEmmetの醍醐味ですね。

link(CSS用)

link:css + tabキー

<link rel="stylesheet" href="style.css">

link(favicon用)

link:favicon + tabキー

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

body内セレクタ

hdr + tabキー

<header></header>

section

sect + tabキー

<section></section>

article

art + tabキー

<article></article>

main

mn + tabキー

<main></main>

ftr + tabキー

<footer></footer>

form関連

form基本形

form + tabキー

<form action=""></form>

form(post用)

form:post + tabキー

<form action="" method="post"></form>

label

label + tabキー

<label for=""></label>

input

inp + tabキー

<input type="text" name="" id="">

input(メール用)

input:email + tabキー

<input type="email" name="" id="">

チェックボックス

input:c + tabキー

<input type="checkbox" name="" id="">

ラジオボタン

input:r + tabキー

<input type="radio" name="" id="">

テキストエリア

tarea + tabキー

<textarea name="" id="" cols="30" rows="10"></textarea>

アンカータグ系

アンカータグ基本形

a + tabキー

<a href=""></a>

アンカータグURLを入れるとき

a:link + tabキー

<a href="http://"></a>

ボタン

btn + tabキー

<button></button>

最後に

ご紹介したのは実際私がHTMLを書く時によく使うものをまとめたもなので、もっと知りたい場合はEmmetチートシートCheat Sheet)を確認して、よく使うタグのEmmet記法を確認してみてください。

CSSのEmmetをまとめた記事もありますので、よければご覧ください。