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」のキーバインドが設定されていない。必要な場合は各自でユーザーファイルに設定を書き込む必要がある。
コメント