Web制作で分からないことはすぐに確認!HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
Post on:2015年9月18日
HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。
PDFや画像をダウンロードしたり、ブックマークしておいて、すぐに確認できるようにしておくと便利ですね。
![HTML5 Mega Cheat Sheet](http://coliss.com/wp-content/uploads-201502/2015091710.png)
- HTML5のチートシート
- CSS3, Flexbox, CSS3 Animationのチートシート
- jQueryのチートシート
- Bootstrapなどのフレームワーク
- WordPressなどのCMS
- エディタ関連のチートシート
HTML5のチートシート
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091711-01.png)
HTML5のタグ、ブラウザのサポート状況、Canvasなどが一枚にまとめられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-01.png)
HTMLの用語をインタラクティブに学ぶことができます。
CSS3, Flexbox, CSS3 Animationのチートシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-02.png)
CSS3のプロパティ、セレクタ、疑似クラスなどがまとめられたチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-03.png)
A Visual Guide to CSS3 Flexbox Properties
翻訳版: CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-04.png)
最近はアニメーションを実装するのはCSSがスタンダードになってきました。Easingの各アニメーションをCSSでどのように実装すればよいのかが分かります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-05.png)
Animate.css
使い方: classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるスタイルシート。CSS3アニメーションを使った多くのスクリプトに利用されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-06.png)
CSSの用語をインタラクティブに学ぶことができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-07.png)
CSS, HTML, SVGなど、各ブラウザのサポート状況やバグが分かります。
jQueryのチートシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-08.png)
jQuery 1.10, 2.0対応、セレクタやイベントなどのAPIがまとめられたチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-09.png)
こちらも同様にjQueryのAPIがまとめられたチートシート。
Bootstrapなどのフレームワーク
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-10.png)
Bootstrap 3で使われている全てのclass、スクリーンサイズの定義、グリッドのビヘイビアがまとめられたチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-11.png)
Bootstrap 3にも採用されているFont Awesomeのアイコンのチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-12.png)
CSSベースのフレームワーク「Foundation」のチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-13.png)
フロントエンド用の各フレームワークの基本機能を比較できます。
WordPressなどのCMS
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-14.png)
WordPress theme development Cheat Sheet
WordPressのテーマ作成に役立つ情報がまとめられたチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-15.png)
The Time Saving Copy/Paste WordPress Cheat Sheet
WodrPressの便利なコードをコピペで利用できる時短用チートシート。
エディタ関連のチートシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-16.png)
Sublime Text Keyboard Shortcuts
Sublime Textのキーボードショートカットをまとめたチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-17.png)
マークアップが楽になるEmmetのコマンドをまとめたチートシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015091712-18.png)
Chromeのデベロッパーツールのショートカットをまとめたチートシート。
sponsors