![見出し画像](https://assets.st-note.com/production/uploads/images/64471581/rectangle_large_type_2_75b97d86da3d54a4c58b25f0817fcf19.png?width=800)
【2022年版】Web制作に役立つチートシートまとめ【主に日本語】
Web 制作で困った時の強力な助っ人「チートシート」。
チートシートに関するまとめ記事は数多くありますが、内容が英語のものが多かったり、リンクが切れていたりと、なかなか探すのが大変です。
そんな悩みに対応すべく、2021年版の最新のチートシート情報をまとめます。
普段筆者が使っているものから、今回記事を書くにあたって新たに追加したものまで、広くのジャンルのものを扱います。
※ 記事は 21.12月時点の情報です。ご利用の際は、情報が古くなっていないか、ご自身でのご確認をお願いいたします。
※ 敬称略
※ 筆者が主に使うジャンルを主に扱っています。
01. チートシート……? 役立ちリンク
初っ端からタイトルに沿っていませんが、チートシートのように使える役立ちリンク集です。日本語対応はしていませんが、どれも直感的に使うことが出来ます。
(1)Can I use……(英語)
![画像1](https://assets.st-note.com/production/uploads/images/64421228/picture_pc_869553ec484d9669ce563f097fb63346.png?width=800)
CSS3, HTML5, JS…… 調べたいプロパティを入力することで、ブラウザの対応状況を分かりやすく示してくれます。ブラウザのバージョンなども示してくれるため、重宝します。
(2)Web Code Tools(英語)
![画像2](https://assets.st-note.com/production/uploads/images/64421596/picture_pc_f78a795048964cc0ba301643b6ce7014.png?width=800)
CSS, HTML, meta タグ, Twitter Card…… 直感的に絞り込んで目的のスニペットを得られるジェネレーターです。画像は CSS アニメーションについて。コピペ可。
02. HTML
(1)HTML5 タグチートシート(日本語)
![画像3](https://assets.st-note.com/production/uploads/images/64422216/picture_pc_46e107cb67ac170bd9bdd8aebafde87c.png?width=800)
日本語対応の HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめられています。PDF でダウンロード可。
(2)HTML5 入れ子チートシート(日本語)
![画像4](https://assets.st-note.com/production/uploads/images/64422857/picture_pc_2d1cb1d49d8d4043c52e428a125c3c62.png?width=800)
日本語対応、HTML の入れ子の可否を視覚的に分かりやすく色づけしてくれます。対象要素の 親、子を選ぶだけで、簡単に調べることが出来ます。
W3C バリデーターで、label に h4 を入れないで! などと怒られることもなくなりますね。
(3)HTML要素チートシート(日本語)
![](https://assets.st-note.com/img/1640779767500-Xi2LyE9i7T.png?width=800)
日本語対応、HTMLに関する項目が1ページにすべてまとめられたチートシートです。テーブル上部の各項目の矢印をクリックすることで、フィルタリングすることもできます。
02-01. エンコード
(1)HTMLの記号・特殊文字の文字コード表(日本語)
![画像5](https://assets.st-note.com/production/uploads/images/64423762/picture_pc_8a2ce335902eeafb5d471f475eb9fdce.png?width=800)
HTML では一部の文字を特殊な書き方で書き換える必要がありますが、こちらのサイトでは分かりやすく表にまとめてくださっています。HTML 内で使用するときは、「文字実体参照」の列を参照すれば大丈夫です。コピペ可。
(2)HTML Character Entities Cheat Sheet by DaveChild(英語)
![画像6](https://assets.st-note.com/production/uploads/images/64424574/picture_pc_b64ce8b03406e052962ecc710fe026de.png?width=800)
英語ですが直感的に分かるかと思います。特殊文字の10進数での表記の仕方がまとめられています。コピペ・PDF でダウンロード可。
03. Markdown
(1)マークダウン記法(日本語)
![画像7](https://assets.st-note.com/production/uploads/images/64425315/picture_pc_6885c83a503909f0870e5e74d2229508.png?width=800)
Github や、プログラミング質問掲示板 teratail(テラテイル)などでも使う機会のあるマークダウン記法について、プレビューと記述を一緒に確認できます。コピペ可。
(2)Markdown記法 チートシート(日本語)
![画像8](https://assets.st-note.com/production/uploads/images/64425787/picture_pc_0b168a05d1b9aca9c4469275b8a4c56e.png?width=800)
Github にまとめられた、プレビュー付きのマークダウン記法チートシートです。コピペ可。
https://gist.github.com/mignonstyle/083c9e1651d7734f84c99b8cf49d57fa
04. CSS
(1)CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ(英語)
![画像9](https://assets.st-note.com/production/uploads/images/64426685/picture_pc_16d802292b2849243ca0db785ad464c9.png?width=800)
記事は日本語ですが、スニペットは英語です。cursor, filter, transform, box shadow, border radius…… CSS プロパティごとに役立つジェネレーターなどがまとめられています。コピペ可。
(2)CSSセレクタのチートシート(日本語)
![画像10](https://assets.st-note.com/production/uploads/images/64427339/picture_pc_fc19dce56f5f9b0fcf5e76a43409c84e.png?width=800)
CSS セレクタに焦点を当て、プレビューと一緒にコードを確認できるチートシート。コピペ可。
(3)CSS セレクタ(日本語)
![画像12](https://assets.st-note.com/production/uploads/images/64428063/picture_pc_eb039c2e310ddf483a938465e3da4591.png?width=800)
こちらも CSSセレクタについて、種類別にプレビューとコードをまとめています。コピペ可。
(4)CSSで使えるセレクタ一覧(日本語)
![画像11](https://assets.st-note.com/production/uploads/images/64427660/picture_pc_2aa0a5335a4fb6a3e193f10418340f08.png?width=800)
CSS のセレクタについて表にまとめられています。プレビューはありませんが、全体が見やすいです。コピペ可。
(5)CSS2 チートシート(日本語)
![画像13](https://assets.st-note.com/production/uploads/images/64429115/picture_pc_03b6801df260fdb389d2736473e1a193.png?width=800)
後述のチートシートを和訳したものになります。プレビューはなく、全体を把握しやすくまとめられています。コピペ・PDF ダウンロード可。
(6) CSS2 Cheat Sheet by DaveChild(英語)
![画像14](https://assets.st-note.com/production/uploads/images/64430630/picture_pc_a44a7bfac46ed12ce62eda154c89a130.png?width=800)
前述のチートシートの原本。コピペ・PDF ダウンロード可。
(7)CSSの一括指定(ショートハンド)のチートシート(日本語)
![画像15](https://assets.st-note.com/production/uploads/images/64430904/picture_pc_11a6e32a433296030d5a65c5877c3dfe.png?width=800)
ショートハンドのチートシートはよく使います。こちらは図解付きで非常に分かりやすいです。コピペ可。
(8)Flexbox : シンプルなチートシート(日本語)
![画像16](https://assets.st-note.com/production/uploads/images/64431635/picture_pc_288b79b1471353a2e370cd8c54987cd4.png?width=800)
Flexbox について、各プロパティの動きを一覧にまとめています。プレビューを選択することでコードを得られ、非常に分かりやすく初心者向きかと思います。コピペ可。
(9)CSS Flexbox のチートシート(日本語)
![画像17](https://assets.st-note.com/production/uploads/images/64432383/picture_pc_d713dc23e97b70f48ffcaffcbbee4a3d.png?width=800)
Web クリエイターボックスによる Flexbox のチートシート。プレビューとプロパティが分かりやすくまとめられています。コピペ・PDF ダウンロード可。
(10)CSS Flexbox(日本語)
![画像18](https://assets.st-note.com/production/uploads/images/64432807/picture_pc_0379bd1a108ec40bdea50de225c5194a.png?width=800)
Flexbox について、プレビュー付きで非常に分かりやすくまとめてあります。コピペ可。
(11)CSS cursor プロパティ(日本語)
![画像19](https://assets.st-note.com/production/uploads/images/64433064/picture_pc_6be2e9d9060acec256fb671b8c241906.png?width=800)
crusor プロパティについて、コード・プレビューが分かりやすくまとめられています。コピペ可。
(12)CSS Reference(英語)
![画像20](https://assets.st-note.com/production/uploads/images/64433339/picture_pc_2855350c08c349adae4b8909853c3de5.png?width=800)
英語の CSS リファレンスです。CSS プロパティなど各項目についてまとめてあり、それぞれをクリックすると詳細を見ることが出来ます。コピペ可。
(13)CSS Cheat Sheet(英語)
![画像21](https://assets.st-note.com/production/uploads/images/64433741/picture_pc_246bc42f563fb7082548535a44bac412.png?width=800)
英語のリファレンスで、CSSセレクタ・プロパティについてまとめています。各項目をクリックすると、MDN の詳細ページに飛びます。移動先でコピペ可。
04-01. CSS Animation
(1)イージング関数チートシート(日本語)
![画像22](https://assets.st-note.com/production/uploads/images/64438841/picture_pc_1eb4184c8492c852c0dfc779e67fa9e0.png?width=800)
アニメーションの変化を制御するイージング関数について、プレビュー・コードがまとめられています。各項目をクリックすると詳細を得られ、CSSの cubic-bezier での記述の仕方などを見ることが出来ます。コピペ可。
04-02. Sass
(1)Sass Cheat Sheet(日本語)
![画像23](https://assets.st-note.com/production/uploads/images/64439292/picture_pc_7c7c773576c8c6df22aaefc74719c5f3.png?width=800)
「CSSをより構造的に記述することのできるCSSのメタ言語」Sass。このチートシートではコンパイル後のコードと見比べながら、各項目のコードを確認できます。コピペ可。
(2)Sass cheatsheet(英語)
![画像24](https://assets.st-note.com/production/uploads/images/64439816/picture_pc_a6d0329cefa0533d27bdc93356bd80cd.png?width=800)
こちらのチートシートはコンパイル後の CSS はなく、Sass の主な使用方法をまとめています(コメントアウトでコンパイル後の補足あり)。コピペ可。
05. JavaScript
こちらではライブラリを用いない、 Vanilla JS(生 JS)についてのチートシートをまとめます。ES6 についての項目が多いです。
(1)jQuery -> Vanilla JSの変換(日本語)
![画像25](https://assets.st-note.com/production/uploads/images/64440340/picture_pc_4954355b26ed447865cfd6056c8f940a.png?width=800)
JS ライブラリ jQuery から生 JS に書き換えるための、コード一覧をまとめたチートシートです。基本的なことはこちらにまとまっているので、初歩を忘れたときに参照しています。コピペ可。
(2)JavaScript チートシート (日本語)
![画像27](https://assets.st-note.com/production/uploads/images/64442298/picture_pc_7322336bde3868b78eb29c8eb111d833.png?width=800)
演算子や関数などについて一覧で見ることができ、各項目がより詳しい説明への入り口となっています。コピペ可。
(3)モダン JavaScript チートシート(日本語)
![画像28](https://assets.st-note.com/production/uploads/images/64442750/picture_pc_f8cb9809ea156de94419ada0c56cd91e.png?width=800)
こちらは Github で評価の高い「Modern js Cheatsheet」を日本語に翻訳したチートシート。ES6 の新たな記述の仕方などをメインにまとめられています。コピペ可。
(4)ES6(ES2015)チートシート(日本語)
![画像31](https://assets.st-note.com/production/uploads/images/64445766/picture_pc_140f137f33e5e398d796ec4fba2c2d20.png?width=800)
ES6 の機能について、サンプルコードが説明と共にまとめられています。コピペ可。
(5) JavaScript Cheat Sheet by DaveChild(英語)
![画像26](https://assets.st-note.com/production/uploads/images/64441057/picture_pc_8b9417138c8f7412ffa50718054d1564.png?width=800)
JavaScript の主な記述方法について、項目と簡易な説明がついています(英語)。残念ながら日本語訳は見つかりませんでした。コピペ・PDF ダウンロード可。
(6) JavaScript Cheat Sheet by Pyro19D(英語)
![画像29](https://assets.st-note.com/production/uploads/images/64443727/picture_pc_7d4604d6ca3c0919a995c21197a363cf.png?width=800)
項目と簡易説明(英語)がまとめられたチートシート。(5)とはあまり被っていないように思います。こちらも残念ながら和訳は見つかりませんでした。コピペ・PDF ダウンロード可。
(7)ES6 cheat sheet(英語)
![画像30](https://assets.st-note.com/production/uploads/images/64444637/picture_pc_fa2b3ad9a0892bbf40a5f163dd152e88.png?width=800)
ES6 のアロー関数や Promise オブジェクトなど、各項目ごとにサンプルコードと補足が英語でまとめられています。コピペ可。
05-01. jQuery
(1)jQuery・Ajax チートシート(日本語)
![画像32](https://assets.st-note.com/production/uploads/images/64446553/picture_pc_7351925eae3c2964c2d0fda42c66b2b4.png?width=800)
JS ライブラリ、jQuery について主な記述の仕方、Ajax(非同期通信)のサンプルコードをまとめています。コピペ可。
(2) jQuery Cheat Sheet by i3quest(英語)
![画像33](https://assets.st-note.com/production/uploads/images/64447221/picture_pc_d17457c7dc6955167e121b7a8d1749e4.png?width=800)
項目と簡易な説明(英語)を一覧にまとめたチートシート。残念ながら和訳は見つかりませんでした。コピペ・PDF ダウンロード可。
06. PHP
(1)PHP Cheat Sheet(日本語)
![画像34](https://assets.st-note.com/production/uploads/images/64447981/picture_pc_3e52c4033da9db2cb14848fcbd20731f.png?width=800)
後述のチートシートを和訳したものになります。PHP に関する基本的な項目が簡易な説明と共にまとめられています。コピペ・PDF ダウンロード可。
(2) PHP Cheat Sheet by DaveChild(英語)
![画像35](https://assets.st-note.com/production/uploads/images/64448699/picture_pc_35180b95a9ae86d400ace5401995d6ff.png?width=800)
前述のチートシートの原本で、英語にて項目と簡易な説明がまとめられています。コピペ・PDF ダウンロード可。
(3) PHP Cheat Sheet by krabat1(英語)
![画像36](https://assets.st-note.com/production/uploads/images/64449241/picture_pc_7277105e3115e3760864f5fc3e19fe8d.png?width=800)
PHP チートシートまとめ兼、リファレンス。和訳は見つかりませんでした。PDF ダウンロード可。
07. 正規表現
正規表現は、JS, PHP などで用いる「いくつかの文字列を一つの形式で表現するための表現方法」です。
(1)正規表現 pdf (日本語)
![画像37](https://assets.st-note.com/production/uploads/images/64449936/picture_pc_1b0346a9dd3b7d8b8a3c87aabcd8c6b8.png?width=800)
こちらは後述のチートシートを和訳したものになります。コードと簡易の説明がまとめられています。コピペ・PDF ダウンロード可。
(2) Regular Expressions Cheat Sheet by DaveChild(英語)
![画像38](https://assets.st-note.com/production/uploads/images/64450583/picture_pc_f67413ce7de931c6f410f118097ba289.png?width=800)
前述のチートシート原本。コピペ・PDF ダウンロード可。
(3)PHP: preg_match() / JavaScript: match() 正規表現チェッカー(日本語)
![画像39](https://assets.st-note.com/production/uploads/images/64450911/picture_pc_c51c2e79e2c0c16cbb2ca8cade97725a.png?width=800)
構文チェッカーですが、日本語のリファレンスとしても利用できます。コピペ可。
(4)正規表現チートシート(日本語)
![画像40](https://assets.st-note.com/production/uploads/images/64451543/picture_pc_74d6aa50e3f62ada777035c5aa656e7f.png?width=800)
コードと簡易の説明がまとめられています。コピペ・PDF ダウンロード可。
08. VS Code
VSCode は、プログラミング用テキストエディタの一つです。
(1)Visual Studio Code キーボードショートカット一覧(日本語)
![画像41](https://assets.st-note.com/production/uploads/images/64451867/picture_pc_b3eb101594031834ebf554e5158b5a29.png?width=800)
ショートカット一覧について、和訳したチートシートになります。PNG ダウンロード可。
Windows版
Mac版
09. Emmet
コーディング効率化の強い味方、Emmet。テキストエディタの拡張機能で導入できますが、VSCode にはデフォルトで入っています。
正直 Emmet に関しては、優れたまとめ記事が沢山あるのでチートシートを見なくても大丈夫かもしれませんが、やはり公式のチートシートは重宝します。
(1)Emmet Cheat Sheet(英語)
![画像42](https://assets.st-note.com/production/uploads/images/64452970/picture_pc_744878e9f9db427ff09ebffa45abd58a.png?width=800)
公式のチートシートは説明が網羅されています。ショートコードと展開後のコードをまとめて見ることができます。コピペ・PDF ダウンロード可。
(2)Emmet Cheat Sheet(日本語)
![画像43](https://assets.st-note.com/production/uploads/images/64454012/picture_pc_1fb823204dec4c13ea777043f0324d5f.png?width=800)
初心者向けのチートシート。ショートコード、展開後のコードがまとめられています。中級者以上には少し物足りないかもしれません。PDF ダウンロード可。
その他、Emmet に関する参考記事や、ショートコードまとめは以下の記事にまとめています。拡張機能の項目と、最後の方の便利機能まとめで言及しています。
10. Font Awesome
(1)Font Awesome Free's Cheatsheet(英語)
![画像44](https://assets.st-note.com/production/uploads/images/64455290/picture_pc_4a0a90c649605a6247a09ce5b728db83.png?width=800)
Web アイコンの代表ともいえる Font Awesome。公式からフリーのアイコンに関するチートシートが出ています。各アイコンごとにプレビュー、記述コードがまとめられています。コピペ・プリント可。
11. Adobe
(1)Illustratorのショートカットキー早見表(日本語)
![画像45](https://assets.st-note.com/production/uploads/images/64455838/picture_pc_b0942e3471bf98462681c13d319d118d.png?width=800)
Adobe 公式の Illustrator ショートカットチートシートです。PDF ダウンロード可。
https://helpx.adobe.com/jp/illustrator/how-to/use-shortcut-keys-for-efficiency-illustrator.html
(2)Photoshopのショートカットキー早見表(日本語)
![画像46](https://assets.st-note.com/production/uploads/images/64456025/picture_pc_4a386dbdc7542d17b0f244c399de53be.png?width=800)
Adobe 公式の Photoshop ショートカットチートシートです。PDF ダウンロード可。
https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html
12. WordPress
(1)日本語版 WordPress チートシート(日本語)
![画像47](https://assets.st-note.com/production/uploads/images/64456991/picture_pc_a355235203a1528d2506a31ad6f61ebb.png?width=800)
Web クリエイターボックスによる WordPress のカンニングペーパー。コードと簡易の説明がまとめられています。コピペ・PDF ダウンロード可。
(2)WordPressテンプレートタグ チートシート(日本語)
![画像48](https://assets.st-note.com/production/uploads/images/64457788/picture_pc_6e0e78662f7a71d6bfe52d0ce3022102.png?width=800)
テンプレートタグに関する日本語のチートシートですが、少し情報が古いかもしれません。コピペ可。
13. SEO
(1)SEO 基本技術のチートシート(日本語)
![画像49](https://assets.st-note.com/production/uploads/images/64458124/picture_pc_a2f604d46d014df990cb5e53801123f5.png?width=800)
SEO に関する基本的な情報がまとめられています。コピペ・PDF ダウンロード可。
14. おわりに
駆け足での説明となりまして失礼しました。実際に普段使っているものから新たに追加したものまで、幅広いチートシートをまとめましたので、どなたかのお役に立てればと思います。
この記事を書くにあたって、沢山の記事を参考にさせていただき、ありがとうございました。最後に参考文献(この記事に引用した以外のもの)を簡単にまとめますので、ご参考ください。
15. 参考文献
・Webデザイナー・開発者向けの37個のチートシート集まとめてみた。
・HTML/CSSの覚え方 WEB制作に役立つ便利なチートシートまとめ
・プログラミングを効率化するチートシートまとめ【Web制作】
・Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
・50 Best HTML & CSS Cheat Sheets
・【Web制作に役立つ!】チートシート(ショートカット)まとめ
・もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
・【随時更新】Web制作に役立ちそうなチートシートをまとめてみた。
・七種の神器!?Web制作に役立つ便利な「チートシート日本語版」まとめ(修正版)
この記事が気に入ったらサポートをしてみませんか?