フロントエンド開発やWEB制作で使用するHTML、CSS、JavaScript、VSCode、WordPress、Gitのチートシートを26個まとめました。
PDFでダウンロードできるものからサイト上で確認できるチートシートやツール系のものまで効率的に開発できる様々な種類のチートシートを紹介しています。
実装に役立ちそうなチートシートがあればぜひ活用してみてください。
HTML関連
HTML5 タグチートシート
![](/storage/img/posts/64aba4c0b4b65.jpg)
HTML5のタグとその概要をPDFまたは画像でダウンロードできます。
Emmet Cheat Sheet
![](/storage/img/posts/64aba4c1c4031.jpg)
Emmetを使用してコーディングを行う際に、必要なコマンドやショートカットを素早く参照できます
HTML5 入れ子チートシート
![HTML5 入れ子チートシート | 吉川ウェブ](/storage/img/posts/64ab7a1d3b4d4.jpg)
HTML 5.2までの子要素・親要素の対応を視覚的に表示するチートシートです。調べたい要素をクリックすると対応する親、子要素を色替えしてくれます。
Pugの記法まとめ
![Pugの記法まとめ - Qiita](/storage/img/posts/64aba4c1f1c8e.jpg)
divやpタグの記法や入れ子での指定方法などサッと確認できます。
HTML特殊文字コード表
![](/storage/img/posts/64aba4c2035bb.jpg)
よく使われる特殊文字などが一覧形式でまとまっています。
CSS関連
CSSセレクタのチートシート
![](/storage/img/posts/64aba4c21c52c.jpg)
忘れがちな子孫セレクタ、兄弟セレクタ、隣接セレクタ、擬似クラス、擬似要素など37パターンのセレクタの使い方がコードと図解で解説されています。
CSS Flexboxのチートシート
![日本語対応!CSS Flexboxのチートシートを作ったので配布します](/storage/img/posts/64ab7a1de2c17.jpg)
Flexboxの使い方が図解でわかりやすく解説されています。
CSS Grid チートシート
![](/storage/img/posts/64aba4c23957c.jpg)
CSSグリッドの指定方法をイメージで確認しながら学べます。
Tailwind CSS Cheat Sheet
![](/storage/img/posts/64aba4c24c6de.jpg)
CSSのプロパティ名をクリックするとTailwind CSSで指定可能なクラスがリスト表示されます。プロパティ名で検索も可能。
Bootstrap 5 CheatSheet
![Bootstrap 5 CheatSheet 🚀 By ThemeSelection | Classes](/storage/img/posts/64ab7a1de7c28.jpg)
Bootstrap5で指定できるクラスがコンポーネントごとにまとめられています。クリックするとコードと実際の表示プレビューを確認できます。
Bootstrap 5 CheatSheet 🚀 By ThemeSelection | Classes
【CSS】メディアクエリチートシート
![【CSS】メディアクエリチートシート](/storage/img/posts/64ab7a1debe9e.jpg)
CSSのメディアクエリの書き方がまとめられています。レスポンシブ対応を行う際のスマホ、タブレットでのメディアクエリの指定方法が確認できます。
【Sass】SCSS記法チートシート
![【Sass】SCSS記法チートシート](/storage/img/posts/64ab7a1e28590.jpg)
SCSSの書き方のチートシート。ネスト構造、変数の使用方法や条件、繰り返しなどの指定方法が確認できます。
JavaScript関連
JavaScriptチートシート
![](/storage/img/posts/64aba4c26548f.jpg)
JavaScriptチートシート。コメント、文字列、演算子、関数などの指定方法を確認でき、「解説」のリンクをクリックすると詳細な解説ページに遷移します。MDNへの遷移も可能。
モダン JavaScript チートシート
![](/storage/img/posts/64aba4c275494.jpg)
変数宣言、アロー関数の使い方、スプレッド演算子、配列メソッドなどJavaScriptのモダンな指定方法が確認できます。
jQueryチートシート - Qiita
![jQueryチートシート - Qiita](/storage/img/posts/64ab7a1e36f13.jpg)
jQueryのチートシート。よく使うメソッドやイベント処理、非同期処理などの指定方法が解説されています。
You Don't Need jQuery - Qiita
![You Don't Need jQuery - Qiita](/storage/img/posts/64ab7a1e323be.jpg)
jQueryとJavaScriptの書き方の違いを比較しています。セレクタやスタイル、DOM操作やアニメーションなどJSでどのように指定するか確認できます。
Vue.jsチートシート
![Vue.jsチートシート](/storage/img/posts/64ab7a1e3b892.jpg)
Vue.jsのチートシート。基本文法からデータの保持、computedやprops、ディレクティブの指定方法などが確認できます。
React入門者のためのReactチートシート | アールエフェクト
![React入門者のためのReactチートシート | アールエフェクト](/storage/img/posts/64ab7a1e42af9.jpg)
React用のチートシート。Reactの機能や記述方法を忘れた人を対象にCSSの設定方法やPropsの指定、イベントやHooksなどが簡単なコードから確認できます。
React入門者のためのReactチートシート | アールエフェクト
WordPress関連
日本語版 WordPress チートシート
![日本語版 WordPress チートシート](/storage/img/posts/64ab7a1e47e64.jpg)
WordPressのチートシート。WordPressで使用するタグが種類別にまとめられています。PDFでダウンロードできます。
【コピペで使える】日本語版WordPressチートシート
![【コピペで使える】日本語版WordPressチートシート](/storage/img/posts/64ab7a1e4b3a6.jpg)
WorePress基本的なタグをまとめ。よく使うタグをコピペできます。
Visual Studio Code関連
VSCodeショートカット
![](/storage/img/posts/64abb67ec8d6a.jpg)
VSCodeでよく使うショートカットまとめ。PDFでダウンロードできます。
VSCheatsheet
![VSCheatsheet | Shortcuts in the shortest time possible | Shortcut Illustrations](/storage/img/posts/64abb67f0cd81.jpg)
よく使用するVSCodeのショートカットを動作を確認しながら覚えられるチートシートです。
VSCheatsheet | Shortcuts in the shortest time possible | Shortcut Illustrations>
Git関連
Gitチートシート
![](/storage/img/posts/64abb67f1f398.jpg)
リポジトリの作成から変更をコミットする方法、ブランチの作成や履歴の確認などよく使用するgitのコマンドがまとめられたチートシートです。
Git でよく使われるコマンドをイラストで説明
![[ver 1.2] Git でよく使われるコマンドにイラストによる説明を加えて1枚のチートシートにまとめてみた - Qiita](/storage/img/posts/64ab7a1e59bed.jpg)
Gitコマンドを図解で確認できるチートシート。add、commit、push、pullなどのコマンドが直感的に覚えられます。
Git でよく使われるコマンドにイラストによる説明を加えて1枚のチートシートにまとめてみた
忘れやすい人のための git diff チートシート
![忘れやすい人のための git diff チートシート - Qiita](/storage/img/posts/64ab7a1e5f4ca.jpg)
git diffコマンドに特化したチートシート。場面ごとに使用するdiffコマンドがまとめられています。
サル先生のGit入門
![サル先生のGit入門](/storage/img/posts/64ab7a1e650f2.jpg)
こちらはチートシートというよりGitをしっかりと理解したい人向けのGit学習サイト。Gitのインストールから基本設定、リポジトリの共有など図解でわかりやすく解説しています。