Learning site for website creation

SublimeText3:Emmet記法

  • 投稿日:2018年12月18日

「Emmet」はHTMLタグを省略記法で記述するパッケージです。

記述モードを「HTMLファイル」に設定

「Ctrl」+「Shift」+「P」→「htm」入力 →「Set Syntax: HTML」選択

  ※拡張子「.html」で保存してある場合は必要なし

Emmetでタグ展開

「Tab」キーでHTMLタグを展開

EmmetでHTMLタグ

概要 記法

タグ

タグ名

div

a

img

inputタグのtype属性補完

input-c

input-tel

id属性指定

タグ名#id名

#header

h1#logo

class属性指定

タグ名.id名

a.link

セットタグ名補完

<ul>.item</ul>

入れ子タグ

タグ名>タグ名

ul>li

ul>li>a

隣接タグ

タグ名+タグ名

.left+.right

#container>#header+#main+#footer

階層を上げる

タグ名>タグ名^タグ名

.header>h1>a

.header>h1>a^.nav

.header>h1>a^^.main

セットタグの子要素展開

タグ名+

dl+

table+

ul++p

タグ複製

タグ名*数値

ul>li*3>a

ul>li>a*3

グループの複製

(.box>h2+p>span)*2+.footer

属性指定

タグ名[属性]

a[href="/"]

a[href="/" title="home"]

a[href="/"][title="home"]

特定タグの属性名補完

link[/css/style.css]

script[/js/script.js]

連番

$*数値

ol>.step-$*3>a

img[src="pic$$$.png"]*3

テキスト挿入

{テキスト}

p{text}

.box*2>h2{タイトル$$}+a{もっと見る}

コメント付与

Comment tags

タグ名|c

#main>.entry>h1|c

実体参照化

Escape

タグ名|e

#main>.entry>h1|e

一行で出力

Single Line

タグ名|s

#main>.entry>h1|s

ダミーテキスト生成

lorem

p>lorem

数値指定で長さ調整

ul>li*3>lorem8

EmmetでCSS

あいまい記法

あいまい記法でなんとなく展開

記法 展開
of

overflow: hidden;

po

position: relative;

ct

content:  ;

頭文字展開

プロパティ名の頭文字から展開

記法 展開
w

width

h

height

m

margin

p

padding

c

color

fw

font-weight

ta

text-align

ls

letter-spacing

方向指定

プロパティの方向を指定

記法 展開
t

top

b

bottom

l

left

r

right

mt

margin-top

pl

padding-left

頭文字重複

頭文字が重複するプロパティ

記法 展開
bd

border

bg

background

bgc

background-color

fl

float

pos

position

ov

overflow

cnt

content

イレギュラー記法

注意すべきイレギュラー記法の「size」「shadow」「box」

※「size」「shadow」は「style」とバッティングしやすい
※「box」は「bottom」とバッティングしやすい

記法

期待する展開

*z

*-size

fz → font-size

bgz → background-size

*sh

*-shadow

tsh → text-shadow

bxsh → box-shadow

*bx

box-*

bxsh → box-shadow

bxz → box-size

値(数値)の展開

プロパティの後ろに数値を記述

数値のみは「px」小数は「em」

「-」でスペース区切り

記法 展開

w80

width: 80px;

w80p

width: 80%;

w8e

width: 8em;

w8.5

width: 8.5em;

w8.

width: 8em;

m8-16

margin: 8px 16px;

m8-0-4

margin: 8px 0 4px;

m-8-4

margin: -8px -4px;

値(数値以外)の展開

プロパティ後ろ「:」か「-」でつないで値の頭文字

記法 展開

pos:a

position: absolute;

pos-a

position: absolute;

pos-f

position: fixed;

maw-a

※maw:a

max-width: auto;

※max-width: none;

fl:r

float: right;

td:u

text-decoration: underline;

d:i

display: inline;

d:ib

display: inline-block;

m4-a-8

margin: 4px auto 8px;

値(カラーコード)の展開

プロパティの後ろに「#」でつないで記述

記法 展開

c#1234ab

color: #1234ab;

c#ff0000

color: #f00;

c#f

color: #fff;

c#fe

color: #fefefe;

c#aaa

color: #aaa;

c#aaa.7

color: rgba(170, 170, 170, 0.7);

一括プロパティの展開

一括プロパティの後ろに「+」を記述

記法 展開

bg+

background: #fff url() 0 0 no-repeat;

bd+

border: 1px solid #000;

bdt+

border-top: 1px solid #000;

bdl+

border-left: 1px solid #000;