【sublimetext3】Emmetを導入する！

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

今回は【2017-2018年版】Sublime Text入門の２回目。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キーを押す

展開される！！

html５のテンプレートを作る

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の演算子を覚えよう

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

^　親　　上の階層に戻る

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

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

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

実際に書いてみよう

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

ul>li*5>a

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

ul>li.gn$*5>a

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

＄は連番を意味します。５つあるliに１つめから順番に番号をふります。

文字列を入れる

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

文字列部分は｛｝の中に入れます。

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

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

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

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

$をつなげて書けばいいんです！$$だと２桁、$$$だと３桁になります。

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

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

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

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を設定しなかった場合、このように表示されます。なんというか、ダサい・・・