Web制作の実装や勉強に役立つ便利なチートシートのまとめ

あれ何だっけ? という時にさっと分かるWeb制作の実装や勉強に役立つチートシートがあると便利です。

BootstrapのさまざまなUIエレメントの実装、FlexboxでUIコンポーネントを実装、CSSの各ブラウザのサポート状況、Gitのコマンド、React.jsやAngular.jsなどのチートシートを紹介します。
必要なものは全部、ダウンロード・ブックマークしておきたいですね。

Web制作者必携の便利なチートシートのまとめ

まずは、Bootstrapの最新版に対応したチートシートから。

チートシートのキャプチャ

Bootstrap 4 Cheat Sheet

2016年4月現在最新のBootstrap v4.0.0-alpha.2に対応したチートシート。さまざまなUIエレメントを実装するコードとデモを見ることができます。

チートシートのキャプチャ

CSS Front-end Frameworks by Comparison

フロントエンド用の各フレームワークの対応ブラウザ・Sass対応、ライセンスなどの比較一覧。

チートシートのキャプチャ

CSS3 Flexbox Properties
和訳: CSS3 Flexbox の各プロパティの使い方

Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」。

チートシートのキャプチャ

Flexbox Patterns
和訳: よく使うUI要素をFlexboxを使ってシンプルに簡単に実装

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装する方法をまとめたもの。

チートシートのキャプチャ

Can I Use...

CSS, HTML, SVG, JS APIなど、各ブラウザのサポート状況やバグが分かります。

チートシートのキャプチャ

jQuery Cheat Sheet
jQuery 1.10, 2.0対応、セレクタやイベントなどのAPIがまとめられたチートシート。

チートシートのキャプチャ

React Cheat Sheet

React.jsのチートシート。

チートシートのキャプチャ

Angular Cheat Sheet

Angular.jsのチートシート。

チートシートのキャプチャ

Docker Commands and Best Practices Cheat Sheet

Dockerのコマンドと実践的な使い方のチートシート。

チートシートのキャプチャ

Java Collections Cheat Sheet

JAVAのコレクションクラスのそれぞれの特徴をまとめたチートシート。

チートシートのキャプチャ

Java 8 Streams cheat sheet

JAVA8 Stream APIのチートシート。

チートシートのキャプチャ

Java 8 Best Practices Cheat Sheet

JAVA8の実践的な使い方のチートシート。

チートシートのキャプチャ

Default WordPress Generated CSS Cheat Sheet

WordPressのデフォルトで使用しているclassのチートシート。

チートシートのキャプチャ

WordPress Template Hierarchy

WordPressのテンプレートの構成のまとめ。

チートシートのキャプチャ

Vim Cheat Sheet

Vimのコマンドのチートシート。

チートシートのキャプチャ

Emmet Cheat Sheet

マークアップが楽になるEmmetのコマンドをまとめたチートシート。

チートシートのキャプチャ

Regular Expressions Cheat Sheet

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

チートシートのキャプチャ

Google Analytics Regular Expressions Cheat Sheet

Goole Analyticsの正規表現のチートシート。

チートシートのキャプチャ

Git Commands and Best Practices Cheat Sheet

Gitのコマンドと実践的な使い方のチートシート。

チートシートのキャプチャ

Chrome Devtools Cheatsheet

Chromeのデベロッパーツールのショートカットやコマンドをまとめたチートシート。