【Web制作に役立つ！】チートシート(ショートカット)まとめ

チートシート（cheat sheet）とは？

チートシート（cheat sheet）の意味は辞書で調べると　［カンニングペーパー］［虎の巻］という意味ですが、いわゆるショートカットとかの［早見表］の事です。

新しく使い始めたツールの場合、ショートカットが分からなかったりしますよね。
そんな時にチートシートがあると便利です。

今回は、ショートカット系のチートシートや、Web制作に役立つチートシートをまとめました。

ショートカット系チートシート

これで作業効率が劇的に上がる！ Photoshopのショートカットキー早見表

Photoshopのショートカットチートシートです。
Adobeが分かりやすくまとめてくれています。
Mac,Windowsに分けてくれているので、ありがたいですね！

https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-…

https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html

これで作業効率が劇的に上がる！Illustratorのショートカットキー早見表

Illustratorのショートカットチートシートです。
Photoshopと同様にMac,Windowsに分けてくれています。

https://helpx.adobe.com/jp/illustrator/how-to/use-shortcut-keys-for-efficienc…

https://helpx.adobe.com/jp/illustrator/how-to/use-shortcut-keys-for-efficiency-illustrator.html

Adobe XD で使用できるすべてのショートカットキー

Adobe XDのショートカットキー一覧です。
印刷用ショートカットキーをダウンロードから、英語版でしたが、
分かりやすい表でダウンロードすることが可能です。

https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html

Visual Studio Code キーボードショートカット一覧（Windows）

（Windows版の）Visual Studio Codeのショートカット一覧を日本語訳でまとめてくれています。
ありがたい！！

Visual Studio Code キーボードショートカット一覧（チートシート） – Qiita

https://qiita.com/aoi70/items/d61d5cf9030ac3ce55f0

本家Key Bindings for Visual Studio Codehttps://code.visualstudio.com/docs/getstarted/keybindingsKeyboard Shortcu…

Visual Studio Code キーボードショートカット一覧（Mac）

（Mac版の）Visual Studio Codeのショートカット一覧を日本語訳でまとめてくれています。

Visual Studio Code キーボードショートカット一覧（Mac版日本語チートシート） -…

https://qiita.com/kuu520/items/92b9f2bf0bfc1419708e

本家Key Bindings for Visual Studio Codehttps://code.visualstudio.com/docs/getstarted/keybindingsKeyboard Shortcu…

Figma shortcuts cheatsheet(英語)

英語ですが、Figmaのショートカット一覧表です。

Figma shortcuts cheatsheet – FigmaCrush.com

https://www.figmacrush.com/figma-shortcuts-cheatsheet/

Xinling Wang created this new useful freebie and shared it with the community. A free cheatsheet of keyboard shortcuts for

HTML関連のチートシート

HTML5 入れ子チートシート(日本語)

[HTML5 入れ子チートシート]はタグを親か子、どちらか選択すると、それぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを表示してくれます。
シンプルで見やすいです。

HTML5 入れ子チートシート | 吉川ウェブ

https://yoshikawaweb.com/element/

HTML5タグ★チートシート(日本語)

これぞ、チートシートのようなフォーマットの[HTML5タグ★チートシート]。
HTMLのタグの意味を一覧にしてくれています。

https://www.atmarkit.co.jp/fdotnet/chushin/cheatsheet_02/cheatsheet_02.pdf

The original copy & paste HTML cheat sheet(英語)

英語ですが、タグの意味と使い方まで説明してくれている、HTMLチートシート。
コピペでそのまま使用できるのも良いですね！

The original copy & paste HTML cheat sheet – Blog.Biz.Boss™

https://blogbizboss.com/easy-html/

HOW TO USE THIS EASY HTML CHEAT SHEET! H1) Find the HTML you’re after. 2) Highlight it with your mouse. 3) CTRL+V/Command+V will paste it into your blog post’s HTML editor, sidebar, newsletter or more. 4) Edit it to show what you need! (PS: Some of the HTML’s styled with a little inline CSS. Use Continue Reading…

HTMLの記号・特殊文字の文字コード表(日本語)

いちいち覚えてられない[HTMLの記号・特殊文字の文字コード表]。
Web制作の時もよく使うのでブックマーク必須。

HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照） | GRAYCODE H…

https://gray-code.com/html_css/list-of-symbols-and-special-characters/

HTMLで使用することのできる記号・特殊文字の文字コード一覧です。

BEM Naming Cheat Sheet by 9elements(英語)

BEM記法を理解する時に見る[BEM Naming Cheat Sheet]
量もそこまで多くないので、一通り目を通せばBEM記法を理解できます。

BEM Naming Cheat Sheet by 9elements

https://9elements.com/bem-cheat-sheet/

A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

Pug cheatsheet(英語)

[Pug cheatsheet]英語ですが、Google翻訳でタイトルだけ日本語にできるので見やすいです。
あまり細かくは載っていないので、ふと記法を忘れた時にサッと目を通すと目が覚めます。
細かい説明はありませんが、参照元として[pugのページ]に飛ぶリンクもつけてくれています。
ありがたい！

Pug cheatsheet

https://devhints.io/pug

The one-page guide to Pug: usage, examples, links, snippets, and more.

CSS関連のチートシート

Flexbox Cheat Site(日本語)

Flexboxのチートシートは他にもいろいろありますが、
[Flexbox Cheat Site]は、並び方のビジュアルが見やすい、ビジュアルクリックでコードが表示される、コードも一発コピー可能、なので実用性抜群です。

Flexbox Cheat Site

https://flexbox-cheat.site

CSS Flexbox | エンジニアとデザイナーの Web 制作を応援する CSS Flexbox チートシート（Flexbox Cheat Sheet）

CSSセレクタのチートシート(日本語)

[CSSセレクタのチートシート]ビジュアルが見やすく分かりやすい！
[::first-line]とか[:empty]とか知らなかった便利なセレクタを知ることができました。

CSSのセレクタチートシート

https://webliker.info/css-selector-cheat-sheet/

CSS GRID(英語)

IE11から解き放たれるのもあと少し。。
CSS Gridもこれからどんどん使っていきたいですね！
コードをワンクリックでコピーできるのもありがたいです。

GRID: A simple visual cheatsheet for CSS Grid Layout

https://grid.malven.co

Learn all about the properties available in CSS Grid Layout through simple visual examples.

sass cheatsheet(英語)

[sassチートシート]pugチートシートと同じサイトです。
もはや、このサイトをブックマークしとくことをオススメします。

Sass cheatsheet

https://devhints.io/sass

Variables · mixins · darken() · adjust-color() · @for @each @while @if @else · $list: (a b c) · $map: (a: b, c: d) · One-page guide to Sass

Stylus cheatsheet(英語)

[Stylusチートシート]。Stylusは、Scssより記述量が少なくなるので良いですよね。
ScssからStylusに乗り換える場合、[calc]とか少しクセありなので、[sprintf]に目を通しておくことをオススメします。

Stylus cheatsheet

https://devhints.io/stylus

The one-page guide to Stylus: usage, examples, links, snippets, and more.

Cheatsheet · Bootstrap v5.0(日本語)

[Bootstrap v5.0 Cheatsheet]です。スタイルガイドですね。
Bootstrapを使用するならブックマークです。

Cheatsheet · Bootstrap v5.0

https://getbootstrap.jp/docs/5.0/examples/cheatsheet/

Tailwind CHEAT SHEET(英語)

[Tailwind CSSのチートシート]CSSプロパティ名で見たことあるものが多いので、[w-0]とか細かい表記の確認に便利です。

Tailwind CSS Cheat Sheet

https://nerdcave.com/tailwind-cheat-sheet

Cheat sheet that provides a quick, interactive reference for all utility classes and CSS properties provided by Tailwind CSS, a utility-first CSS framework.

Javascript関連のチートシート

jQuery Quick API Reference(英語)

[jQuery Quick API Reference]チートシートというより、リフェレンスの目次ですね。
まだまだjQuery使うことばかりなので、詰まった時に便利。

jQuery Cheat Sheet

https://oscarotero.com/jquery/

jQuery cheat sheet in HTML with links to the original API documentation. Created by Oscar Otero

JavaScript イベントハンドラ(日本語)

[JavaScript イベントハンドラ一覧表]
シンプルにイベントハンドラーの[イベント名][発生タイミング]などまとめてくれているので
ふとした時に活用できます。

https://web-designer.cman.jp/javascript_ref/event_list/

Canvas cheatsheet(英語)

[Canvas cheatsheet]
お決まりの文法の確認に便利です。

Canvas cheatsheet

https://devhints.io/canvas

The one-page guide to Canvas: usage, examples, links, snippets, and more.

Webpack cheatsheet(英語)

[Webpack cheatsheet]
基本的な設定の確認に使えます。[npm install]も書いてくれています。

Webpack cheatsheet

https://devhints.io/webpack

One-page guide to Webpack: usage, examples, and more. This is a very basic “getting started with Webpack” guide for use with Webpack v3. This doesn’t cover all features, but it should get you started in understanding the config file format.

ECMAScript 6 compatibility table(英語)

[ECMAScript 6の対応表]
[Can I Use]のほうが、知りたい内容を一発で検索できるので、最近はもっぱら[Can I Use]です。

ECMAScript 6 compatibility table

http://kangax.github.io/compat-table/es6/#test-class

その他便利なチートシート&ツール

GitHub Git チートシート – GitHub Cheatsheets(日本語)

[GitHub Git チートシート]
gitコマンドの一覧です。日本語で説明付きなのでざっと目を通しておくのに便利です。

GitHub Git チートシート

https://training.github.com/downloads/ja/github-git-cheat-sheet/

Emmet Cheat Sheet(英語)

[Emmet Cheat Sheet]Emmet記法と展開結果が一覧で見れるので、
Emmetを使い始めた方はブックマークです。PDFで印刷もできるので自分は最初、印刷して持っていました。

Cheat Sheet

https://docs.emmet.io/cheat-sheet/

VSコード用のemmetチートシート(日本語)

こちらも[Emmetのチートシート]
よく使う項目のみ、シンプルにまとめられているので、こちらもオススメ。

【チートシート付き】VSコードでよく使うemmetをまとめました

https://crestadesign.org/emmet/

コーディング学習をしていて「タイピングのミスが多い」「もっと早くコードを書きたい」と思うことはありませんか？今回は、コーディングをより早く正確にできるようになるemmet（エメット）という記法について紹介します。 emm …

Font Awesome Free’s Cheatsheet(英語)

[Font Awesome Free’s Cheatsheet]
Font Awesomeのコードは覚えてられないので、
使う場合は一覧表が必須ですね。

Font Awesome

https://fontawesome.com/v5/cheatsheet

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

テキストエディタで使える正規表現チートシート(日本語)

[正規表現のチートシート]や一覧表もいろいろあると思いますが、
ビジュアルが見やすいのでこちらをオススメ。

http://yoshikawaweb.com/w/wp-content/uploads/regex-cheat-sheet.pdf

CSSの長さ、大きさを表す単位/変換(日本語)

[長さ、大きさを表す単位/変換]の一覧表です。
実際のサンプルもついているので単位の理解に便利です。

https://web-designer.cman.jp/other/tani/

Web Developer Checklist(英語)

[Web Developer Checklist]チートシートというか、チェックリストです。
開発の際に忘れがちの項目をチェックリスト化してくれているのはありがたいですね。

Web Developer Checklist: Website Launch Checklist | Toptal®

https://www.toptal.com/developers/webdevchecklist

The ultimate checklist for all serious web developers building modern websites. Make sure your site follows web development best practices.

Human Interface Guidelines(英語)

[Human Interface Guidelines]
iPhoneやiPadの解像度の確認に使えるリストがあります。
その他にもSafe areaなどのガイドラインが載っているので見ると楽しいです。

Adaptivity and Layout – Visual Design – iOS – Human Interface Guidelines – Ap…

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Learn about designing apps for iOS.

マークダウン記法(日本語)

[マークダウン記法のチートシート]
サッと目を通すと理解できるので、マークダウンでブログを書く時とか思い出したい時に便利ですね。

Webチートシート for エンジニア

https://web-cheatsheet.com/markdown

チートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容は多岐に渡ります。印刷してお手元に置いたり、ブックマークしてすぐに見られるようにしておくと便利です。

Markdown記法チートシート(日本語)

[Markdown記法チートシート]
こちらもMarkdown記法のチートシートです。
説明付きなのでありがたい！

Markdown記法チートシート

https://gist.github.com/mignonstyle/083c9e1651d7734f84c99b8cf49d57fa

Markdown記法チートシート. GitHub Gist: instantly share code, notes, and snippets.

Can I use…(英語)

もはやチートシートではないですが、
[Can I use]は、JavascriptやCSSのブラウザ対応を一発で確認できるので
便利というか必須です。

Can I use… Support tables for HTML5, CSS3, etc

https://caniuse.com

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Browser Market Share Worldwide(英語)

[Browser Market Share Worldwide]
ブラウザのシェア率はもちろんのこと、screenサイズのシェア率やOSのシェア率も確認できます。
対応範囲ブラウザを決めたり、説明する時のデータに便利ですね。

Browser Market Share Worldwide | StatCounter Global Stats

https://gs.statcounter.com/browser-market-share

This graph shows the market share of browsers worldwide based on over 10 billion monthly page views.

最後に

今回は、【Web制作に役立つ！】チートシート(ショートカット)をまとめてみました。
何か新しいツールを使う時など、チートシートをブックマークや印刷しておくと、
サッと見れるので便利ですね。