Emmet使ってますか？
こんにちわこんばんわ、ちばです。
今期アニメは「サクラクエスト」と「終末なにしてますか？忙しいですか？救ってもらっていいですか？」通称「すかすか」を見始めたちばです。
これがおすすめだよってアニメがあれば是非教えてください。
今回はHTML、CSSを仕事にしてる人には馴染みの深いEmmetの紹介です。
こんなことが出来る物なんだよっていうところをお話します。
Emmetとは
EmmetとはHTML、CSSのマークアップを少し早くしてくれるツールです。
特殊な環境を用意する必要がなく、最近のモダンエディタで標準で搭載されていたりプラグインとして配布されています。
今回は各エディタ毎に導入解説はしないので、「Emmet」のプラグインを入れてから進めてください。
とりあえず書いてみよう
まずはEmmetをインストールしてあるエディタでHTMLファイルを作って開いておいてください。
まずは下記を試してみましょう。
!
「!」を打ったら末尾で「tab」キー
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
すると上記みたいな形で展開出来たと思います。
次は下記で試してみましょう。
section
これを「tab」して
<section></section>
こうじゃ٩( ᐛ)و
このようにタグを展開することも出来るのです。
また、下記のようにIDやクラスをつけて展開することも可能です。
section#hoge.fuga
<section id="hoge" class="fuga"></section>
このようにCSSの用にIDやクラスを付与しつつ展開も出来ます。
次は応用編です。
article.block>ul.list>li.item*3>a{hogeeee}
これを「tab」して
<article class="block">
<ul class="list">
<li class="item"><a href="">hogeeee</a></li>
<li class="item"><a href="">hogeeee</a></li>
<li class="item"><a href="">hogeeee</a></li>
</ul>
</article>
こうじゃ٩( ᐛ)و
このように入れ子にしたりタグの中にテキストを入れながら展開することが出来ます。
それぞれの記号の意味は後ほど。
CSSでもEmmetしよう
cssのプロパティでもEmmet使えるので見ていきましょう。
.hoge {
db
}
上記のdbの末尾で「tab」して
.hoge {
display: block;
}
こうじゃ٩( ᐛ)و
このようにcssでも展開していくことが出来ます。
ただし、プロパティの数だけ書き方があるので覚えるのが大変ですが、なんとなくそれっぽいの書いてみると当たることもあったり（笑）
まとめ
ぜひ知ってはいたけど使ったことがなかったという人は使ってみてください。
単純にタイプミス等のヒューマンエラーも減らせるので使わない手はないと思います。
また、下記ページのチートシートで先程使ったような記号の役割や、cssのショートコードとかも載ってるので見ながら初めてみるといいかもしれません。
Writer
ちば
北海道から上京してきました。
コーダー歴二年目入りましたヽ(ﾟ∀｡)ﾉ
あわせて読みたい記事
