効率化を考える
https://b-risk.jp/
繰り返し書いているコードやよく忘れるプロパティなどを、毎回一から書いたり調べたりするのは手間ですよね。
コードスニペット
コードスニペットとは、短いコードのまとまりのことです。繰り返し使うコードをあらかじめ登録 しておけば、簡単に呼び出せて時短につながります！
VS Codeにはコードスニペットを登録する機能が付いています。
VS Code （Visual Studio Code）とはMicrosoftが開発している無料のコードエディタです。
1 jsonファイルを開くUser Snippets を選択します。html （CSSの場合はcss かscss ）と入力して「html.json」か「css.json」か「scss.json」を開きます。
2 コードを登録
descriptionは記入しなくても大丈夫です。
3 使ってみるbgc （prefixのテキスト）を入力してみると、入力予測に「bgc Centered 」が表示されるので選択します。
頻繁に使うコードの塊があったら是非登録しましょう。
Emmet
Emmetとは、HTML・CSSを短い記述で書ける拡張機能のことです。
VS Codeを使用している場合は、Emmetが標準サポートされていますので特別な導入は必要ありません。ほかのエディタでは拡張機能を追加する必要がある場合があります。
Emmetは省略したHTML・CSSを記述してからtabキー（またはエンターや別のショートカットキー）で、HTML・CSSに展開 してくれます。
1234567891011121314151617181920 ▼ divタグ.// 展開<div class=””></div>▼ aタグにクラスa.btn// 展開<a href=”” class=”btn”></a>▼ ネスト・個数指定ul>li*3// 展開<ul> <li></li> <li></li> <li></li></ul>
1234567891011 ▼ paddingp10-15// 展開padding: 10px 15px;▼ backgroundbg#fff// 展開background: #fff;
タイプ数がかなり減っていますよね。面倒な記述も一発で展開してくれるのでとても重宝します。
Emmetの詳しい説明・使い方については、以下の記事をご覧ください。Emmet（エメット）でHTMLとCSSを効率的にコーディングする
Webツール
コーディングに便利なWebツールもたくさん用意されています。
一括pxからvw計算機
pxで指定した数値をvwに変換 してくれるツールです。一括pxからvw計算機
Vue.jsでnth系擬似クラスのジェネレータを作成しました。
nth-child はよく使いますが、時々、いくつで指定すれば思い通りになるのだろう？ と悩むときがあります。Vue.jsでnth系擬似クラスのジェネレータを作成しました。
css-generator.net
css-generator.net
ほかにもtableを作成するジェネレータ や、グラデーションのジェネレータ などもあります。コーディングをより効率的に！楽にHTMLやCSSを生成できるジェネレータ8選（おまけあり） 作業時間を軽減！コーディングに便利なコード作成・変換ツール5選
理解を深める
何事もそうですが、何が起こっているのか・どういうことをしているのか、を理解する のが一番の近道です。解説記事を探したり、ドキュメントを読むように してみてください。
歯車マークからUser Snippetsを選択します。
サンプルが用意されているので、それに則ってコードを登録します。
SCSSファイルにbgc（prefixのテキスト）を入力してみると、入力予測に「bgc Centered」が表示されるので選択します。
