Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
Post on:2015年9月18日
sponsors
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
