Emmetの使い方を知り、爆速コーディングを実現しよう06-4300-3853info@focus-square.comお問い合わせHOME理念・指針サービス内容ご発注の流れブログ会社案内HOME理念・指針サービス内容ご発注の流れブログ会社案内ブログHOME/ブログEmmetの使い方を知り、爆速コーディングを実現しようEmmetの使い方について解説していきます。Emmetとは、コーディングのスピードを速める便利なツールのようなものです。コーディングの際に面倒な記述を省略・短縮して入力することができます。今回はEmmetの使い方について理解していただき、コーディングのスピードを速めてほしいと思います。まとめEmmetとは?プログミラングをする技術・利便性は日々進化しています。Webページ一つとっても開発技術と開発のスピードは格段に早くなっています。開発のスピードを速めることができる便利なツールの一つがEmmetです。Emmetはコーディングのスピードを速めるために開発された便利なツールになっています。色々なコーディングソフトで利用することができるようになっていて、多くのコーダーに人気な機能です。Emmetは元々Zen-Codingと命名されたもので、シンプルに記述することを目的としたものになっています。class="class"></div>例えば、上記のような入力をしたいときには下記のように簡略化することが可能です。class=”class”></div>が自動で入力されます。<タグ>の入力を毎回する必要がなくなり、入力がだいぶ簡略化されたと思います。このように入力を簡略化することで、コーディングのスピードを3倍、5倍と上げていくことが可能となります。Emmetの具体的な使い方Emmetの実践的で具体的な使い方について記述していきます。使用しているコーディングソフトにEmmetをダウンロードする必要があります。DreamWeaverを使用していれば、ほとんどの場合デフォルトでダウンロードされています。DreamWeaver以外を使用している方は下記URLからダウンロードすることが可能です。https://github.com/sergecheEmmetの使い方〜基本編〜EmmetはHTML・CSSともに使用することが可能ですが、基本となる使い方についてみていきます。eを押すたったこれだけです。入力が省略され、必要なことはTabキーを押すだけです。Emmetを導入すれば短いコードを書いて、すぐに反映させることが可能になります。この基本的な記述の仕方はHTML・CSS共に共通です。Emmetの使い方〜HTML編〜HTMLでEmmetの具体的な使い方について見ていきたいと思います。HTMLのEmmetの使い方を表にまとめたので、ご覧ください。<要素1></要素1><要素2></要素2>上記の表が一般的なEmmetの使い方になります。要素だけを入力してTabキーを入力した時を見てみます。h21h2と入力してTabキーを押せば<h2></h2>1<h2></h2>と表示されます。id="id"></h2>と表示されます。id=”id名”」が成り立ちます。上記のものはそれを連結させたものになります。class=”クラス名”></div>となり、自動的にdiv要素になることは覚えておきましょう。以上が基本的な使い方になります。Emmetは応用的な使い方もあるので、もう少し見ていきます。class="foot"></div>あっという間に構成を仕上げることも可能です。「+」を使用することで、同じ階層に別のタグを作ることが可能です。比較的、記述が多いlistメニューについても簡略化することが可能です。ul.list-menu>li.list*51ul.list-menu>li.list*5「>」の記号を使用することで、入れ子構造をとることができます。li.list*5とすることで<li>タグを5つ自動で生成してくれます。class="list"></li></ul>ulタグの中にliタグを5つ作るという構造が成り立ちます。仮にクラス名を一から順番に番号順につけたい場合にもEmmetは対応可能です。class="list5">リスト5</li></ul>とリストのクラス名を一から順番につけていくことが可能です。Emmetには、HTMLの文書を作るときに必要な一番最初の記述も省略する機能もあります。charset="UTF-8"><title>Document</title></head><body></body></html>HTMLの記述として必要なものが全て入力されるようになっています。以上がHTMLでのEmmetの具体的な使い方になります。CSS編CSSにおけるEmmetの使用はちょっとした簡略だけなので、Emmetの記述を覚えることに時間を取られるぐらいであれば、少しでもCSSの記述になれた方が早いというのが個人的な意見です。それでもEmmetを使用して少しでもCSSの記述のスピードをあげたいという方はCSSのEmmetの書き方について見ていってほしいと思います。Emmetを入力してTabキーを入力するやり方はHTMLのEmmetの使い方と一緒です。center;となります。cを「l」「r」に変えることでleft、rightに変えることが可能です。blockdでdisyplay:となり、bでblockを表現しています。bを「f」「i」に変えることでflex、inlineと変えることが可能です。このようにCSSはルールがあるというよりもむしろ、それぞれの記述に簡略化されたものが適用されるといった感じです。CSSに関してはどんなEmmetがあるかを覚える必要があります。10px;覚えるというより使っていくうちに慣れる感じですが、よく使う記述だけ覚えるぐらいがちょうど良いと思います。HTMLに関してもCSSに関してももっとたくさんの記述方法があるのですが、ここで全て紹介することはできません。Emmetの書き方を知りたい場合にはEmmetのチートシートを参照するのが良いでしょう。https://docs.emmet.io/cheat-sheet/←こちらがチートシートのURLとなっているので、参照してみてください。まとめコーディングを速める技術には、Sassというものを設計したり、PugやHamlといったHTMLを簡略化する技術も進化しています。そんな中でEmmetは誰でも簡単にすぐに実行することができるテクニックですので、ぜひ利用してみてください。EmmetのHTMLの記述の仕方を基本的な使い方だけでもコーディングするスピードは大きく変わってくると思うのでぜひ利用してみてください。SQUAREのフルスタックエンジニアとして活動中。LP・HPのコーディングだけでなく、Wordpressのカスタマイズやサーバーサイドも行なっています。技術的なサポートを全般行います。