Emmetについて
Emmetとは
- 主にHTMLやCSSなどの記述・編集を支援するプラグインです。
- DreamweaverやBracketsなど多くのエディタに対応しています。
- 独自の省略記法によるコーディングの高速化が可能となります。
- 省略記法を入力した後、tabを押します。
各種記号
#：ID：IDの指定
.：CLASS：クラスの指定
[]：attr：属性の指定
>：Child：階層
+：Sibiling：隣接する要素
()：Grouping：グループ
*：Multiplication：要素の複製
$：Item numbering：要素の繰り返し番号
{}：text：テキストを挿入▽よく使用するメモ▽
HTML
head内のcssリンク
link:css ▼ <link rel="stylesheet" href="style.css">
head内のfaviconリンク
favicon ▼ <link href="/YOUR_PATH/favicon.ico" rel="icon" type="image/x-icon" />
head内のtouch iconリンク
link:touch ▼ <link rel="apple-touch-icon" href="favicon.png">
head内のビューポートの設置
meta:vp ▼ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
body内のナビゲーション
nav>ul>li.item*4>a[#]{Item$} ▼ <nav> <ul> <li class="item"><a href="#">Item1</a></li> <li class="item"><a href="#">Item2</a></li> <li class="item"><a href="#">Item3</a></li> <li class="item"><a href="#">Item4</a></li> </ul> </nav>
body内の定義リスト
div>dl>(dt+dd)*3 ▼ <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div>
CSS
レイアウト系
pos ▶︎ position: relative; ov ▶︎ overflow: hidden; fl:r ▶︎ float: right; cl ▶︎ clear: both; d ▶︎ display:block; d:f ▶︎ display:flex;
余白
mb ▶︎ margin-bottom: ;
p ▶︎ padding: ;
文字
fw:b ▶︎ font-weight: bold; fz ▶︎ font-size: ; ff ▶︎ font-family: ; ta:c ▶︎ text-align: center; lh ▶︎ line-height: ; lts ▶︎ letter-spacing:;
その他
bxz ▶︎ box-sizing: border-box; maw ▶︎ max-width: ; bg ▶︎ background: #000; c:ra ▶︎ color: rgba(0, 0, 0, .5); op ▶︎ opacity: ; cnt:a ▶︎ content: attr(); bd+ ▶︎ border: 1px solid #000; lis ▶︎ ist-style: ; ! ▶︎ !important @m ▼ @media screen { }
