ウェブ制作者に必ず役立つ!iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
Post on:2012年10月15日
ウェブ制作、主にフロントエンドの開発者に役立つチートシートを紹介します。
順番は、iOS, HTML5, CSS, jQuery, WordPress, .htaccess, Git です。
HTML5での美しいコードの書き方、Sass、Zen Coding、jQueryのパフォーマンス、Gitの使い方などもありますよ。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-29.png)
iPhone4, iPadなどのスクリーンサイズ、解像度、各アイコン・バーのサイズをまとめたチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-01.png)
HTML5の要素や属性をまとめたチートシート。HTML4との違いがひと目でわかるよう、HTML5で新しく追加されたものはピンク、サポートされないのはグレーで表示されています。
上記ページでダウンロードできない場合は「Flickr」から。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-02.png)
HTML5, HTML4対応のチートシート。
各要素とその説明、HTMLのバージョン(4はグレー地)、属性が簡潔に記されています。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-03.png)
iPhoneなどの小さい画面用のHTML5のチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-04.png)
HTML5の要素が簡潔に見やすくまとめられています。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-05.png)
HTML5 Cheat Sheet - Event Handler Attributes
HTML5のイベントハンドラをまとめたもの。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-06.png)
HTML5 Cheat Sheet - Browser Support
IE8をはじめ、各モダンブラウザ、スマフォなどのHTML5の対応状況。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-07.png)
HTML5の過去、現在、未来をまとめたもの。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-08.png)
Periodic Table of the Elements
HTML5の要素を元素記号表風にしたもの、URLを入力するとそこで使用されているものがハイライトされます。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-09.png)
What Beautiful HTML Code Looks Like
HTML5を使って、どのように美しいコードを書くかまとめたもの。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-10.png)
CSS3でサポートされているプロパティとその値、疑似クラス・疑似要素、セレクタのチートシート。
それぞれタイプやモジュールごとにグルーピングされています。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-11.png)
Sass (SCSS) and Compass Cheat Sheet
Sassの基本的な記述をまとめたチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-12.png)
Zen Codingの構文や省略形をまとめたもの。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-13.png)
CSS3 Simple Shapes – Cheat Sheet
CSS3を使った四角・三角・丸・ハートなどの作り方のまとめ。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-14.png)
CSS2.1をベースにCSSの基本をまとめたチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-32.png)
jQuery 1.7対応のAPIのチートシート。2012年2月のアップデート版です。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-15.png)
jQueryのセレクタの記述方法のまとめ。
※ダウンロードは要登録(無料)
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-16.png)
jQueryのセレクタを検証できるオンラインサービス。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-17.png)
jQuery Performance Tips Cheat Sheet
jQueryのパフォーマンスに関するTipsをまとめたチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-18.png)
jQuery Mobileを使って実装するUIエレメントとコードのまとめ。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-19.png)
WordPress Cheat Sheets: Theme Anatomy Model
WordPressのテーマファイルの構造をまとめたチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-20.png)
WordPress Cheat Sheets: Template Heirarchy Map
WordPressが各ページのテンプレートをどのように処理しているかのまとめ。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-21.png)
WordPress Cheat Sheets: The Loop Visual Model
WordPressでのループのフローのまとめ。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-22.png)
WordPress Cheat Sheet: The Loop Code Snippet
WordPressのループ内に使うコードのスニペット。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-23.png)
WordPress 3.0 Cheat Sheet (All Short Codes)
WordPressで使える全てのショートコードをまとめたもの。
※PDF版は配布終了、たぶん画像版だけ(WordPress-3.0-Sheetsheet.png)
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-31.png)
The Ultimate WordPress Cheatsheet
上記のWordPressの全てをまとめたと言ってもいいくらいのチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-24.png)
Visual Cheat SheetシリーズのWordPress2.8版です。
※PDF版の直リンク「WordPress-Visual-Cheat-Sheet.pdf」
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-30.png)
WordPressにおけるSEOに効果があるノウハウのまとめ
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-25.png)
Apache 2 .htaccess Cheat Sheet
Apache2の.htaccessの各種設定のチートシート(PDF)。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-26.png)
こちらも同じ、よく使う.htaccessの各種設定をまとめたもの(オンライン)。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-27.png)
RewriteRule, RewriteCond に特化したチートシート。
![チートシートのキャプチャ](/wp-content/uploads-2012-2d/2012101503-28.png)
Gitの使い方をまとめたチートシート。
※Git cheat sheet (日本語版)
sponsors