亀速で泣きそうなひとのためのEmmetコーディング!5つのアクションで毎日を HAPPYに!

2016/10/20

コーディングする際、初めにおこなうプレーンテキストの流し込み。あなたはどのように作業していますか? 「そろそろ基本はおさえたし、マークアップは地味に時間がかかって面倒くさいなあ…。」と思うときこそ、テキストエディタの拡張機能『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で包括。

<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>

<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

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque nulla, molestiae delectus provident temporibus? Veniam sit
doloremque asperiores quasi et!
</li>