【HTML】Emmet使い方メモ

お久しぶりの更新です。seconです。

最近HTMLページを作る機会が増えました、主に学校の授業ですけど。

HTMLページ作る際にいちいち雛形を書くのがめんどくさいなーと感じていたのですが、「そういえば雛形を一瞬で作れるプラグインとかあった気がする！」などと急に思い出したので、そのプラグインの使い方をメモっておきます。

使用するエディタは sublime text 2 です。

今回参考にしたページは次の通りです。

導入

今回導入するのは「Emmet」というプラグインです。
いつも通り Sublime text でコマンドパレットを開いて、"Emmet"で調べると一番上に出てくるのでインストール。
Sublime text はパッケージのインストールが簡単でいいですね。

そもそもEmmetとはどのようなプラグインなのでしょうか。
簡単に言えば、「HTMLやCSSの記述をものすごく早くする」ためのプラグインです。
Emmetのコードを入力後、ショートカットキー（[Ctrl] + [E]）を押すと、
カーソル以前のEmmetコードが展開されるようになっています。

便利だー、とはいっても文だけじゃ伝わらないと思います。
百聞は一見にしかず、というわけで実際にやってみましょう。

１行目に "!" とだけ打ってみましょう。

そして[Ctrl] + [E]。

すごー！
これだけでとても便利だということが分かると思います。
ただ、「lang="en"」となっている点に注意してください。

デフォルト値を変えたい場合は、メニュータブから
「Preferences -> Package Settings -> Emmet -> Settings - User」でファイルを開き、
次の文を記述して保存すればＯＫです。

{
	"snippets": {
		"variables": {
			"lang": "ja",
			"locale": "ja-JP",
			"charset": "UTF-8",
			"indentation": "\t",
			"newline": "\n"
		}
	}
}

"link" とだけ打って

[Ctrl]+[E]。

クラスは ".クラス名" で作れます。

IDをつける場合は "#ID名" 。

リストなど、入れ子構造を作る際は ">" で区切っていきます。

"*数字" で指定した回数分繰り返すこともできます。

"$" を使います。

"[属性値=値]" によって属性値と値の設定も可能です。

慣れれば記述速度が段違いになりそうなので、徐々に使いこなしていきたいですね。
CSS編は、また別の記事にまとめられたら良いなと思います。

同一インデント内で複数タグ

.one+.two

<div class="one"></div>
<div class="two"></div>

テーブル雛形

table+

<table>
	<tr>
		<td></td>
	</tr>
</table>