Web制作の作業効率を格段にアップさせる便利なチートシートまとめ

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。

チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。

HTML

HTML5 Cheat Sheet 

html5-cheat-sheet-1
ダウンロードページ


HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。

The HTML 5 Mega Cheat Sheet

the-html-5-mega-cheat-sheet
ダウンロードページ

こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタグ、Canvas など HTML5 に関するあらゆる情報がまとめられています。

HTML5 Canvas Cheat Sheet

html5-canvas
ダウンロードページ


HTML5 の Canvas のアトリビュートやメソッドついてまとめられているチートシートです。

Web Code Tools

webcodetools
ダウンロードページ

フォームで情報を入力し様々なコードを生成できるジェネレータ。HTML5、CSS3、Microdata、Metaタグ、Facebook OGP、Twitter カードに対応しており、実用的なWebサイトを制作する上で非常に役立ちます。

CSS

2016 CSS Cheat Sheet Infographic

2016-css-cheat-sheet
ダウンロードページ

CSS のセレクタやプロパティがまとめられているチートシートです。非常に簡潔にまとめられており、CSS を覚えるのに役立ちそうです。

The CSS3 Mega Cheat Sheet

css3-mega-cheat-sheet
ダウンロードページ

CSS に関するあらゆる情報がまとめらているチートシートです。セレクタ名やプロパティ名が思い出せないときに重宝しそうです。

CSS 3, Media Queries Cheat Sheet

css-3-media-queries-cheat-sheet
ダウンロードページ

CSS3 のメディアクエリのチートシートです。タブレットやスマホなどのレスポンシブ対応を行うときに便利です。メディアクエリの雛型として使えそうです。

CSS3 Animation Cheat Sheet

css3-animation-cheat-sheet
ダウンロードページ

CSS3 を使用したアニメーションのチートシートです。デモサイトのサンプルアニメーションのコードはサイト内に置いてある css ファイルにすべて記述してあるので、そのままコピペして使用できます。

HTML AND CSS CHEAT SHEET 

html-css-cheat-sheet-infographic
ダウンロードページ

HTML と CSS の基本的な記述方法がまとめられているチートシートです。特に Web デザイン初心者の方におすすめです。パステル調で印刷して貼りたくなるようなかわいいデザインです。

Flexbox Patterns

flexbox-patterns
ダウンロードページ

CSS の flexbox を使用した UI パターン集です。コードのサンプルがいくつかまとめられているので、そのままコピペで使用できます。

SASS Cheat Sheet

sass-cheat-sheet

ダウンロードページ

SASS のチートシートです。Sass の記法で記述したコードとそれに対応する CSS のコードが並べて表示されています。

JavaScript

Javascript Cheat Sheet

javascript-cheat-sheet
ダウンロードページ

JavaScript に関するドキュメントやプロパティ、メソッドなどがまとめられているチートシートです。各要素をクリックすると JavaScript のドキュメントを確認することができます。

jQuery Cheat Sheet

jquery-cheat-sheat
ダウンロードページ

jQuery の API をまとめたリファレンスです。様々なフィルタやメソッドが掲載されており、各要素をクリックすると jQuery のドキュメントを見ることができます。jQuery 3.0 にも対応しています。

JavaScript Regex Cheatsheet

javaScript-regex-cheat-sheet
ダウンロードページ

JavaScript の正規表現パターンをまとめたものです。コンパクトにまとめられているので、目的の正規表現を探しやすいです。

React.js cheatsheet

react-js-cheatsheet
ダウンロードページ

React.js のチートシートです。

Bootstrap

Bootstrap 3 - Cheat Sheet

bootstrap-3cheatsheet
ダウンロードページ

Bootstrap 3のチートシートです。Bootstrap のクラス名一覧やそれぞれのスクリーン幅でのグリッドの情報がまとめられています。

Bootstrap 4 Cheat Sheet

bootstrap-4-cheat-sheet
ダウンロードページ

Bootstrap 4のチートシートです。各要素をクリックするとコードスニペットとデザインのプレビューが表示されるので、それを確認しつつコードをコピペして使用することができます。

BOOTSTRAP GLYPHICONS

bootstrap-glyphicons
ダウンロードページ

Bootstrap のアイコンのチートシートです。Bootstrap は標準で span タグで icon を表示できる機能があります。コピーボタンがあるので簡単にコードをコピペして使うことができます。

WordPress

Copy/Paste WordPress Cheatsheet

the-time-saving-copy-paste-wordpress-cheat-sheet
ダウンロードページ

WordPress でよく使う関数やテンプレートファイルがまとめられています。WordPress でコーディングをする際に PHP のコードも扱うという方におすすめです。

日本語版 WordPress チートシート

wordpress_cheatsheet3
ダウンロードページ

こちらも WordPress のテンプレートファイルやよく使われる関数がまとめられたチートシートです。記事表示のループやナビゲーションメニューの表示のコード例もあり、非常に便利です。こちらは日本語で書かれているので、英語が苦手な方におすすめです。

ツール

Chrome Devtools Cheatsheet

chrome-devtools-cheatsheet

ダウンロードページ

Chrome のデベロッパーツールのショートカットキーがまとめられたチートシートです。Windows、Linux、Mac に対応しています。

Git Cheat Sheet

git-cheat-sheet
ダウンロードページ

Git のコマンドのチートシートです。コマンド毎に簡単な説明が記述されているので、使うときに非常に便利です。Webサイトのコードを Git でバージョン管理している方におすすめです。

まとめ

今回は Web 制作で役立つチートシートとサービスを紹介しました。ブックマークしてコピペして使ったり、印刷してデスクや壁に貼ったりして活用してみてください。


イベント

2017/12/05(火)
Design Thinking Square