コーディングする際、初めにおこなうプレーンテキストの流し込み。あなたはどのように作業していますか? 「そろそろ基本はおさえたし、マークアップは地味に時間がかかって面倒くさいなあ…。」と思うときこそ、テキストエディタの拡張機能『Emmet(エメット)』 をいれて、ショートカットキーをガシガシ使ってみましょう!
「テキストを一気にマークアップ」・「表記の統一化」・「カンタンな数値の計算」 など、思わずシタり顔になってしまうほど便利な機能(アクション)が盛りだくさん!この記事では数あるEmmetの機能の中でも、毎日つかえるものを5つピックアップしてご紹介します!

使わないともったいない!Emmetの機能(アクション)
Emmetには、以前の記事『学生だって覚えたい!Emmet(省略記法)で鬼速コーディング』でご紹介した “省略記法(Expand Abbreviation)” という機能の他に、以下のようなさまざまな機能があります。
– ショートカットキーで早くなる便利な5つのアクション
1. プレーンテキストを数秒でマークアップできる【Wrap with Abbreviation】
2. タグを一行に整理したいときに大活躍【Merge Lines】
3. 数字の調整は矢印キーでOK【Increment/Decrement Number】
4. カンタンな計算ができる【Evaluate Math Expression】
5. 画像のwidthとheightを取得できる【Update Image Size】
Mac OS X El Capitan(バージョ10.11.31)
Windows10(バージョン1511)
テキストエディタAtomで紹介をしています。
これらの機能について、順番にご紹介していきます。
1. プレーンテキストを数秒でマークアップできる【Wrap with Abbreviation】
箇条書きを資料からコピペするときに、一気にリストタグに落とし込みたいと思ったことはありませんか?Emmetのアクションを使うと、何十行・何百行でも、わずかスリーステップで完了できてしまいます。
[例]

↓ 包括したい文章を選択し、下部のボックスにul>li*と記入。【Mac】control+W【Win】Ctrl +alt + Wで包括。
1 2 3 4 5 6 7 |
<ul> <li>【1】プレーンテキストを数秒でマークアップできる【Wrap with Abbreviation】</li> <li>【2】タグを一行に整理したいときに大活躍【Merge Lines】</li> <li>【3】数字の調整は矢印キーでOK【Increment/Decrement Number】</li> <li>【4】カンタンな計算ができる【Evaluate Math Expression】</li> <li>【5】画像のwidthとheightを取得できる【Update Image Size】</li> </ul> |

一気にマークアップすることができました!
2.やっぱり一行に整理したいときに大活躍【Merge Lines】
p タグや li タグなどで長文になった際、終了タグを改行するかしないかで表記が不統一になったことはありませんか? そんなときは、ショートカットキーShift+⌘+Mでタグの調整が出来るようになります。
[例]

↓ 選択後、【Mac】Shift+⌘+M【Win】Ctrl+Shift+M
1 2 3 |
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque nulla, molestiae delectus provident temporibus? Veniam sit doloremque asperiores quasi et! </li> |

3.数字の調整は矢印キーでOK【Increment/Decrement Number】
サイズの具合を開発環境で確認しながら、ちょっとずつ微調整したいときに活躍するのがこのショートカットキーです。
[例]

↓ (±0.1)数値選択後、【Mac】control+option+↑↓【Win】Alt+↑または↓

↓ (±1)【Mac】control+option+⌘+↑↓【Win】Ctrl+↑または↓※Atomの設定が優先になっているため注意

↓ (±10)【Mac】control+Shift+option+⌘+↑↓【Win】Shift+Alt+↑または↓

4.カンタンな計算ができる【Evaluate Math Expression】
レイアウト調整するさいに電卓は必須ですが、カンタンな計算ならEmmetの四則演算機能で補うことができます。キーボードのテンキーである「+」「-」「*」「/」の記号を組みわせて計算が可能です。
[例]

↓ 数字部分を選択。【Mac】⌘+Shift+Y【Win】Ctrl+Shift+Y

5.画像のwidthとheightを取得できる【Update Image Size】
Dreamweaverでもおなじみの、画像サイズを取得できる機能はEmmetで補うことができます。
[例]

↓ 画像パス内のいずれかにカーソルをおき、【Mac】control + i 【Win】Ctrl+U

自動で画像サイズを取得できました。
もっと活用したいあなたに!チートシート一覧を公開!
関連する記事