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