Pocket

こんにちは。それからデザインの長島です。 みなさま、GWはいかがお過ごしでしたか。私はとある写真展を見に京都に行ってまいりました。え?一人でです。それ以上は何も聞かないでください。楽しかったです。

前回の記事で、私は「Emmet」を使用するといかにHTMLを記述するのが楽になるのかということを書きましたが、「Emmet」はHTMLだけでなくCSSにも使用できます。
前回の記事

それでは、早速CSSの例を見ていきましょう!


width
gif_001

border
gif_002

複雑な記述
gif_003

このように、CSSもHTML同様圧倒的にコーディングの工程を減らすことができるのです。

それでは次に、「Emmet」を使用したCSSコーディングの基本的なルールをご紹介します。


「Emmet」の入力規則(CSS編)

「Emmet」の使い方は、ご使用のコーディング環境(DreamweaverやBrackets、sublime等のtextエディター)に「Emmet」を導入後、ルールに基づいた記号を打ち、「tabキー」や「command + E」を押すだけです。(コーディング環境により異なります。)

1.プロパティを入力する

プロパティ名を頭文字の入力だけで記述することができます。
よく使用する代表的なプロパティの記述方法をご紹介します。

「top」と「text-align」など、同じ頭文字のプロパティの場合は、また別にショートカットが与えられております。

例えば「text-align」でしたら「ta」、「text-decoration」は「td」など。こういった場合も各単語の頭文字がショートカットになる場合が多いです。

2.値を入力する

プロパティ名のみでなく、値もまとめて省略形で記述することができます。
それでは、「1. プロパティを入力する」で記述したプロパティに値もまとめて入力してみましょう。

数値や色の場合は「:」を付ける必要もありません。

また、marginやborderなど複数の値を入力する必要のあるプロパティは「-」で数値と数値の間を区切ると、複数の数値が入力できます。

そして、単位の指定も簡単で、数値のすぐ後に単位を表す文字を記述すれば、その単位がつきます。何も指定しなければ「px」がつきます。

「!important」の記述も「!」ひとつで指定できます。

3.複数のプロパティを一度に記述する

以下のようにプロパティを「+」でつなげることで、複数のプロパティを記述できます。

4.ベンダープレフィックスをつける

「Emmet」はベンダープレフィックスも自動でつけてくれます。もちろん全てのプロパティについてしまうわけではなく、必要に応じてベンダープレフィックスがつきます。

また「-」を先頭に付けることで、明示的にベンダープレフィックスをつけることも可能です。


「Emmet」CSSコーディングの真髄「Fuzzy Search」

さて、これまでさまざまな省略方法が登場してきましたが、その省略形を覚えるのが大変…と思った方も多いのではないのでしょうか。
しかしこの「Emmet」、そんな心配をする必要はありません。
「Emmet」には「Fuzzy Search(あいまい検索)」という機能があります。その名の通り、なんとなく記述できていれば、「Emmet」が「こういうことでしょ?」と判断し、展開してくれるのです。

例えば、「float: left」と記述したい場合

正しい記述

なんとなくの記述

これらは全て

として展開されます。
つまり、まずは記法を覚えてから、なんて前準備をすることもなく、素早くコーディングができてしまうのです。
もちろん、自分が思った通りに展開されないこともありますが、上手く展開されなかった場合は「Emmet」のチートシートで記述方法を確認してみましょう!

※チートシートのリンク(https://docs.emmet.io/cheat-sheet/


いかがでしたか。HTMLだけでなくCSSも素早くコーディングできます。私自身、最後にご紹介した「Fuzzy Search」という機能には大変助けられています。この機能があることで、「Emmet」の導入の敷居が下がったのではないでしょうか。

皆さんも是非使ってみてください!コーディングが今よりも、もっと楽しくなりますよ!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。