SublimeText3:Emmet記法
「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; |
