Keitaです。今回は今まで上げていなかったEmmetの使い方について書いていきたいと思います。
これを使うと、コーディングの速度は150%上がります。（ちょっと大げさですが騙されたつもりで読んでください）
Emmetとは？
HTML,CSSを省略して書けるコマンドのようなもので、コマンドを入れTabキーを押すと、
HTML、CSSに展開されるツールです。昔はZen-Cordingと呼ばれていました。
どうやって使うの？
毎度おなじみVSCodeに機能として入っています。エディタで操作できます。
HTMLの使い方
<div class="hoge">
</div>このソースコードの場合
.hogeこれを入力しtabキーを押すと上記のHTMLに展開していきます。
基本、セレクタの構造を直感的に入力できるので、CSSのセレクタ構造の勉強にもなります。
ちょっと発展
<div id="hoge" class="fuga">
<div class="fuga-inner">
<p>
</p>
</div>
</div>ちょっと複雑になりましたね。この場合
#hoge.fuga>fuga-inner>pこの1行で展開できます。
リストは？
<div class="hoge">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>このリストはliが3つありますね。この場合
.hoge>ul>(li*3)同じもが複数ある場合、括弧閉じして *個数 で、展開できます。
同一階層を並べたい場合
<div class="hoge">
<div class="hoge-cont">
<div class="hoge-cont__image">
</div>
</div>
<div class="hoge-cont">
<div class="hoge-cont__image">
</div>
</div>
<div class="hoge-btn">
</div>
</div>hoge-contが2つ並んでますね。Emmetでどうなるのか見てみましょう。
.hoge>(.hoge-cont>.hoge-cont__image)*2+.hoge-btnスッキリしますね。1行で10行分のHTMLが展開されます。
同じクラスを展開する場合個数、同一階層の場合「＋」を使います。
HTMLは一からタグうちする必要がなくなる
個人的な所感ですが、CSSの設計ができている場合そんなにHTMLのコーディングに時間をかけたくないものです。Emmetを使えば、サイトの規模によっては半分以上の時間が削減されるため結果、短納期の仕事でクオリティの高いものが作れるようになります。
CSS編
こちらも、コマンドでできます。HTMLよりも短いコマンドでできます。
こちらはまとめます。
まとめ
- width→w
- height→h
- margin→m
- padding→pd
- margin: 0 auto→m-0a
- color→c
- color:#fff→c#fff
こちらのページに詳細なチートシートが書かれてますので、参考にしてみてはいかがでしょうか？
いつから使っていたんですか？
2年半前から使っています。その前はHTMLCSSの基礎を学ぶのに必死でしたが、
こちらを使ってから早くなりましたし、クオリティ向上の施策をしてからはもっと早くなりました。
VSCodeを使っていない場合は？
こちらから、各エディタ用のEmmetのモジュールがダウンロードできますので、インストールしてみてください。
Dreamweaver
sublimetext
atom
Brackets
Bracketsの場合拡張機能からインストールできます。
まとめ
すぐにできてなおかつ量の多い作業は、出来るだけ作業を短くして、アニメーションだったり、jsだったり時間のかかる部分の作業を確保できるようにこういったツールを使うのは重要です。
また簡単なサイトだったらサクッと終わらせ、次の仕事にバトンタッチしていけば仕事もうまく回ってくるでしょう。
コメント