HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。
チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。
HTML
HTML5 Cheat Sheet
HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。
The HTML 5 Mega Cheat Sheet
こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタグ、Canvas など HTML5 に関するあらゆる情報がまとめられています。
HTML5 Canvas Cheat Sheet
HTML5 の Canvas のアトリビュートやメソッドついてまとめられているチートシートです。
Web Code Tools
フォームで情報を入力し様々なコードを生成できるジェネレータ。HTML5、CSS3、Microdata、Metaタグ、Facebook OGP、Twitter カードに対応しており、実用的なWebサイトを制作する上で非常に役立ちます。
CSS
2016 CSS Cheat Sheet Infographic
CSS のセレクタやプロパティがまとめられているチートシートです。非常に簡潔にまとめられており、CSS を覚えるのに役立ちそうです。
The CSS3 Mega Cheat Sheet
CSS に関するあらゆる情報がまとめらているチートシートです。セレクタ名やプロパティ名が思い出せないときに重宝しそうです。
CSS 3, Media Queries Cheat Sheet
CSS3 のメディアクエリのチートシートです。タブレットやスマホなどのレスポンシブ対応を行うときに便利です。メディアクエリの雛型として使えそうです。
CSS3 Animation Cheat Sheet
CSS3 を使用したアニメーションのチートシートです。デモサイトのサンプルアニメーションのコードはサイト内に置いてある css ファイルにすべて記述してあるので、そのままコピペして使用できます。
HTML AND CSS CHEAT SHEET
HTML と CSS の基本的な記述方法がまとめられているチートシートです。特に Web デザイン初心者の方におすすめです。パステル調で印刷して貼りたくなるようなかわいいデザインです。
Flexbox Patterns
CSS の flexbox を使用した UI パターン集です。コードのサンプルがいくつかまとめられているので、そのままコピペで使用できます。
SASS Cheat Sheet
SASS のチートシートです。Sass の記法で記述したコードとそれに対応する CSS のコードが並べて表示されています。
JavaScript
Javascript Cheat Sheet
JavaScript に関するドキュメントやプロパティ、メソッドなどがまとめられているチートシートです。各要素をクリックすると JavaScript のドキュメントを確認することができます。
jQuery Cheat Sheet
jQuery の API をまとめたリファレンスです。様々なフィルタやメソッドが掲載されており、各要素をクリックすると jQuery のドキュメントを見ることができます。jQuery 3.0 にも対応しています。
JavaScript Regex Cheatsheet
JavaScript の正規表現パターンをまとめたものです。コンパクトにまとめられているので、目的の正規表現を探しやすいです。
React.js cheatsheet
React.js のチートシートです。
Bootstrap
Bootstrap 3 - Cheat Sheet
Bootstrap 3のチートシートです。Bootstrap のクラス名一覧やそれぞれのスクリーン幅でのグリッドの情報がまとめられています。
Bootstrap 4 Cheat Sheet
Bootstrap 4のチートシートです。各要素をクリックするとコードスニペットとデザインのプレビューが表示されるので、それを確認しつつコードをコピペして使用することができます。
BOOTSTRAP GLYPHICONS
Bootstrap のアイコンのチートシートです。Bootstrap は標準で span タグで icon を表示できる機能があります。コピーボタンがあるので簡単にコードをコピペして使うことができます。
WordPress
Copy/Paste WordPress Cheatsheet
WordPress でよく使う関数やテンプレートファイルがまとめられています。WordPress でコーディングをする際に PHP のコードも扱うという方におすすめです。
日本語版 WordPress チートシート
こちらも WordPress のテンプレートファイルやよく使われる関数がまとめられたチートシートです。記事表示のループやナビゲーションメニューの表示のコード例もあり、非常に便利です。こちらは日本語で書かれているので、英語が苦手な方におすすめです。
ツール
Chrome Devtools Cheatsheet
Chrome のデベロッパーツールのショートカットキーがまとめられたチートシートです。Windows、Linux、Mac に対応しています。
Git Cheat Sheet
Git のコマンドのチートシートです。コマンド毎に簡単な説明が記述されているので、使うときに非常に便利です。Webサイトのコードを Git でバージョン管理している方におすすめです。
まとめ
今回は Web 制作で役立つチートシートとサービスを紹介しました。ブックマークしてコピペして使ったり、印刷してデスクや壁に貼ったりして活用してみてください。
