HTML/CSS初学者のあなた！
コーディングって最初大変ですよね…そもそもタグの意味やcssのプロパティがさっぱりわからなかったり、タグうちをミスったり…。
なんなら指定自体はあってるはずなのに閉じミスなんかでちゃんと表示されず長時間無駄にした…。
なんて方もいるんじゃないでしょうか？
…そう昔の僕ですね。😓
そもそもタグを手打ちしていくのって面倒じゃないですか？
全部手打ちしていくと大変だし閉じミスもあるし…長いクラス名なんて打ちたくなくなりますよね。
そんな初学者のあなたに便利な昨日が最近のエディタにはあるのでご紹介します。
こういったテクをつまみ食いすることでミスも減り、速度も上がってくると思います。
Emmetで爆速コーディング！つまみ食いでプチ高速！
そもそもEmmetってなんぞやって方もいると思うので軽くだけ紹介。
入力補完機能の一種で、タグの断片を打ってtabキーをおすとタグが展開される。閉じタグも補完してくれるのでミスも減って便利。
たとえば「div」と打ってtabキーを押せば「<div> </div>」まで出してくれるということです。こりゃ便利。
最近のエディタにはデフォで搭載されていることが多いですが、仮に初期では入っていなくともメジャーなエディタはプラグインで入れれることがほとんどです。使用されているエディタとEmmetで検索してみて下さい。
Emmetが便利なのはわかったけど使いこなすのは難しくないの？
全機能をしっかり使いこなそうとすると多少の習熟はいると思います。
ただこういうのはSassもそうですが、元々もっと楽にコーディングするためにあるのでつまみ食いで使える部分だけ拾っておくというやり方がオススメです。
ちゃんと勉強してから…などと思うとなかなか時間もとれませんし、使いながらでも十分覚えていくことができます！
そのうち体に操作が馴染んできたらもっと使い込んで見れば良いのです。
これだけ押さえれば最初はOK！Emmetで便利な展開5選
ここからは実際にこれだけ覚えればいきなりかなりの時短ができるよというものをご紹介。
5つくらいなら無理なく覚えられると思います！
1：タグ展開
冒頭で紹介した「div」と打てば「<div> </div>」と展開されるアレです。
これは基本的にHTMLのタグは対応されていて、sectionやimg、aタグなんかもすべて展開可能です。
括弧を手打ちして閉じミス…のようなこともなくなりますし、展開時にはタグとタグの間にカーソルも移動してくれるので入れ子でタグを作成する際も便利ですね。
aタグやimgタグなんかはhref属性やsrc属性が勝手に付与され、そこまでカーソルが移動します。本当に便利！
慣れてくるとクラスを付与してタグを展開できたり、入れ子も一気に打って展開可能ですが、まずは単純なタグ展開からスタートするのが慣れやすいと思います。
<div> ここにカーソルが来る </div>
2：wとh
こちらはCSSのEmmetです。
widthとheightは最もよく使われるプロパティの一つだと思いますが、「wがwidth」「hがheight」にそれぞれ対応しています。
単独でも展開できますが、数値も入力可能です。
たとえば「w300」なら「width: 300px;」となります。
単位をつければその単位になるので「w100%」なら「width: 100%;」ですし、「w90vw」であれば「width: 90vw;」になります。
//w300を展開
.hoge{
width: 300px;
}
3：mとp
こちらは「mがmargin」「pがpadding」に対応しています。こちらも使用頻度が高いことと思います。
さらに「mlではmargin-left」というような個別も簡単に入力可能です。
- mt→margin-top
- ml→margin-left
- mr→margin-right
- mb→margin-bottom
paddingも「mがp」になるだけで同様に入力可能です。
4：!で初期のHTMLを展開
こちらはちょっと特殊でHTMLファイルにて「!（エクスクラメーションマーク）」を展開すると
まで展開してくれます。初期に必要な雛形が一発で出るので便利ですが、「<html lang=”en”>」が初期になっているので日本語サイトなら「enをja」に変更しておきましょう。
5：複数指定
最後はcssの複数指定です。
その前に前提の知識をかるく説明。
たとえば
.ex{
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
のような指定をいれたいとします。
こちらのままでもいいんですが、cssはショートハンドといって一部のcssをまとめて記述できる仕組みがあります。
marginやborderなんかは頻度が高いので覚えやすく、ショートハンドの記載をすることもあるかと思います。例えば
.ex{
margin: 20px auto;
}
と記載することができます。
そしてここからが本題なんですが、こういう1つのプロパティに対して数値を複数選択したい場合、「-（ハイフン）」で区切ることで複数選択が可能です。
//m20-autoで展開すると
.ex{
margin: 20px auto;
}
もちろんmargin以外にも使えるので覚えておきましょう！
※補足（phpstorm等のJetBrainsIDEを使用している方）
こちらは僕も使用しているエディタでの操作になりますが
mraやmlaで「margin-left:auto;やmargin-right: auto;」を展開できます。
また「m-」や「w-」等のハイフン空打ちで「margin: auto;」「width: auto;」のように「auto」が引っ張り出せます。
地味に便利なので使ってみて下さい。
まとめ
いかがだったでしょうか？
このあたりをおさえるだけでもかなりの時短が見込めると思います！
是非活用してみてください！
