普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。
普段から多用している言語はもちろん、頻繁に調べてるとかまだまだ勉強しつつ使っているというものがあれば、それに関するチートシートをブックマークしておくことで不明点が出る度に検索する手間も省けて制作時間の短縮にも繋がると思います。
また、基本的にはWeb上で確認するものになっていますが、中にはわかりやすく1枚のイメージでまとめられていたりPDF形式で用意されているものもあるので、それらを印刷して手元に置いておくという使い方もできます。
DevDocs API Documentation
様々なプラグラミング言語・ライブラリ・ツールのドキュメントなどを検索することできます。
よく利用されているものはひと通り揃っている印象で、ページ左にあるリストを自分好みにカスタマイズすることもできます。
HTML Reference
各種HTML要素について確認できるリファレンスで、それぞれの用途や指定できる属性などについても細かくまとめられており、詳細ページでは実際にそのタグを使用したサンプルコードも掲載されています。
また、特定の要素を探す場合にも便利なつくりになっており、タグ名で検索できる他、meta要素なのかブロック要素なのかといったようなタイプで絞り込んだりも可能です。
Interactive HTML Cheat Sheet
こちらもサンプルコード付きでそれぞれのタグについて説明されているHTMLのチートシートで、ページをほぼそのままPDF化したものも配布されています。
スクロールしていけばわかりますが、タグの一覧表示が少し変わっています。
CSS Reference
こちらは「HTML Reference」と同じ方が作成したCSSのリファレンスで、同じく詳細ページで各種プロパティの説明だけでなく実際に使用したサンプルなども掲載されています。
また、同じく検索もできるようになっている他、「Animations」や「Backgrounds」といった大まかなカテゴリー分けもされているので、タグ名が曖昧または不明な場合もそちらを利用することで探すことができると思います。
ちなみに、Flexboxについては掲載されていますが、現時点ではまだCSS Grid Layoutは掲載されていないので、CSS Grid Layoutについては他のサイトで確認する必要があります。
CSS Reference
ハイクオリティなデモやチュートリアルを多数紹介している「Codrops」で公開されているCSSリファレンスです。
こちらもサンプルなどが掲載されている点では同じですが、上で紹介した「CSS Reference」よりも詳しく説明されており、ブラウザサポートなどの情報もあります。
こちらについてはfFlexboxについてはもちろん、CSS Grid Layoutについても掲載されています。
A Visual Guide to CSS3 Flexbox Properties
わかりやすいビジュアル付きでFlexboxについて解説されているエントリーで、ページ下部には様々な指定を実際に試すことができるツールもあります。
Flexbox Cheatsheet
Flexboxのチートシートで、それぞれプロパティを選択すると見栄えが変わり、目的の見栄えがあればその横に表示されているコードを使用するという使い方ができます。
Flexbox Cheatsheet Cheatsheet
同じくFlexboxのチートシートで、こちらはYES・NO診断のような形で目的の見栄えにするのにどのようなプロパティを指定するかがわかるようになっています。
ちなみに、日本語で確認したい場合は「Webクリエイターボックス」さんの「日本語対応！CSS Flexboxのチートシートを作ったので配布します」というエントリーで確認でき、ニュースレターの登録をすればPDF版のチートシートがダウンロードできるようになっています。
また、Flexboxのプロパティ名がわかるだけでいいというぐらいであれば「FlexBox cheatsheet」がシンプルなチートシートになっていて、クリックでコピーすることができるようになっています。
A Complete Guide to Grid
こちらはCSS Grid Layoutについて解説されているもので、今後より簡潔で分かりやすいチートシートなど出てきそうですが、現時点でCSS Gridについてひと通り理解しやすいエントリーです。
GRID
同じくCSS Grid Layout関連で、こちらはシンプルなビジュアルガイドになっており、それぞれクリックでプロパティをコピーできるようになっています。
CSS Selectors Cheatsheet
隣接・属性・擬似クラスなど、CSSのセレクタに関するチートシートです。
Can I use
各ブラウザのHTMLやCSSのサポート状況を確認することができます。
Screen Sizes
様々なデバイスのスクリーンサイズ・アスペクト比・OS情報などが一覧化されており、デバイスでフィルターをかけたり、数値のソート機能なども用意されています。
Browserhacks
各ブラウザで使用できるCSSやJavaScriptのハックがまとめられています。
Browser Bug Searcher
こちらは各ブラウザのバグを検索することできる検索エンジンで、キーワードで検索するのに加え、対象のブラウザを絞り込むこともできます。
Easing Function 早見表
イージングの動きが一覧化されているもので、詳細でアニメーション名だけでなくCSSのcubic-bezier()での指定値確認などもできます。
Bootstrap 4 Cheat Sheet
Bootstrapの最新版であるv4のチートシートです。
各項目を選択すれば使用するHTMLやクラスなどが表示され、それらをワンクリックでコピーすることができる他、実際の表示プレビューも確認することができます。
Bootstrap 4 CSS Classes List with Descriptions
同じくBootstrap v4のチートシートで、こちらもプレビュー機能付きで一覧化されています。
CSS Front-end Frameworks with comparison
BootstrapやFoundationをはじめとした有名CSSフレームワークの情報が一覧化されており、対応ブラウザ・CSSメタ言語・対応デバイス・ライセンスなどがひと目で確認できるようになっています。
<head> Cheat Sheet
metaやlinkなど、<head>内に記述するものがひと通りまとめられており、簡易的ではありますがどういう意図で記述するかや非推奨になった記述なども併せて掲載されています。
Sass Guidelines
Sassの概要や機能などについてまとめられたガイドラインで、簡単なサンプルコードもあります。
SASS::Script Cheat Sheet
Sassのチートシートです。
Font Awesome Cheatsheet
Font Awesomeのアイコンがデザイン・クラス名・ユニコード名付きで一覧化されており、どのバージョンから追加されているかの記載もあります。
WordPress Theme Development Cheatsheet
WordPressのテーマ作成時に使えるチートシートです。style.cssの先頭に記述するコメントをはじめ、ループやカスタム投稿作成時のベースとして使えるコードなどもあります。
Default WordPress Generated CSS Cheat Sheet for Beginners
WordPressでデフォルトで出力したり設定されているidやclassがまとめられているエントリーです。（ただ、少し前のものなので現在もこれらが使用されているか確証はないです…）
Template Hierarchy（WordPress）
WordPressのテンプレート階層についてまとめられており、どのような順序で呼び出されるかをわかりやすくしたイメージも用意されています。
Javascript Cheat Sheet
ちょっと重いのがあれですが、JavaScriptのチートシートです。
ES2015 [ES6] cheatsheet
ES2015 （ES6）のヒントやコードスニペットがまとめられています。
jQuery Cheat Sheet
jQueryのチートシートで、セレクタの指定方法から各メソッドまでひと通り用意されています。
ページ上部ではキーワードで絞り込むことができる他、その横にあるセレクタで対象バージョンを選択することもできます。
Cheat Sheet（Angular.js）
Angular.jsのチートシートです。
React Cheat Sheet
React.jsのチートシートで、フィルター名で絞り込むなどもできます。
Vue.js 2.3 Complete API Cheat Sheet
Vue.jsのチートシートで、日本語版日本語版も公開されています。
PHP Cheat Sheet
上で紹介した「Javascript Cheat Sheet」と同様で重いのが欠点ですが、PHPのチートシートです。
ちなみに、このサイトでは「OverAPI.com | Collecting all the cheat sheets」にあるように、他にも沢山のチートシートがあります。
PHP7 Reference
PHP 7での変更点や新機能などがまとめられており、「PHP 7.1 Reference」もあります。
Markdown Here Cheatsheet
README.mdなどで使用することが多いマークダウン記法のチートシートです。
Regular Expressions Cheat Sheet
正規表現のチートシートです。
Git cheat sheet
Gitコマンドがまとめられたチートシートです。
配布先はエントリーになっており、単にチートシートが紹介されているだけでなく、使用例なども併せて紹介されています。
Emmet Cheat Sheet
最後は爆速コーディングする際に非常に便利なEmmetのチートシートです。
Emmetを使うことでHTMLやCSSを少ない記述で書くことができ、使いこなすことができればコーディングの時間をかなり短縮することができます。