【2026年版】Web制作チートシートまとめ｜HTML・CSS・JavaScript・VS Code・Cursor

Web制作の勉強中に手元にあると便利なチートシートを、日本語で読めるものを中心にまとめました。印刷して壁に貼ったり、デスクトップに置いたり、使い方は自由です。

リンク先はすべて外部サイトです。2026年10月29日にリンクが開けることを確認しました。

HTML 5

HTML 5 チートシート（@IT）

CSS 3

CSSチートシート（SlideShare）
Flexboxチートシート（Webクリエイターボックス）

JavaScript

JavaScript Primer チートシート

jQuery

jQueryチートシート（Qiita）

VS Code

VS Codeショートカットまとめ（Qiita）

Cursor（Mac）

Cursorのショートカットまとめ（Zenn）

VS Codeに最初に入れておきたい拡張機能

VS Codeを使うなら、拡張機能を少し入れるだけで書きやすさがかなり変わります。最初はこのあたりで十分です。

• Japanese Language Pack：メニューを日本語にする
• Prettier – Code formatter：保存時にコードの見た目を整える
• Auto Rename Tag：開始タグを直すと閉じタグも一緒に直る
• Live Server：保存するとブラウザの表示がすぐ更新される
• Path Intellisense：画像やCSSのファイルパスを補完する
• indent-rainbow：インデントの深さを色分けする

どれもVS Codeの拡張機能画面で名前を検索すれば入れられます。Cursorでも同じ拡張機能が使えます。Cursorの始め方はCursorの使い方入門にまとめています。

チートシートの次にやること

チートシートは調べる時間を減らす道具なので、手を動かす時間を増やすのが本題です。何から手をつけるか迷っている人は、Web制作 独学ロードマップから進めてみてください。

PC作業そのものを速くしたい人は、Excelショートカット一覧壁紙もどうぞ。