制作時間短縮・効率化に便利なツールをいくつか紹介します。見ているだけでも「こんなこともできるのか！」と勉強になるところも多いですよ。
リファレンス・チートシート
リファレンスサイト
リファレンスサイトは、タグやプロパティについて解説してくれているサイトです。 見知らぬCSSプロパティを見つけたときや、スタイル指定が上手くいかないときなどに確認すると良いでしょう。
時間がある時に読みのもの感覚で見ていくと勉強にもなります。
●MDN Web Docs
MDNが提供している、学習プラットフォームです。 解説は正確かつ詳細で、最も信頼のおけるリファレンスと言えるでしょう。
しかし、専門用語が多く、分かりにくいという難点もあります。 他のリファレンスサイトと見合わせつつ読むと分かりやすいと思います。
要素やプロパティを探しにくいので、調べたい物がある場合は右上の検索バーを使用するのがおすすめです。
https://developer.mozilla.org/ja/docs/Learn/HTML
●HTMLクイックリファレンス
ABC順、目的順（逆引き）でHTML,CSS,Javascriptが調べられます。 また「特殊文字リファレンス」やWebセーフカラーなどがあるのも便利。
●CSS3逆引きリファレンス(ShanaBrian)
実用的なCSSを逆引きで調べることができます。
https://shanabrian.com/web/css3/
チートシート類
チートシートは和訳するとカンニングペーパー。 1枚（1ページ）にお題の情報をまとめた、早見表のようなものです。
●HTML5 入れ子チートシート
前回のレッスンで触れた、入れ子のルールが確認できます。 「この要素の中に、これは入れて良かっただろうか？」という時に、すぐに確認できて便利です。
https://yoshikawaweb.com/element/
●CSSセレクタのチートシート
こちらも前回のレッスンで触れた、CSSセレクタの一覧が確認できます。 セレクタを使いこなせると無駄なクラスを作らなくて良いので楽です。が、知らないと検索もあまりしない部分なので、目を通しておくと良いでしょう。
https://webliker.info/css-selector-cheat-sheet/
●CSSの一括指定（ショートハンド）のチートシート
一括指定は便利ですが、時々何が設定できたか、書き順がどうだったかわからなくなりますよね。そんな時にサクッと確認できます。
https://webliker.info/css-short-hand/
ジェネレーター類
CSSでは色々なことが出来るようになった反面、設定が複雑化しています。そらで書こうと思うと、報酬に見合わない労力がかかります。最小限の労力でコーディングするためにジェネレーターやスニペット（コピペコード）集なども活用しましょう。
●CSS三角形作成ツール
吹き出しや見出しの装飾などで使用する三角形。 向きとサイズを入れると自動でCSSを作ってくれます。
http://apps.eky.hk/css-triangle-generator/ja
●CSS Gradient
CSSのグラデーションを出力してくれるジェネレーター。 出来上がりを見ながら設定できるので、エディターで数値を設定するより楽です。
http://apps.eky.hk/css-triangle-generator/ja
●CSS STRIPE GENERATOR
CSSのストライプを出力してくれるジェネレーター。 こちらも出来上がりを見ながら設定できるのが便利。デザインデータでストライプを入れているのにパターン画像がない、切り出すとちょっとズレる、なんて時にもありがたいです。
https://css-stripe-generator.firebaseapp.com/
●CSS3 Generator
text-shadowとbox-shadow、transformなど値を覚えれないプロパティを、プレビューを見ながら生成してくれるジェネレーターです。
●Clippy
CSSによる画像切り抜き「clip-path」プロパティ用の関数・値を作成してくれるジェネレーターです。画像の切り抜きだけではなく、座標をコピペして装飾にも使えます。
https://bennettfeely.com/clippy/
●copypet
こちらはコピペで使えるスニペット集。 よくWebページで使われているパーツのコードが載っています。近いものを探してコピペ→デザインに合わせるという実務だけではなく、CSS学習サイトとしても役立ちます。
Chrome拡張機能
Google Chromeの拡張機能にも、コーディングに役立つものがリリースされています。初期設定ではサーバー上のサイトにしか使えないので、ローカルのファイルも確認したい場合は下記のように設定しましょう。
1.拡張機能を管理を開く 2.使用する拡張機能の「詳細」を開く 3.「ファイルの URL へのアクセスを許可する」を有効にする
●PerfectPixel by WellDoneCode
PerfectPixelはデザイン画像と、Webページを重ねて表示させる拡張機能。
デザインを見ながらエディター、プレビューを見比べながら作業するのはしんどいです。２画面でも同じモニターでないと違って見えたえうところもありますしね。
そんな時にブラウザで画像と、書いているコードを重ねてくれるので便利。 厳密なデザインの再現が求められる案件で、特に役立ちます。
PerfectPixel by WellDoneCode - Chrome ウェブストア
●Responsive Viewer
複数サイズの画面確認が一気にできる拡張機能。 ChromeのResponsive Viewerを切り替える手間が省けます。
Responsive Viewer - Chrome ウェブストア
まとめ
コーディングに役立つツールをいくつか紹介しました。 これ以外にもチートシートやジェネレーターは色々ありますし、スニペットは星の数ほどと言っても良いくらい公開されています。時間のある時に調べてみて「自分が使いやすいもの」をいくつかブックマークしておくと便利ですよ。