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

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

こんな声に答えます。

結論から言いますと、あります。

これにはEmmetと呼ばれれる記法を使用していきます。

そもそもEmmetとはHTMLとCSSを記述する際の短縮記法のことです。

これをマスターするとコードを書くのが楽になりますし、ミスも減ってきます。

本記事では”CSS”のみに特化した記事となりますので、HTML に関して学びたい方は以下の記事をご覧ください！

『【初心者必見】Emmetの使い方を徹底解説＠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 の書き方もあるので、下記記事も合わせてを覧ください！

『【初心者必見】Emmetの使い方を徹底解説＠HTML編』

もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います！！！
（ついでにフォローしていただけると最高に嬉しいです笑）

では！See you again!(´∀｀)