Emmetについて【CSSの記述方法】

こんにちは。

金曜日ということで1週間お疲れ様でした!

 

突然ですがそろそろ年末に向けて大掃除をしないとですね。

私は1ヶ月少し前にこちらに引っ越してきたのでまだ比較的散らかってはいませんが年末実家に帰る前に掃除しないとなぁなんて考えています笑

というより家具がまだあまりないんですよね笑

インテリアが好きなので少しづつ本当に自分が気に入ったものを買い足していこうと思っています!

どれにしようかとあれこれ考えるのが幸せな時間です^^

 

とまぁ雑談はさておき、昨日に引き続きEmmetについてみていきましょう!!

今日はCSSの記述方法ですね(^○^)

 

CSSの記述方法

 

CSSに関しては記述方法というか、単に省略して書けますと言うことしかありません笑

 

いくつか具体例を書くと

例)どれも入力したあとTabで展開します!

  • c  → color: #000;  (#000は初期値)
  • fz  → font-size:;   (※fsと打つと違うものが出てくるので注意)
  • bgc  → background-color: #fff; (#fffは初期値)
  • m   → margin:;
  • mt  → margin-top:;
  • dib  → display: inline-block;
  • db  → display: block;

 

 

さらに数値もあらかじめ入力しておくと数値込みで補完してくれます。

 

例)

  • bg#ccc  → background: #ccc;
  • fz16  → font-size: 16px;
  • mt10  → margin-top: 10px;
  • p5-10-8-10  → padding: 5px 10px 8px 10px;

 

いかがでしたでしょうか^^

Emmetを駆使することで書くコードの量を大幅に減らすことができます!

それによって手の疲れ具合も変わってきますね・・・

いかに書く量を減らすか考えることが大事だと教わりました(><)

時間との勝負ですからね(^^;

コーディングする際はバシバシ使っていこうと思いますー!!

 

では今日はここまで〜〜

良い休日を♪

 

 

 

 

 

コメント

タイトルとURLをコピーしました