emmet-coding

アプリ

Emmetでコーディングのスピードを10倍早くする方法

Emmetとは、HTMLやCSSのコーディングを楽にしてくれるプラグインのこと。

コードを自動で補完してくれるので、これを使えばコーディングのスピードが簡単に上がり、効率よく作業することができます。

HTMLやCSSの基礎がわかっている方ならインストールした瞬間から簡単に使いこなせますので、インストールしてないという方はこれを機にインストールしてみてください。

Emmetについて

Emmetとは?

Emmetとは、Brackets、Atom、Sublime TextといったHTMLエディタのプラグイン(機能拡張)として配布されているもので、もちろん無料です。

Emmetのコードを入力してショートカットキーを押せば、そのコードに対応したHTMLやCSSが一発で展開されます。このあたりは、いちいち読むよりも実際に使ってみた方が簡単に覚えられると思います。

まあ、そのくらい簡単ってことです。

Emmetをインストールする方法

代表的なHTMLエディタである、Brackets、Atom、Sublime Textの3つのエディタでインストール方法を紹介します。

Brackets

brackets-emmet

「ファイル > 機能拡張マネージャー」を選ぶか、右端にある上から2番目のアイコンをクリックするかで、プラグインパネルが開きます。プラグインパネルが開いたら、「Emmet」と名前で検索してインストールすればOK。

Atom

英語版だと「Prefereces... > Install」、日本語版だと「環境設定 > インストール」を選択後、「Emmet」と名前を入力してインストールしましょう。

Sublime Text

sublime-emmet

「Prefereces > Package Control > Install Package」を選択。「Emmet」と入力して、表示されたもの(Emmet for Sublime Textというヤツ)をクリックすればインストール完了です。

Emmetの使い方

使い方は簡単です。コードを入力し、入力したコードの末尾にカーソルを合わせた状態でTabキーを押します(Tabキーを押すことを展開と呼びます)。これは、Brackets、Atom、Sublime Textの3つのエディタで共通です。

▼展開前
html5-1

▼展開後
html5-2

Emmetコードの記述方法

基本編

まずはEmmetコードの記述方法を覚えましょう。

Emmetコードでは>や+が基本となります。>や+の前後にスペースは入れませんので注意してください。

最初は難しく感じますが、実は単純なので、ひとたび理解してしまえば簡単に使えるようになります。

子要素を指定する

div>p
divの中にpを入れ子にします。

child

兄弟要素を指定する

h1+p
兄弟要素は+で表します。要は、並列関係ってことです。

sibling

親要素に戻る

h1+div>p>span^ul>li
^が親要素に戻ることを表します。この場合は、ulが親要素divに戻りますので、pとulが並列関係になります。

climb-up

グループ化する

div>(div>ul>li>a)+div>p
( )内がグループであることを表します。( )があるのとないのとでは、大きく意味が変わるので注意してください。

grouping

div>div>ul>li>a+div>p
ちなみに、( )がないとこうなります。

grouping-none

繰り返し

ul>li*5
liを5回繰り返したい時は*を使います。

multiplication

テキストを挿入する

a{テキスト}

text

ID名を付与する

div#header
divのID名がheaderとなります。

id-attributes

クラス名を付与する

p.title
pのクラス名がtitleとなります。

class-attributes

ナンバリングする

ul>li.item$*5
これはクラス名が連番になります。$の部分が1〜5の数字になるってことです。

numbering1

a{テキスト$}*5
こっちには、テキストの末尾に1〜5の数字が付与されます。

numbering2

属性を指定する

td[rowspan=2 colspan=3]
属性の指定ははそこまで便利っていうわけではないんですが(rowspanなどの表記を省略できないので)、一応基本なので掲載します。

custom-attributes

HTML編

HTML5のdoctypeを入力する

html:5
langがenと英語になるので、ここは手動でjaと書き換えましょう。

html5-2

HTML 4.01のdoctypeを入力する

html:4t
最近はHTML 4.01を使うことはだいぶ減りましたが、念のために。

html4

XHTML transitionalのdoctypeを入力する

html:xt
XHTMLの場合は、strict、transitional、framesetとありましたが、最も汎用性が高いのはtransitionalでしょう。というわけでtransitional形式を挙げておきます。

xhtml-t

aタグを入力する

a

brタグを入力する

br

br-tag

linkタグを入力する

link

link-tag

imgタグを入力する

img

img-tag

bqタグを入力する

bq

bq-tag

ulタグを入力する

ul>liまたはul+
ul+と入力すれば、ul>liと同じ意味になります。

ul-tag

olタグを入力する

ol>liまたはol+

ol-tag

dlタグを入力する

dl>dt+ddまたはdl+

dl-tag

tableタグを入力する

table>tr>tdまたはtable+

table-tag

selectタグを入力する

select>optionまたはselect+

select-tag

CSS編

Emmetが最も真価を発揮するのが、CSSの記述です。

正直、HTMLの記述に関しては、ちょっと効率がよくなる程度で、そこまで「爆速」とはなりません。

しかし、CSSは違います。CSSの記述コードを最初に少し覚える必要がありますが、Emmetを有効活用することで、コーディングのスピードを相当に上げることが可能になります。

marginを指定する

mt10

margin1

m10-10-10-10

margin2

paddingを指定する

pt10

padding1

p10-10-10-10

padding2

widthを指定する

w10

width1

w100%

width2

textを指定する

ta:l

text1

ta:c

text2

ta:r

text3

lh

text4

colorを指定する

c

color1

op

color2

backgroundを指定する

bg

background1

bg+

background2

displayを指定する

d:n

display1

d:ib

display2

overflowを指定する

ov:h

overflow1

ov:s

overflow2

positionを指定する

pos:a

position1

pos:r

position2

t10

position3

r10

position4

b10

position5

l10

position6

floatを指定する

fl:l

float1

fl:r

float2

fontを指定する

fw:n

font1

fw:b

font2

fz

font3

borderを指定する

bd:n

border1

bdl+

border2

bdrs

border3

ベンダープレフィックスを指定する

-dbrs

vender1

-bx

vender2

!importantを指定する

!

important

具体的なCSSの記述方法

w960+m10e+p10r
+でつなげて記述します。また、単位は末尾にeとつければem、rとつければremになります。

css

Emmetでコーディング・スピードを10倍早くする方法

コーディングのスピードをあげるには、HTMLやCSSの手打ち入力やコピペ入力を極力避けることが大切です。

Emmetコードを入力し、HTMLを展開してからHTMLの記述ミスに気づくことって結構ありますが、そのときは展開されたHTMLを修正するのではなく、元のEmmetコードを修正してHTMLを再展開した方が結果的に早くなります。

ですので、Emmetコードは展開する前に元のコードを残すようにしましょう。それだけで、相当に作業効率を上げることができます。

あとがき

今回は、使用頻度が高いと思われるEmmetコードを中心にまとめてみました。

Emmetコードをもっと知りたいという方は以下にあるEmmetのcheat-sheetを参考にしてください。

Emmetのcheat-sheet

-アプリ

Copyright© ゆるくやって人生優勝 , 2019 All Rights Reserved.