【2022年版】Web制作に役立つチートシートまとめ【主に日本語】
Web 制作で困った時の強力な助っ人「チートシート」。
チートシートに関するまとめ記事は数多くありますが、内容が英語のものが多かったり、リンクが切れていたりと、なかなか探すのが大変です。
そんな悩みに対応すべく、2021年版の最新のチートシート情報をまとめます。
普段筆者が使っているものから、今回記事を書くにあたって新たに追加したものまで、広くのジャンルのものを扱います。
※ 記事は 21.12月時点の情報です。ご利用の際は、情報が古くなっていないか、ご自身でのご確認をお願いいたします。
※ 敬称略
※ 筆者が主に使うジャンルを主に扱っています。
01. チートシート……? 役立ちリンク
初っ端からタイトルに沿っていませんが、チートシートのように使える役立ちリンク集です。日本語対応はしていませんが、どれも直感的に使うことが出来ます。
（1）Can I use……（英語）
CSS3, HTML5, JS…… 調べたいプロパティを入力することで、ブラウザの対応状況を分かりやすく示してくれます。ブラウザのバージョンなども示してくれるため、重宝します。
（2）Web Code Tools（英語）
CSS, HTML, meta タグ, Twitter Card…… 直感的に絞り込んで目的のスニペットを得られるジェネレーターです。画像は CSS アニメーションについて。コピペ可。
02. HTML
（1）HTML5 タグチートシート（日本語）
日本語対応の HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめられています。PDF でダウンロード可。
（2）HTML5 入れ子チートシート（日本語）
日本語対応、HTML の入れ子の可否を視覚的に分かりやすく色づけしてくれます。対象要素の 親、子を選ぶだけで、簡単に調べることが出来ます。
W3C バリデーターで、label に h4 を入れないで！ などと怒られることもなくなりますね。
（3）HTML要素チートシート（日本語）
日本語対応、HTMLに関する項目が１ページにすべてまとめられたチートシートです。テーブル上部の各項目の矢印をクリックすることで、フィルタリングすることもできます。
02-01. エンコード
（1）HTMLの記号・特殊文字の文字コード表（日本語）
HTML では一部の文字を特殊な書き方で書き換える必要がありますが、こちらのサイトでは分かりやすく表にまとめてくださっています。HTML 内で使用するときは、「文字実体参照」の列を参照すれば大丈夫です。コピペ可。
（2）HTML Character Entities Cheat Sheet by DaveChild（英語）
英語ですが直感的に分かるかと思います。特殊文字の10進数での表記の仕方がまとめられています。コピペ・PDF でダウンロード可。
03. Markdown
（1）マークダウン記法（日本語）
Github や、プログラミング質問掲示板 teratail（テラテイル）などでも使う機会のあるマークダウン記法について、プレビューと記述を一緒に確認できます。コピペ可。
（2）Markdown記法 チートシート（日本語）
Github にまとめられた、プレビュー付きのマークダウン記法チートシートです。コピペ可。
https://gist.github.com/mignonstyle/083c9e1651d7734f84c99b8cf49d57fa
04. CSS
（1）CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ（英語）
記事は日本語ですが、スニペットは英語です。cursor, filter, transform, box shadow, border radius…… CSS プロパティごとに役立つジェネレーターなどがまとめられています。コピペ可。
（2）CSSセレクタのチートシート（日本語）
CSS セレクタに焦点を当て、プレビューと一緒にコードを確認できるチートシート。コピペ可。
（3）CSS セレクタ（日本語）
こちらも CSSセレクタについて、種類別にプレビューとコードをまとめています。コピペ可。
（4）CSSで使えるセレクタ一覧（日本語）
CSS のセレクタについて表にまとめられています。プレビューはありませんが、全体が見やすいです。コピペ可。
（5）CSS2 チートシート（日本語）
後述のチートシートを和訳したものになります。プレビューはなく、全体を把握しやすくまとめられています。コピペ・PDF ダウンロード可。
（6） CSS2 Cheat Sheet by DaveChild（英語）
前述のチートシートの原本。コピペ・PDF ダウンロード可。
（7）CSSの一括指定（ショートハンド）のチートシート（日本語）
ショートハンドのチートシートはよく使います。こちらは図解付きで非常に分かりやすいです。コピペ可。
（8）Flexbox : シンプルなチートシート（日本語）
Flexbox について、各プロパティの動きを一覧にまとめています。プレビューを選択することでコードを得られ、非常に分かりやすく初心者向きかと思います。コピペ可。
（9）CSS Flexbox のチートシート（日本語）
Web クリエイターボックスによる Flexbox のチートシート。プレビューとプロパティが分かりやすくまとめられています。コピペ・PDF ダウンロード可。
（10）CSS Flexbox（日本語）
Flexbox について、プレビュー付きで非常に分かりやすくまとめてあります。コピペ可。
（11）CSS cursor プロパティ（日本語）
crusor プロパティについて、コード・プレビューが分かりやすくまとめられています。コピペ可。
（12）CSS Reference（英語）
英語の CSS リファレンスです。CSS プロパティなど各項目についてまとめてあり、それぞれをクリックすると詳細を見ることが出来ます。コピペ可。
（13）CSS Cheat Sheet（英語）
英語のリファレンスで、CSSセレクタ・プロパティについてまとめています。各項目をクリックすると、MDN の詳細ページに飛びます。移動先でコピペ可。
04-01. CSS Animation
（1）イージング関数チートシート（日本語）
アニメーションの変化を制御するイージング関数について、プレビュー・コードがまとめられています。各項目をクリックすると詳細を得られ、CSSの cubic-bezier での記述の仕方などを見ることが出来ます。コピペ可。
04-02. Sass
（1）Sass Cheat Sheet（日本語）
「CSSをより構造的に記述することのできるCSSのメタ言語」Sass。このチートシートではコンパイル後のコードと見比べながら、各項目のコードを確認できます。コピペ可。
（2）Sass cheatsheet（英語）
こちらのチートシートはコンパイル後の CSS はなく、Sass の主な使用方法をまとめています（コメントアウトでコンパイル後の補足あり）。コピペ可。
05. JavaScript
こちらではライブラリを用いない、 Vanilla JS（生 JS）についてのチートシートをまとめます。ES6 についての項目が多いです。
（1）jQuery -> Vanilla JSの変換（日本語）
JS ライブラリ jQuery から生 JS に書き換えるための、コード一覧をまとめたチートシートです。基本的なことはこちらにまとまっているので、初歩を忘れたときに参照しています。コピペ可。
（2）JavaScript チートシート （日本語）
演算子や関数などについて一覧で見ることができ、各項目がより詳しい説明への入り口となっています。コピペ可。
（3）モダン JavaScript チートシート（日本語）
こちらは Github で評価の高い「Modern js Cheatsheet」を日本語に翻訳したチートシート。ES6 の新たな記述の仕方などをメインにまとめられています。コピペ可。
（4）ES6(ES2015)チートシート（日本語）
ES6 の機能について、サンプルコードが説明と共にまとめられています。コピペ可。
（5） JavaScript Cheat Sheet by DaveChild（英語）
JavaScript の主な記述方法について、項目と簡易な説明がついています（英語）。残念ながら日本語訳は見つかりませんでした。コピペ・PDF ダウンロード可。
（6） JavaScript Cheat Sheet by Pyro19D（英語）
項目と簡易説明（英語）がまとめられたチートシート。（5）とはあまり被っていないように思います。こちらも残念ながら和訳は見つかりませんでした。コピペ・PDF ダウンロード可。
（7）ES6 cheat sheet（英語）
ES6 のアロー関数や Promise オブジェクトなど、各項目ごとにサンプルコードと補足が英語でまとめられています。コピペ可。
05-01. jQuery
（1）jQuery・Ajax チートシート（日本語）
JS ライブラリ、jQuery について主な記述の仕方、Ajax（非同期通信）のサンプルコードをまとめています。コピペ可。
（2） jQuery Cheat Sheet by i3quest（英語）
項目と簡易な説明（英語）を一覧にまとめたチートシート。残念ながら和訳は見つかりませんでした。コピペ・PDF ダウンロード可。
06. PHP
（1）PHP Cheat Sheet（日本語）
後述のチートシートを和訳したものになります。PHP に関する基本的な項目が簡易な説明と共にまとめられています。コピペ・PDF ダウンロード可。
（2） PHP Cheat Sheet by DaveChild（英語）
前述のチートシートの原本で、英語にて項目と簡易な説明がまとめられています。コピペ・PDF ダウンロード可。
（3） PHP Cheat Sheet by krabat1（英語）
PHP チートシートまとめ兼、リファレンス。和訳は見つかりませんでした。PDF ダウンロード可。
07. 正規表現
正規表現は、JS, PHP などで用いる「いくつかの文字列を一つの形式で表現するための表現方法」です。
（1）正規表現 pdf （日本語）
こちらは後述のチートシートを和訳したものになります。コードと簡易の説明がまとめられています。コピペ・PDF ダウンロード可。
（2） Regular Expressions Cheat Sheet by DaveChild（英語）
前述のチートシート原本。コピペ・PDF ダウンロード可。
（3）PHP: preg_match() / JavaScript: match() 正規表現チェッカー（日本語）
構文チェッカーですが、日本語のリファレンスとしても利用できます。コピペ可。
（4）正規表現チートシート（日本語）
コードと簡易の説明がまとめられています。コピペ・PDF ダウンロード可。
08. VS Code
VSCode は、プログラミング用テキストエディタの一つです。
（1）Visual Studio Code キーボードショートカット一覧（日本語）
ショートカット一覧について、和訳したチートシートになります。PNG ダウンロード可。
Windows版
Mac版
09. Emmet
コーディング効率化の強い味方、Emmet。テキストエディタの拡張機能で導入できますが、VSCode にはデフォルトで入っています。
正直 Emmet に関しては、優れたまとめ記事が沢山あるのでチートシートを見なくても大丈夫かもしれませんが、やはり公式のチートシートは重宝します。
（1）Emmet Cheat Sheet（英語）
公式のチートシートは説明が網羅されています。ショートコードと展開後のコードをまとめて見ることができます。コピペ・PDF ダウンロード可。
（2）Emmet Cheat Sheet（日本語）
初心者向けのチートシート。ショートコード、展開後のコードがまとめられています。中級者以上には少し物足りないかもしれません。PDF ダウンロード可。
その他、Emmet に関する参考記事や、ショートコードまとめは以下の記事にまとめています。拡張機能の項目と、最後の方の便利機能まとめで言及しています。
10. Font Awesome
（1）Font Awesome Free's Cheatsheet（英語）
Web アイコンの代表ともいえる Font Awesome。公式からフリーのアイコンに関するチートシートが出ています。各アイコンごとにプレビュー、記述コードがまとめられています。コピペ・プリント可。
11. Adobe
（1）Illustratorのショートカットキー早見表（日本語）
Adobe 公式の Illustrator ショートカットチートシートです。PDF ダウンロード可。
https://helpx.adobe.com/jp/illustrator/how-to/use-shortcut-keys-for-efficiency-illustrator.html
（2）Photoshopのショートカットキー早見表（日本語）
Adobe 公式の Photoshop ショートカットチートシートです。PDF ダウンロード可。
https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html
12. WordPress
（1）日本語版 WordPress チートシート（日本語）
Web クリエイターボックスによる WordPress のカンニングペーパー。コードと簡易の説明がまとめられています。コピペ・PDF ダウンロード可。
（2）WordPressテンプレートタグ チートシート（日本語）
テンプレートタグに関する日本語のチートシートですが、少し情報が古いかもしれません。コピペ可。
13. SEO
（1）SEO 基本技術のチートシート（日本語）
SEO に関する基本的な情報がまとめられています。コピペ・PDF ダウンロード可。
14. おわりに
駆け足での説明となりまして失礼しました。実際に普段使っているものから新たに追加したものまで、幅広いチートシートをまとめましたので、どなたかのお役に立てればと思います。
この記事を書くにあたって、沢山の記事を参考にさせていただき、ありがとうございました。最後に参考文献（この記事に引用した以外のもの）を簡単にまとめますので、ご参考ください。
15. 参考文献
・Webデザイナー・開発者向けの３７個のチートシート集まとめてみた。
・HTML/CSSの覚え方 WEB制作に役立つ便利なチートシートまとめ
・プログラミングを効率化するチートシートまとめ【Web制作】
・Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
・50 Best HTML & CSS Cheat Sheets
・【Web制作に役立つ！】チートシート(ショートカット)まとめ
・もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
・【随時更新】Web制作に役立ちそうなチートシートをまとめてみた。
・七種の神器！？Web制作に役立つ便利な「チートシート日本語版」まとめ（修正版）