【初心者必見】Emmetの使い方を徹底解説@CSS編

こんにちは!ニタマサ=NewM(@NewM07x2)です。

HTML とかCSSのコードを書いているんだけど、打ち間違いとか、量書くのが大変…何かいい方法ないかな…?
こんな声に答えます。
結論から言いますと、あります。
これにはEmmetと呼ばれれる記法を使用していきます。
そもそもEmmetとはHTMLとCSSを記述する際の短縮記法のことです。
これをマスターするとコードを書くのが楽になりますし、ミスも減ってきます。
本記事では”CSS”のみに特化した記事となりますので、HTML に関して学びたい方は以下の記事をご覧ください!
それでは、書き方をみていきましょう!
目次
【事前準備】Emmetが利用できる環境「Visual Studio Code」

それでは、まずEmmet利用できる環境設定から始めます。
とはいえ「Visual Studio Code」であれば、標準でEmmetが利用できるので、
「Visual Studio Code」を使用していただければもうOKです。
まだ、インストールされていなかったら、下記のボタンから、公式HPに飛べるので、ダウンロードしておいてください!※無料です
また、「Sublime Text」「Atom」もEmmetの拡張機能を導入することで使えるようになるので、導入をしてみてください!※無料です
Emmetの使用方法

まずはstyle.cssなど、cssファイルを作成してEmmetが使えるエディタで開いてください。
プロパティの頭文字 + 値 が基本
続いて、CSSでの書き方になります。
HTML と比べてそんなに覚えたりすることはないです。
基本的な書き方は
プロパティの頭文字 + 値
となります。
プロパティとはwidthやheight、marginのことです。
値とは〜100pxとか〜centerとかのことです。
イメージしやすいように具体例で確認してみましょう。
w100+h200
と打った場合は以下のようになります。
width: 100px;
height: 200px;
CSSの書き方に関しては以上になります。
え???
って感じかもしれませんがCSSはHTML と比べてかんたんです!
書き方には多少慣れが必要ですが、おすすめです。
最後に・・・
Emmetは、下記のようにたくさんのエディターによってサポートされています。
この一覧になくても対応している場合もあります。ご自分の使っているエディターでサポートされていないか確認してみてください。
上記で記載してきた内容以外にも詳細の書き方をEmmetのページで展開されています。下記のボタンから飛べるので、ぜひご覧ください!
まとめ
いかがだったでしょうか。
今回はEmmetの使い方を初心者にもわかりやすく、具体例を交えながら解説してきました。
CSS以外にもHTML の書き方もあるので、下記記事も合わせてを覧ください!
もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います!!!
(ついでにフォローしていただけると最高に嬉しいです笑)
では!See you again!(´∀`)