こんばんは。しばらく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を設定しなかった場合、このように表示されます。なんというか、ダサい・・・
bd+ → border: 1px solid #000;
テーブルの枠線の設定のテンプレートが出てきます。これをベースに先の太さ、線のスタイル、色を指定します。
p → padding: ;
パディングはpだけです。簡単で覚えやすいですね！もしやと思ってm tabキーを押すとマージンが出てきました！こうやってなんて打ったら変換できるかを予測してみるのも面白いです。だいたいは全く予想外のものになってしまいます笑
Emmetでテーブルを書く
【難易度１】 table>tr*5>(th+td*3)
テーブルの中にテーブル行が５つ、その中にテーブルヘッダー１つとテーブルデータ１つ
これをブラウザで確認すると、
【難易度２】table>tr*5>(th{クラス$}+td{出席番号$さん}*3)
さっきのテーブルのセルに文字列が入っているバージョン。連番で番号も入っています。
ブラウザーで見るとこんなかんじ
【難易度３】table>tr*5>(th{クラス$}+td{出席番号$さん}*3)^tr>(th{注意事項}+td[colspan=3]{出席簿への記帳は学級委員までお願いします})
さっきのテーブルのさらに応用版。今度は一番最後の行のセルがcolspanで結合されています。
ブラウザだとこんなかんじです。
【難易度４】header>(h1{emmetテスト})+p{emmetを使ってマークアップコーディングを爆速にしよう！}^nav>ul>li.gn$$$*20>a{gn $}^^^fotter>small{©Aoyama}
さて、今日やったことの総まとめ。
headerタグの中にh1タグを入れて〜文字入れて〜と打っていきます。
>これで階層進んで^これで階層戻ってっていうのを想像しながら打つのがEmmetシロウトの私にはちょっとまだ難しい・・・
ブラウザだとこんなかんじです！いや〜速い！！使いこなせたらプロっぽい！！
まとめ
ゴリゴリとWEBコーディングやるならEmmetは必須！できて当たり前らしいです(゜o゜;
ちょっと覚えることが多くて使いこなせるようになるまで大変そうですが、
しっかりと練習して身につけていきましょう！
