Web制作者(フロントエンド・マークアップエンジニア向け)がブックマークしておきたい、便利なチートシートやリソースのまとめ

Web制作者(フロントエンド・マークアップエンジニア向け)がブックマークしておきたい、便利なチートシートやリソースのまとめ

普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。
主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。

普段から多用している言語はもちろん、頻繁に調べてるとかまだまだ勉強しつつ使っているというものがあれば、それに関するチートシートをブックマークしておくことで不明点が出る度に検索する手間も省けて制作時間の短縮にも繋がると思います。
また、基本的にはWeb上で確認するものになっていますが、中にはわかりやすく1枚のイメージでまとめられていたりPDF形式で用意されているものもあるので、それらを印刷して手元に置いておくという使い方もできます。

DevDocs API Documentation

DevDocs API Documentation

様々なプラグラミング言語・ライブラリ・ツールのドキュメントなどを検索することできます。
よく利用されているものはひと通り揃っている印象で、ページ左にあるリストを自分好みにカスタマイズすることもできます。

HTML Reference

HTML Reference

各種HTML要素について確認できるリファレンスで、それぞれの用途や指定できる属性などについても細かくまとめられており、詳細ページでは実際にそのタグを使用したサンプルコードも掲載されています。
また、特定の要素を探す場合にも便利なつくりになっており、タグ名で検索できる他、meta要素なのかブロック要素なのかといったようなタイプで絞り込んだりも可能です。

Interactive HTML Cheat Sheet

Interactive HTML Cheat Sheet

こちらもサンプルコード付きでそれぞれのタグについて説明されているHTMLのチートシートで、ページをほぼそのままPDF化したものも配布されています。
スクロールしていけばわかりますが、タグの一覧表示が少し変わっています。

CSS Reference

CSS Reference

こちらは「HTML Reference」と同じ方が作成したCSSのリファレンスで、同じく詳細ページで各種プロパティの説明だけでなく実際に使用したサンプルなども掲載されています。
また、同じく検索もできるようになっている他、「Animations」や「Backgrounds」といった大まかなカテゴリー分けもされているので、タグ名が曖昧または不明な場合もそちらを利用することで探すことができると思います。
ちなみに、Flexboxについては掲載されていますが、現時点ではまだCSS Grid Layoutは掲載されていないので、CSS Grid Layoutについては他のサイトで確認する必要があります。

CSS Reference

CSS Reference

ハイクオリティなデモやチュートリアルを多数紹介している「Codrops」で公開されているCSSリファレンスで、こちらもサンプルなどが掲載されている点では同じですが、上で紹介した「CSS Reference」よりも詳しく説明されており、ブラウザサポートなどの情報もあります。
こちらについてはFlexboxについてはもちろん、CSS Grid Layoutについても掲載されています。

A Visual Guide to CSS3 Flexbox Properties

A Visual Guide to CSS3 Flexbox Properties

わかりやすいビジュアル付きでFlexboxについて解説されているエントリーで、ページ下部には様々な指定を実際に試すことができるツールもあります。

Flexbox Cheatsheet

Flexbox Cheatsheet

Flexboxのチートシートで、それぞれプロパティを選択すると見栄えが変わり、目的の見栄えがあればその横に表示されているコードを使用するという使い方ができます。

Flexbox Cheatsheet Cheatsheet

Flexbox Cheatsheet Cheatsheet

同じくFlexboxのチートシートで、こちらはYES・NO診断のような形で目的の見栄えにするのにどのようなプロパティを指定するかがわかるようになっています。

ちなみに、日本語のFlexboxについてのチートシートがほしい場合は「Webクリエイターボックス」さんの「日本語対応!CSS Flexboxのチートシートを作ったので配布します」というエントリーで確認でき、ニュースレターの登録をすればPDF版のチートシートがダウンロードできるようになっています。
また、Flexboxのプロパティ名がわかるだけでいいというぐらいであれば「FlexBox cheatsheet」がシンプルなチートシートになっていて、クリックでコピーすることができるようになっています。

A Complete Guide to Grid

A Complete Guide to Grid

こちらはCSS Grid Layoutについて解説されているもので、今後より簡潔で分かりやすいチートシートなど出てきそうですが、現時点でCSS Gridについてひと通り理解しやすいエントリーです。

GRID

GRID

同じくCSS Grid Layout関連で、こちらはシンプルなビジュアルガイドになっており、それぞれクリックでプロパティをコピーできるようになっています。

CSS Selectors Cheatsheet

CSS Selectors Cheatsheet

隣接・属性・擬似クラスなど、CSSのセレクタに関するチートシートです。

Can I use

Can I use

各ブラウザのHTMLやCSSのサポート状況を確認することができます。

Screen Sizes

Screen Sizes

様々なデバイスのスクリーンサイズ・アスペクト比・OS情報などが一覧化されており、デバイスでフィルターをかけたり、数値のソート機能なども用意されています。

Browserhacks

Browserhacks

各ブラウザで使用できるCSSやJavaScriptのハックがまとめられています。

Browser Bug Searcher

Browser Bug Searcher

こちらは各ブラウザのバグを検索することできる検索エンジンで、キーワードで検索するのに加え、対象のブラウザを絞り込むこともできます。

Easing Function 早見表

Easing Function 早見表

イージングの動きが一覧化されているもので、詳細でアニメーション名だけでなくCSSのcubic-bezier()での指定値確認などもできます。

Bootstrap 4 Cheat Sheet

Bootstrap 4 Cheat Sheet

Bootstrapの最新版であるv4のチートシートです。
各項目を選択すれば使用するHTMLやクラスなどが表示され、それらをワンクリックでコピーすることができる他、実際の表示プレビューも確認することができます。

Bootstrap 4 CSS Classes List with Descriptions

Bootstrap 4 CSS Classes List with Descriptions

同じくBootstrap v4のチートシートで、こちらもプレビュー機能付きで一覧化されています。

CSS Front-end Frameworks with comparison

CSS Front-end Frameworks with comparison

BootstrapやFoundationをはじめとした有名CSSフレームワークの情報が一覧化されており、対応ブラウザ・CSSメタ言語・対応デバイス・ライセンスなどがひと目で確認できるようになっています。

<head> Cheat Sheet

<head> Cheat Sheet

metalinkなど、<head>内に記述するものがひと通りまとめられており、簡易的ではありますがどういう意図で記述するかや非推奨になった記述なども併せて掲載されています。

Sass Guidelines

Sass Guidelines

Sassの概要や機能などについてまとめられたガイドラインで、簡単なサンプルコードもあります。

SASS::Script Cheat Sheet

SASS::Script Cheat Sheet

Sassのチートシートです。

Stylus cheatsheet

Stylus cheatsheet

Stylusのチートシートです。
ちなみに、すべて内容が充実しているというわけではないのですが、こちらを公開している方は他にも「Sass」「ES2015」「React.js」「Vue.js」のように様々なチートシートを公開しています。

Font Awesome Cheatsheet

Font Awesome Cheatsheet

Font Awesomeのアイコンがデザイン・クラス名・ユニコード名付きで一覧化されており、どのバージョンから追加されているかの記載もあります。

Wordpress Theme Development Cheatsheet

Wordpress Theme Development Cheatsheet

WordPressのテーマ作成時に使えるチートシートです。
style.cssの先頭に記述するコメントをはじめ、ループやカスタム投稿作成時のベースとして使えるコードなどもあります。

Default WordPress Generated CSS Cheat Sheet for Beginners

Default WordPress Generated CSS Cheat Sheet for Beginners

WordPressでデフォルトで出力したり設定されているidやclassがまとめられているエントリーです。(ただ、少し前のものなので現在もこれらが使用されているか確証はないです...)

Template Hierarchy(WordPress)

Template Hierarchy(WordPress)

WordPressのテンプレート階層についてまとめられており、どのような順序で呼び出されるかをわかりやすくしたイメージも用意されています。

Javascript Cheat Sheet

Javascript Cheat Sheet

ちょっと重いのがあれですが、JavaScriptのチートシートです。

ES2015 [ES6] cheatsheet

ES2015 [ES6] cheatsheet

ES2015 (ES6)のヒントやコードスニペットがまとめられています。

jQuery Cheat Sheet

jQuery Cheat Sheet

jQueryのチートシートで、セレクタの指定方法から各メソッドまでひと通り用意されています。
ページ上部ではキーワードで絞り込むことができる他、その横にあるセレクタで対象バージョンを選択することもできます。

Cheat Sheet(Angular.js)

Cheat Sheet(Angular.js)

Angular.jsのチートシートです。

React Cheat Sheet

React Cheat Sheet

React.jsのチートシートで、フィルター名で絞り込むなどもできます。

Vue.js 2.3 Complete API Cheat Sheet

Vue.js 2.3 Complete API Cheat Sheet

Vue.jsのチートシートで、日本語版日本語版も公開されています。

PHP Cheat Sheet

PHP Cheat Sheet

上で紹介した「Javascript Cheat Sheet」と同様で重いのが欠点ですが、PHPのチートシートです。
ちなみに、このサイトでは「OverAPI.com | Collecting all the cheat sheets」にあるように、他にも沢山のチートシートがあります。

PHP7 Reference

PHP7 Reference

PHP 7での変更点や新機能などがまとめられており、「PHP 7.1 Reference」もあります。

Markdown Here Cheatsheet

Markdown Here Cheatsheet

README.mdなどで使用することが多いマークダウン記法のチートシートです。

Regular Expressions Cheat Sheet

Regular Expressions Cheat Sheet

正規表現のチートシートです。

Git cheat sheet

Git cheat sheet

Gitコマンドがまとめられたチートシートです。
配布先はエントリーになっており、単にチートシートが紹介されているだけでなく、使用例なども併せて紹介されています。

Emmet Cheat Sheet

Emmet Cheat Sheet

最後は爆速コーディングする際に非常に便利なEmmetのチートシートです。
Emmetを使うことでHTMLやCSSを少ない記述で書くことができ、使いこなすことができればコーディングの時間をかなり短縮することができます。

Close the search window,
please press close button or esc key.