EmmetをつかったCSSコーディング

Emmetを使ったページ作成について

以前ご紹介した「VSCode」
あれから色々と試してみましたが、なかなかクセが抜けきれないので手動入力で全文を書いてしまいます・・・
数年間続けた習慣はなかなか抜けませんね・・・
使いこなせれば短い記述でガンガンHTMLを作れるのでとても便利だとわかっているんですが、なかなか頭がまわりません。

さて、VSCodeなんですが、HTMLの他にもCSSの記述もできるんです！
エディタによっては文字の予測変換の様に入力しようとしているコードを一覧で出してくれる、コードヒントという機能があります。
コードヒントも便利な機能なのですがプロパティを入力して、値を入れて・・・と2ステップ必要です。でもEmmetのCSSなら一瞬です。
HTMLよりも記述する文字数が多くなってしまうCSSの作成が簡単になるのはとてもうれしいことですね！！

実際に入力する場合は以下のように書き込んでから「Tabキー」です。

紹介した以外にもまだまだ沢山の入力方法があります。
ここではとても書ききれませんし、なかなか覚えられません・・・
チートシートを用意してくれている方がいるので、こちらを参考にしてみてください。

チートシートをちょっと見てもらうとわかると思いますが、量がハンパじゃないですよね・・・
これだけの数を暗記するとなると時間もかかります。全てを覚えたからといって資格が取れたり仕事が舞い込むなんてこともないので、暗記に時間を使うなら他のことに時間を回したいですよね。なので普段からよく使う物だけを覚える様にして、わからなくなったらすぐに確認しましょう。

「margin: 0 auto;」は「m0-auto」で入力できる

チートシートには載っていないので、これだけは覚えておいた方がいいかもしれません。
横幅の決まった要素を中央寄せにする時、よく使われる「margin: 0 auto;」は利用場面が多い指定なので活用してみてください。

paddingやmarginなどを複数書き込む場合は「-(ハイフン)」で区切る

paddingやmarginって、一行で上下左右の値を入れられますよね。
先ほど紹介した方法では1つしか入っていません・・・
一行で複数入れられるのは実際に制作しているとよく使う方法ですので、入れられないなんて困ると思っていませんか？
複数の値を入力する場合は「-(ハイフン)」で区切ると入力できるようです。

これで上下左右の値設定もバッチリですね！

連続して入力する場合は「+（プラス）」でつなぐ

CSSを書くときに1行ずつ書くことになりますが、これが一行で沢山のCSSプロパティ・値を入力できるとホームページ制作の速度が上がると思いませんか？
Emmetを使ったCSSコーディングならできるんです。

このように「+（プラス）」を間に入れて入力することで一度に多くの入力ができます。
入力方法がなかなか慣れないのですが、慣れれば素早くホームページ制作ができるようになりそうですね！！

オマケ：HTMLの生成についてこんな書き方もありました

以前「第30回：人をダメにするエディタ、見つけました」で紹介した書き方以外にもHTMLの生成方法を試してみたらできたので紹介しますね。

table要素の書き方についてです。
2行、3列の表を作ろうと思ったとき、「table>tr*3>th+td>」と書くと思います。
それを「table>(tr>th+td)*3>」と入力して「Tabキー」を入力してみてください。

この書き方でもできました！！
括弧も使う事ができるようです。なんだか算数の公式みたいですね。

まとめ

・HTML以外にもCSSも少ない記述で表記できる
・とても覚えきれないのでチートシートをを活用する。
・「margin: 0 auto;」は「m0-auto」で入力できる
・paddingやmarginなどを複数書き込む場合は「-(ハイフン)」で区切る
・連続して入力する場合は「+（プラス）」でつなぐ