【sublimetext3】Emmetを導入する!

コーディング

こんばんは。しばらくsublimetextの記事を更新していませんでしたが、一応わずかながら勉強はしていました。

今回は【2017-2018年版】Sublime Text入門の2回目Emmetというプラグインについての授業でした。

まずはこちらのgifをごらんください。

ul>li*5>a と書いてあります。そこでtabキーを押すとこんなにながいコードが一瞬でできあがります!!!なんじゃこりゃ!!どんな裏技だ!!

これはEmmetという裏技を使ってやっています!

Emmetとは

コーディングを簡略化して素早く書いていけるようにするプラグインのことです。これが使いこなせると本当に爆速でコーディングができます!

なかなか覚えることがいっぱいで、しっかりと理解するまでに時間がかかってしまいました。

今回のEmmetの授業、Webデザイナー目指すなら必須の授業だとおもいます。
授業では基本は習ったのですが、自分でもどんどん使いこなせるように努力をしなくてはならないと思いました。
授業で習ったことをまとめていきたいと思います。

Emmetのプラグインをダウンロード

sublimetextのpackage controlからダウンロードします。

package Controlの導入は前の記事

package Controlを開いて(shift+control+p)Installと打つと、Package Control:install Packageを選択

Emmetと打つ

一番上に出てくるEmmetを選択

これでEmmetのインストールが完了です。

Emmet文法の展開方法

独自の省略記法で文法が作られている。
展開するとhtmlやcssに変換できる

省略記法で書いたコード→入力後 tabキーを押す

展開される!!

html5のテンプレートを作る

1.htmlファイルを用意する

2.htmlファイル上で!を押す

3.tabキー押す

4.完成!

どうですか!?超早くないですか!?こんなの考えながら打ってたらラーメン伸びますよ!!

Emmet使えば一瞬です!

Emmetのテンプレートを日本語に変更したい

例えば「!」を展開してhtml5のテンプレートにするとlangがenになっています。日本語のWEBサイトを作るときは基本的にはここはいつも「ja」なのでデフォルトを変更したいですよね。なんと変更できます!

Preferenes/Package Settings/Emmet/setting user に下記のコードを貼り付けます。そして保存。

————ここから—————–
{
“snippets”: {
“variables”: {“lang”: “ja”}
}
}
————ここまで——————

これで変更完了です!

Emmetの演算子を覚えよう

これは「このカッコここまで」とか「この要素5こ」というような使い方をします。

^ 親  上の階層に戻る

+ 兄弟 同じ階層に要素を追加

> 子  前の要素の子要素として入れ子構造になる

* 複数展開 同じ要素が5こ!という繰り返し

実際に書いてみよう

例えば、「ulの中にliが5つあってその中にaタグが入っている」。これはこんなふうに書きます。

ul>li*5>a

liにクラス名をつけていく

ul>li.gn$*5>a

gnというクラス名をつけて連番で番号をふっていき、その中にaタグが入っている

$は連番を意味します。5つあるliに1つめから順番に番号をふります。

文字列を入れる

今度はリンクテキストの部分を入れていきます。

文字列部分は{}の中に入れます。

ul>li.gn$*3>a{gn $}

aタグの中に文字列でgnと連番を入れていく

連番の数が2桁以上必要なとき

連番が2桁以上必要なときはどうすればいいでしょうか?

$をつなげて書けばいいんです!$$だと2桁、$$$だと3桁になります。

ul>li.gn$$$*20>a{gn $}

この場合は「liを20個。クラス名にgnとつけてさらに3桁の連番」となります。

ちなみにブラウザで表示するとこんなカンジになります。

imgタグを使って画像を入れる

Emmetではimgタグはこのように書きます。

img[alt=”説明図”]

[ ]の中に属性を書きます。

Emmetを使ったアンカーテキストの書き方

p>{詳しくは}+a{こちら}+{をご覧ください}

Pタグの中に文章{詳しくは}、aタグの中に文章{こちら}、aタグの外側に文章{こちら}

※+で結ぶのを忘れない

EmmetでCSSを書く

まずCSSを書くためにheadの中にstyleタグを書きます。

style> でtabキーを押すと<style></style>に変換されるのでその中に書いていきましょう。

このあとtableタグについてやるので、table関連のCSSをいくつか書いていきます。

bdcl:c → border-collapse: collapse;
これは表が二重枠にならないために設定するCSSです。表はデフォルトでは二重枠で表示されてしまうので、これはtableタグを使うときはほとんど使用するCSSで使用頻度も高いので覚えるとラクです。collapseを設定しなかった場合、このように表示されます。なんというか、ダサい・・・

bd+ → border: 1px solid #000;
テーブルの枠線の設定のテンプレートが出てきます。これをベースに先の太さ、線のスタイル、色を指定します。

p → padding: ;
パディングはpだけです。簡単で覚えやすいですね!もしやと思ってm tabキーを押すとマージンが出てきました!こうやってなんて打ったら変換できるかを予測してみるのも面白いです。だいたいは全く予想外のものになってしまいます笑

Emmetでテーブルを書く

【難易度1】 table>tr*5>(th+td*3)

テーブルの中にテーブル行が5つ、その中にテーブルヘッダー1つとテーブルデータ1つ

これをブラウザで確認すると、

【難易度2】table>tr*5>(th{クラス$}+td{出席番号$さん}*3)

さっきのテーブルのセルに文字列が入っているバージョン。連番で番号も入っています。

ブラウザーで見るとこんなかんじ

【難易度3】table>tr*5>(th{クラス$}+td{出席番号$さん}*3)^tr>(th{注意事項}+td[colspan=3]{出席簿への記帳は学級委員までお願いします})

さっきのテーブルのさらに応用版。今度は一番最後の行のセルがcolspanで結合されています。

ブラウザだとこんなかんじです。

【難易度4】header>(h1{emmetテスト})+p{emmetを使ってマークアップコーディングを爆速にしよう!}^nav>ul>li.gn$$$*20>a{gn $}^^^fotter>small{&copy;Aoyama}

さて、今日やったことの総まとめ。
headerタグの中にh1タグを入れて〜文字入れて〜と打っていきます。
>これで階層進んで^これで階層戻ってっていうのを想像しながら打つのがEmmetシロウトの私にはちょっとまだ難しい・・・

ブラウザだとこんなかんじです!いや〜速い!!使いこなせたらプロっぽい!!

まとめ

ゴリゴリとWEBコーディングやるならEmmetは必須!できて当たり前らしいです(゜o゜;
ちょっと覚えることが多くて使いこなせるようになるまで大変そうですが、
しっかりと練習して身につけていきましょう!