Windows + SublimeText + 日本語キーボードでのEmmetキーバインド

この記事は最終更新日から9年以上経過しています。
内容が古い可能性がありますのでご注意ください。

HTMLやCSSを高速で書けるEmmetをここ↓で勉強した。

3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作レッスン、さらにシステム開発に使われるPHP、Ruby、Pythonなどの入門レッスンまで幅広く言語を体験できます。

基本的な記法はわかったんだけど、お手本動画はMacで、自分が使っているWindowsとはキーバインドが違う。
さらにSublimeText + Emmetプラグイン環境だと、公式ドキュメントに書いてあるキーバインドとも違う部分がある。SublimeText自体のキーバインドとの衝突と避けるためのようだ。

まあググれば Windows + SublimeText でのキーバインドを一覧にしたサイトなんていっぱいあるよね、とタカをくくっていたら意外となかった。ほとんどのサイトがMac環境のことしか書いてない……。

Windows環境でのキーバインドを紹介してくれている数少ないサイトさん（ありがたや）を見たり、プラグインのキーマップを直接読んでみたけど、やっぱり一部のアクションが動かない。
どうも、日本語キーボードだと一部のキーの位置がずれるのが原因みたいだ。たとえば英語キーボードの ' は日本語キーボードでは ^ になり、; は : になる。

というわけで需要はあまりないと思われるが、

SublimeText
Windows
日本語キーボード

でEmmetしたい人のためのキーバインド一覧を作った。ほとんど自分用かな……。

Actions	Description	Key
Expand Abbreviation	Emmetの展開コマンド	`Ctrl` + `E` or `Tab`
Interactive “Expand Abbreviation”	入力ウインドウからのEmmetの展開	`Ctrl` + `Alt` + `Enter`
Match Tag Pair	タグで囲われている部分を選択	`Ctrl` + `,` (階層を登る) `Ctrl` + `Shift` + `0` (階層を下る)
Go to Matching Pair	開始タグ、終了タグに移動	`Ctrl` + `Alt` + `J`
Wrap with Abbreviation	選択部分、またはカーソルのある要素をタグで囲む	`Ctrl` + `Shift` + `G`
Go to Edit Point	タグ間、未入力の属性などの編集ポイントへカーソルを移動	`Ctrl` + `Alt` + `→` `Ctrl` + `Alt` + `←`
Select Item	タグの各項目（タグ名、属性など）を選択	`Ctrl` + `Shift` + `.` `Ctrl` + `Shift` + `,`
Toggle Comment	コメントの挿入/取り消し	`Ctrl` + `Shift` + `/`
Split/Join Tag	タグの分割と結合	`Ctrl` + `Shift` + `
Rename Tag	タグのリネーム	`Ctrl` + `Shift` + `^`
Remove Tag	要素の開始・終了タグを削除	`Ctrl` + `Shift` + `:`
Merge Lines	タグ内の複数行テキストを一行に	`Ctrl` + `Shift` + `M` ※
Update Image Size	画像の高さ・幅を自動入力	`Ctrl` + `U`
Evaluate Math Expression	数値の計算	`Ctrl` + `Shift` + `Y`
Reflect CSS Value	類似するCSSプロパティの値を一括指定	`Ctrl` + `Shift` + `R`
Encode/Decode Image to data:URL	画像をBase64にエンコード	`Ctrl` + `^`
Increment/Decrement Number	数値を1ずつ増減	`Ctrl` + `↑` `Ctrl` + `↓`
	数値を10ずつ増減	`Shift` + `Alt` + `↑` `Shift` + `Alt` + `↓`
	数値を0.1ずつ増減	`Alt` + `↑` `Alt` + `↓`

※emmet-sublimeは、初期状態では「Merge Lines」のキーバインドが設定されていない。必要な場合は各自でユーザーファイルに設定を書き込む必要がある。