普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。
主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思う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」よりも詳しく説明されており、ブラウザサポートなどの情報もあります。
    こちらについてはFlexboxについてはもちろん、CSS Grid Layoutについても掲載されています。
  • A Visual Guide to CSS3 Flexbox Properties
    わかりやすいビジュアル付きでFlexboxについて解説されているエントリーで、ページ下部には様々な指定を実際に試すことができるツールもあります。
  • Flexbox Cheatsheet
    Flexboxのチートシートで、それぞれプロパティを選択すると見栄えが変わり、目的の見栄えがあればその横に表示されているコードを使用するという使い方ができます。
  • Flexbox Cheatsheet Cheatsheet
    同じくFlexboxのチートシートで、こちらはYES・NO診断のような形で目的の見栄えにするのにどのようなプロパティを指定するかがわかるようになっています。

    ちなみに、日本語のFlexboxについてのチートシートがほしい場合は「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の最新版であるVer 4のチートシートです。
    各項目を選択すれば使用するHTMLやクラスなどが表示され、それらをワンクリックでコピーすることができる他、実際の表示プレビューも確認することができます。
  • Bootstrap 4 CSS Classes List with Descriptions
    同じくBootstrap Ver 4のチートシートで、こちらもプレビュー機能付きで一覧化されています。
  • CSS Front-end Frameworks with comparison
    BootstrapやFoundationをはじめとした有名CSSフレームワークの情報が一覧化されており、対応ブラウザ・CSSメタ言語・対応デバイス・ライセンスなどがひと目で確認できるようになっています。
  • <head> Cheat Sheet
    metalinkなど、<head>内に記述するものがひと通りまとめられており、簡易的ではありますがどういう意図で記述するかや非推奨になった記述なども併せて掲載されています。
  • Sass Guidelines
    Sassの概要や機能などについてまとめられたガイドラインで、簡単なサンプルコードもあります。
  • SASS::Script Cheat Sheet
    Sassのチートシートです。
  • Stylus cheatsheet
    Stylusのチートシートです。
    ちなみに、すべて内容が充実しているというわけではないのですが、こちらを公開している方は他にも「Sass」「ES2015」「React.js」「Vue.js」のように様々なチートシートを公開しています。
  • 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を少ない記述で書くことができ、使いこなすことができればコーディングの時間をかなり短縮することができます。