Web制作時に備えておくと便利なチートシートのまとめ(iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ)
Post on:2014年7月24日
iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。
Web制作時によく使うサイズとかスニペットとかショートカットとか、チートシートを印刷してすぐに見られるようにしておくと便利ですよね。
チートシートの目次
- iOS デザイン チートシート
- Swift チートシート
- Android チートシート
- Android デザイン チートシート
- Twitter Bootstrap 3 チートシート
- Foundation チートシート
- WordPress 時短用チートシート
- WordPress テーマ開発用チートシート
- GitとGitHub チートシート
- Sublime Text 2 キーボードショートカット
- Emmet チートシート
- jQuery チートシート (1.0-1.10/2.0対応)
- Flexbox チートシート
- ファビコン チートシート
- ソーシャルメディア チートシート
iPhone, iPod, iPadなど、iOSの各デバイスのサイズをはじめ、各種アイコン、画像、アプリに使うさまざまなUIエレメントのサイズがまとめられています。
AppleがWWDC 2014で発表した「Objective-C」に代わる新しい開発言語「Swift」のチートシート。
Android Cheatsheet for Graphic Designers
Android用のページ・アプリと作成する時に役立つグラフィックデザイナー用のチートシート。
こちらもAndroid用で、上記より簡単にグラフィカルにまとめられたチートシート。
cheat sheet for Twitter Bootstrap 3
Bootstrap 3でページを作成する際、グリッドやエレメントなどに使われているスタイルをまとめたチートシート。
こちらはFoundation 4でページを作成する際、グリッドやエレメントなどに使われているスタイルをまとめたチートシート。
The Time Saving WordPress Cheat Sheet
WordPressのテーマファイルの構成をはじめ、各ファイル用の関数やループがまとめられたチートシート。
WordPress theme development Cheatsheet
WordPressのテーマファイルを作成する時に役立つチップスをテンプレート形式にまとめたチートシート。
GitとGitHubのよく使う機能から、あまり知られていないような便利な機能をまとめたチートシート。
Gitは以前紹介した本がすごい役立ってます(できることを軸に書かれてるから分かりやすい入門書 -Git 逆引き入門)。
Sublime Text 2 Keyboard Shortcuts
Sublime Text 2のキーボードショットカットをまとめたチートシート。ページ上部の「Downloads」からPDFがダウンロードできます。
あなたが使用しているエディタ(Sublime TextやDreamweaverなどいろいろ)で、簡単な記述でよく使うHTML/CSSのコードが書けてしまうEmmetのチートシート。
jQuery 1.0から、1.10 / 2.0 までのセレクタや関数、イベント、エフェクトなどがまとめられたチートシート。そろそろ1.11/2.1のアップデートがくるかな。
最近ではfloatの代わりに「display: flex;」を使ってる人も多いと思います。そんなCSSのフレキシブルボックスを使ったさまざまなレイアウトのチートシート。
デスクトップからスマフォ・タブレットまで、さまざまなデバイスを考慮したクロスブラウザ対応のファビコンのチートシート。
Twitter, Facebook, Google+など、さまざまなソーシャルメディアのページレイアウトの規格がまとめられたチートシート。シェアするとPDFがダウンロードできます。
sponsors