こんばんは！ 先週に引き続きデザイナーの宮下です。
今週は先週の続きのGruntをやろうと思っていたんですが、実はちょっと前の井古田くんのネタとかぶってしまったため急遽「SublimeText2+Emmet」の地味に使えるショートカットネタを紹介したいと思います！ すいません！
ちなみにSublimeText2をご存知でない方はLIGさんの記事がとても参考になります。
また、EmmetはZen-Codingの後継でHTMLやCSSをさくさく書くためのプラグインです。
ご存知でない方は先にクラスメソッドさんの記事を読むと分かりやすいかと思います。
※GIFアニがちょっと早すぎてわかんねぇぞ！ って方はこちらで紹介されているブックマークレットを使うとGIFアニを一時停止したりできるのでご利用ください。
数値の増減 (Emmet)
まずは特にCSSのコーディング時によく発生する数値の変更です。
数字にカーソルをあてて
1pxごとの増減
Win: Ctrl + ↑↓
Mac: control + ↑↓
10pxごとの増減
Win: Shift + Alt + ↑↓
Mac: cmd + option + ↑↓
0.1pxごとの増減
Win: Alt + ↑↓
Mac: option + ↑↓
もちろんcmd+DやCtrl+Dでカーソルを増やして複数行の数値を一度に増減することも可能です。
ちなみに先週紹介したgrunt-takanaとのコンボも強力で、SCSSでもChromeDevToolで数値いじる感覚でコーディングできます。
(EmmetLivestyleもありますがまだSass/SCSSには未対応)
カーソルを増やしている時に例外を飛ばす、間違えて増やしすぎたカーソルを元に戻す
Ctrl + D、Cmd + Dで増やしたカーソルをスキップして次へ
Win: Ctrl + D → スキップしたい単語上で Ctrl + K → 再び Ctrl + D
Mac: cmd + D → スキップしたい単語上で Cmd + K → 再び cmd + D
Ctrl + D、Cmd + Dで増やしすぎたカーソルを元にもどす Soft Undo
Win: Ctrl + U
Mac: cmd + U
Ctrl + Dやcmd+Dでカーソルを増やすことは多々あると思うんですが、たまにそれは選択しなくてOKってテキストまで選択してしまうこととか、勢い余って必要のないところまで選択しすぎてしまうことってあるんですよね…
ST2使いたてのころは諦めて最初からやり直してたんですが、このショートカットを知って以来大分助かってます。
2つのテキストを入れ替え
Win: Ctrl + T
Mac: control + T
サンプルのGIFはCSS3のグラデのカラーコードの順番をミスった想定です！
他にも複数行選択して入れ替えることも可能なのでデザインの試行錯誤の際によく発生する要素の順番を入れ替えたりする時にもよく使います(ある程度はChrome上でもできますが)
ちなみに… すごいどうでもいいんですが
このショートカット、2つの値を入れ替えるためだけではありません。
こんな感じで3つ以上の場合は、選択した文字列がくるくる循環します。
ダイヤル数遊びにお使いください。 さて、話が激しく脱線したので次いきましょう。
カーソル行のどこにあっても綺麗に改行
下に改行
Win: Ctrl + Enter
Mac: cmd + Enter
上に改行
Win: Shift + Ctrl + Enter
Mac: shift + cmd + Enter
例えばCSSをいじってて数値を変えたりとかjsのif文の条件いじったりして行末にいない時に普通にEnterすると変に改行されてしまいますよね
そこで一旦Ctrl + →とかCtrl + Eとかで行末に移動した後にEnterするわけですが、このショートカットキーを使うと
行のどこにいようと、すり抜けて改行してくれるというものです。
すごい地味なんですが、毎日ごりごりコード書いてると無駄なカーソル移動したくないのでこういうショートカットもちゃんと覚えておきたいなぁと思います。
【 応用編 】複数画像をまとめてimgタグに挿入(Emmet)
ちょっと長いんですが、画像をばばばっと並べて表示する時なんかにEmmetを応用してまとめてimgタグにぶちこんでしまうというものです。 Wrap機能とかを使うとこれをさらにdivで囲んで〜とかが簡単に出来ます。
少し分かりにくいところだけ細かく解説します。
まず一番最初のところはMacのFinderでファイルをコピーしています。
それだけでSublimeText2側でcmd+Vをすればファイル名をまとめてペーストできます。
Windowsの場合はちょっとめんどくさくてリネーマーからペーストするのが早いかと思います。
rank01~rank06までは InputSequenceというプラグインで連番を挿入してます。
このプラグインはすごく便利で一般的なアルファベットや数字の連番はこれで解決します。
最後のwidthとheightが自動で入ったのはEmmetの"Update Image Size"という機能でパスが通ってる画像であれば自動でwidthとheightを取得して入力してくれます。
また、後で画像の解像度が変わった場合も一発で更新できます。
【 応用編2 】連番の一部を削った時、連番を修正する
連番系の途中の行を削った時、連番のずれを修正するのが結構つらい時がありますが
最初に紹介した数値増減のショートカットを使えば簡単にずれ修正出来ます。
もっとざくざく削る時でもInputSequenceを使えばさくっと連番を入れなおすことも出来ます。
以上です！ 大人気のST2ですが今後も目を離せませんね！
またいつかST2で(次はST3かも)の記事書くと思います！ では良きST2ライフを！ せば！
