Emmetを効率的に使うために。チートシートを活用しよう!

こんにちは。みなさんEmmet使ってますか?
以前こちらでも紹介しましたが、旧Zen-Coding「Emmet」はHTMLやCSSのコーディングに絶大な効率化をもたらします。

Emmet復習

Emmetはエディタに導入する必要があります。CodaやSublimetextなど、様々なエディタに対応しています。導入方法については、「Emmet [エディタ名]」で検索してみてください。

追記:EmmetをSublime Text3で使う!インストールから導入まで。 | unitopi

さて、使用例です。

ul.list-unit>(li.num-$>p>lorem)*5

このように打つと、


<ul class="list-unit"> <li class="num-1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque consectetur, hic delectus enim molestiae, rerum excepturi voluptate quos vitae eligendi, nemo impedit earum! Quidem amet porro, deserunt earum possimus fugit!</p> </li> <li class="num-2"> <p>Nemo sapiente cupiditate est dignissimos dolorem amet aliquid mollitia nihil adipisci ullam harum, autem incidunt porro. Repellendus qui fuga excepturi nobis laboriosam vitae dicta vel provident ad labore porro, sequi.</p> </li> <li class="num-3"> <p>Totam mollitia voluptas architecto quisquam ipsum cumque tempora quod, velit accusantium repellat dignissimos deleniti sapiente beatae eum itaque animi ratione nisi illum? Repellat labore rem minus cupiditate unde reprehenderit sequi.</p> </li> <li class="num-4"> <p>Quo impedit obcaecati voluptatum officiis ratione tempora, praesentium at blanditiis quasi velit porro ab reprehenderit odio necessitatibus est quisquam sapiente illo tenetur dolorum! Ex asperiores quis necessitatibus quo minima dolor.</p> </li> <li class="num-5"> <p>Nihil debitis officiis molestias a illo et fugit blanditiis, voluptas id neque quasi ipsa, dolorem illum consectetur quas error adipisci culpa, animi tempore fuga ad mollitia! Reiciendis cum tempore, reprehenderit!</p> </li> </ul>

この通りです。

なお簡単にご説明すると、「.」のあとに指定するとクラス名、また「$」は数字を連番でいれてくれます。「lorem」はサンプルメッセージを自動でいれてくれて、()内を5回繰り返す処理をしています。

素晴らしいですね。

覚えることは少なくない。でもよく使うのだけ覚えておこう。

うろ覚えで使うことが多い私は、よくチートシートを使います。

Cheat Sheet

ただそれでもたくさんあるんですね…。

そういうときは、

  • 普通に記述するとたくさん時間をつかう
  • 個人的によく使う
  • 覚えるのが苦じゃない

といったものから優先していくと、効率化につながります!

まとめ

Emmetはじめ、SassやFrameworkなど、Web制作の効率化はどんどんと増えています。ただし使いこなすには一定の学習コストが必要です。いっときに学習に時間を使い、その後の効率を爆速にする。
もちろんバランスは大事ですが、一度覚えてしまえば…というものが多いので是非習得してみてください。

フォローして続編をチェック

@universionsをフォロー