Web制作で分からないことはすぐに確認!HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ

HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。

PDFや画像をダウンロードしたり、ブックマークしておいて、すぐに確認できるようにしておくと便利ですね。

HTML5 Mega Cheat Sheet

HTML5のチートシート

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

HTML5 Mega Cheat Sheet

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

サイトのキャプチャ

HTML Vocabulary

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

CSS3, Flexbox, CSS3 Animationのチートシート

サイトのキャプチャ

CSS Cheat Sheet

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

サイトのキャプチャ

A Visual Guide to CSS3 Flexbox Properties
翻訳版: CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

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

サイトのキャプチャ

Easing function

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

サイトのキャプチャ

Animate.css
使い方: classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート

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

サイトのキャプチャ

CSS Vocabulary

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

サイトのキャプチャ

Can I use?

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

jQueryのチートシート

サイトのキャプチャ

jQuery Quick API Reference

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

サイトのキャプチャ

jQuery Cheat Sheet

こちらも同様にjQueryのAPIがまとめられたチートシート。

Bootstrapなどのフレームワーク

サイトのキャプチャ

Bootstrap 3 Cheat Sheet

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

サイトのキャプチャ

Font Awesome Cheat Sheet

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

サイトのキャプチャ

Foundation 5 Cheat Sheet

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

サイトのキャプチャ

CSS Front-end Frameworks

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

WordPressなどのCMS

サイトのキャプチャ

WordPress theme development Cheat Sheet

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

サイトのキャプチャ

The Time Saving Copy/Paste WordPress Cheat Sheet

WodrPressの便利なコードをコピペで利用できる時短用チートシート。

エディタ関連のチートシート

サイトのキャプチャ

Sublime Text Keyboard Shortcuts

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

サイトのキャプチャ

Emmet Cheat Sheet

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

サイトのキャプチャ

Chrome Devtools Cheat Sheet

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

sponsors

top of page

©2018 coliss