Web制作で分からないことはすぐに確認!HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
Post on:2015年9月18日
HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。
PDFや画像をダウンロードしたり、ブックマークしておいて、すぐに確認できるようにしておくと便利ですね。

- HTML5のチートシート
- CSS3, Flexbox, CSS3 Animationのチートシート
- jQueryのチートシート
- Bootstrapなどのフレームワーク
- WordPressなどのCMS
- エディタ関連のチートシート
HTML5のチートシート

HTML5のタグ、ブラウザのサポート状況、Canvasなどが一枚にまとめられています。

HTMLの用語をインタラクティブに学ぶことができます。
CSS3, Flexbox, CSS3 Animationのチートシート

CSS3のプロパティ、セレクタ、疑似クラスなどがまとめられたチートシート。

A Visual Guide to CSS3 Flexbox Properties
翻訳版: CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」。

最近はアニメーションを実装するのはCSSがスタンダードになってきました。Easingの各アニメーションをCSSでどのように実装すればよいのかが分かります。

Animate.css
使い方: classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるスタイルシート。CSS3アニメーションを使った多くのスクリプトに利用されています。

CSSの用語をインタラクティブに学ぶことができます。

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

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

こちらも同様にjQueryのAPIがまとめられたチートシート。
Bootstrapなどのフレームワーク

Bootstrap 3で使われている全てのclass、スクリーンサイズの定義、グリッドのビヘイビアがまとめられたチートシート。

Bootstrap 3にも採用されているFont Awesomeのアイコンのチートシート。

CSSベースのフレームワーク「Foundation」のチートシート。

フロントエンド用の各フレームワークの基本機能を比較できます。
WordPressなどのCMS

WordPress theme development Cheat Sheet
WordPressのテーマ作成に役立つ情報がまとめられたチートシート。

The Time Saving Copy/Paste WordPress Cheat Sheet
WodrPressの便利なコードをコピペで利用できる時短用チートシート。
エディタ関連のチートシート

Sublime Text Keyboard Shortcuts
Sublime Textのキーボードショートカットをまとめたチートシート。

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

Chromeのデベロッパーツールのショートカットをまとめたチートシート。
sponsors