2016年10月25日火曜日

Emmetのいろは

基本的な使い方

Emmetの使い方は、
各エディタやOS、設定によって微妙にショートカットが変わる可能性があるので、 もし展開がされなかったら、ググってみてください。

ショートカットは、基本的にCtrl + eになっていると思います。

Emmetのコードを入力して、その行末でショートカット押せば
カーソル以前のEmmetコードが展開されます。

HTML

EmmetHTMLを書く際最低限知っておくと便利なのは、

·         HTMLのひな形を一瞬で作れる

·         id#class.

·         タグを表すための<>は不要。タグ名だけでいい

·         入れ子にする際にはA>Bのように>を使う

·         展開した時に連番にしたいときは$を使う

·         属性を表すときは、[属性名=]と書く。値に"は不要

·         各タグにいい感じにデフォルト属性をつけてくれる

基本これだけで恩恵を受けられます。
CSS
jQueryを使ったことが有る方なら、すぐ馴染めると思います。

他にも()でグループ化したり、^で階層を上に戻ったりできますが、
そこら辺は割愛します。

基本形

ごくごくベーシックな例を出すと、

1

link

headタグ内に必ず入れると思います。
これを展開すると、

1

<link rel="stylesheet" href="">

と、rel="stylesheet"href=""を付加した状態にしてくれます。

メニュー

よくあるメニューは、こんな感じになると思います。

1

nav>ul#menu>li*5>a[href=#]

navの中にidmenuulを入れてという具合です。
これを展開するとこんな感じになります。

1

2

3

4

5

6

7

8

9

<nav>

    <ul id="menu">

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

    </ul>

</nav>

li*5とついていますが、タグ名の後ろに*数字を入れることで、
そのタグを指定した数字分繰り返しますよー
とうい指定をすることができます。

連番

最近は連番を使う機会があまりないのですが、
たまに使う時でもあると便利です。 連番を利用するには$を使います。

1

.thumb{サンプル$}*6

今回はタグ名がありません。
タグ名を省略すると、デフォルトではdivになります。
ul
の中でタグ名を省略するとliになったり、だいたいいい感じになります。

1

2

3

4

5

6

<div class="thumb">サンプル1</div>

<div class="thumb">サンプル2</div>

<div class="thumb">サンプル3</div>

<div class="thumb">サンプル4</div>

<div class="thumb">サンプル5</div>

<div class="thumb">サンプル6</div>

連番って、行コピペする際に、
さりげなくも、かなり面倒な作業だと思います。

そんなときも、連番にしたい所に$を一つ置くだけで連番に出来ます。
ちなみに$$$を2つ並べると、010203と2桁の連番になります。

HTMLのひな形

僕がよく使うDOCTYPE宣言は、HTML4.01 transitionalHTML5なので、
とりあえずそれだけ説明します。

1

!

なんと1文字です。びっくり。
これを展開するとHTML5のひな形が出来ます。

1

2

3

4

5

6

7

8

9

10

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

 

</body>

</html>

文字コード指定のmetaタグまで入れてくれます!!!

デフォルトだと英語なのでlangenになってしまいますが、
設定ファイルを数文字書き換えるだけでjaにできます。

新規テキスト ドキュメント (128).txt: Sublime Text 2 Emmet プラグインが出力する HTML の言語を修正する

次に、HTML4.01 transitionalはこうです。

1

html:4t

これがやや覚えにくいのですが、
IE
が居る限り4.01と戦わざるを得ません。何とか覚えましょう
展開すると以下のようになります。

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

</head>

<body>

 

</body>

</html>

XHTML transitionalにしたい場合は、html:xtです。

CSS

Emmetの記事はHTMLについて書かれている場合が結構多いのですが、
個人的にはEmmetの真価はCSSにあると思ってます。

EmmetCSSを書く時に意識すべきことは、

·         複数行まとめて展開は出来ない

·         基本的に-で繋がるプロパティ名は、頭文字を打てばOK

·         先頭に-を打つと、ベンダープレフィックスを適切に入れてくれる

です。

慣れるまでは「むしろ面倒」と思うかもしれませんが、
慣れると、いちいちプロパティ名をフルで打つのがアホらしくなってきます。

基本形

EmmetCSSの基本形は、こんな感じです。

1

tac

唐突すぎてわけがわかりませんね。展開してみます。

1

text-align: center;

text-align: center; と、
頭文字をつないだ文字列になっています。

他にも例を出していきます。

1

2

3

4

5

6

7

8

9

db => display: block;

m:a => margin: auto;

tdn => text-decoration: none;

posl => position: relative;

poa => position: absolute;

pf => position: fixed;

w100 => width: 100px;

fsz12 => font-size: 12px;

fsz12pt => font-size: 12pt;

このように、被るプロパティ名が多い頭文字は
少し長めに打たないと行けないのですが、たかだか5文字程度です。

単位は、多くの場合
省略してもpxを入れてくれるので数字だけ打てばOK

他の単位を利用したい場合、明示的に書いてあげればそちらが優先されます。

+を最後につける書き方

僕も最近知りました。
上記の指定に+を組み合わせられるものがあります。
background
などを一括指定する場合に使うことが多いかと思います。

1

2

3

bg+ => background: #fff url() 0 0 no-repeat;

f+ => font: 1em Arial,sans-serif;

bd+ => border: 1px solid #000;

ベンダープレフィックス

CSS3を使うのがやや億劫な理由の一つ、
ベンダープレフィックスさんにもしっかり対応しています。

Sublime Text2のように、複数カーソルに対応したエディタなら、
値を一度に指定することができます。

ただでさえ捗るのに、更に捗ります

box-sizing

1

2

3

4

5

6

7

8

9

10

11

-bx

 

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

 

-bxc

 

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

box-shadow

1

2

3

4

5

-bxs

 

-webkit-box-shadow: inset hoff voff blur color;

-moz-box-shadow: inset hoff voff blur color;

box-shadow: inset hoff voff blur color;

transition

1

2

3

4

5

6

7

-trans

 

-webkit-transition: prop time;

-moz-transition: prop time;

-ms-transition: prop time;

-o-transition: prop time;

transition: prop time;

border-radius

1

2

3

4

5

6

7

8

9

10

11

-dbrs

 

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

 

-bdrs10

 

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

などなど。
お分かりだと思いますが、全部が全部に付けるのではなく、
必要な分だけプレフィックスを付けてくれます。

これは、ブラウザの進化ごとに、
Emmet
もアップデートする形で変更されると思うので、 ちょくちょくアップデートをかけたほうが良さそうです。

自分なりの使い方

Emmetを覚えて使うようになってから、 気にしているやEmmetが有効なタイミングも書いておきます。

展開するときに、展開前のEmmetコードを残しておく

これはコーディングする際かなり重宝しています。

htmlに展開してみて、「あ、ここの構造ミスったな」と思った時に、
展開前のEmmetコードを残しておくと、修正が非常に容易です。

特に、繰り返しのliタグの中身なんかを修正した際、
いちいち修正後をコピーして、1行ずつ貼り付け
なんてことをしなくて済みます。

スニペット管理

素のhtmlは、見ればわかるのに、やたらと行数を取ります。
Emmet
のコードとして1行で残いておいて、貼り付けて、展開
とすると、管理もしやすいし、何よりかさばりません

ちょっとした説明に

htmljsの話をチャットなどでしている時に、
html
構造やclassidさえ伝われば良いのに、
いちいちhtmlを書くのは冗長です。

そんなときにEmmetのコードで表現すると、
簡潔かつ要所を的確に伝えることができます。

「メニューののhtmlどうなってる?」
nav>ul>li*3>a[href=#]だよー」
と言った具合に。

 

0 件のコメント:

コメントを投稿