Web制作時に備えておくと便利なチートシートのまとめ(iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ)

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 チートシート
  • ファビコン チートシート
  • ソーシャルメディア チートシート
サイトのキャプチャ

iOS Design Cheat Sheet

iPhone, iPod, iPadなど、iOSの各デバイスのサイズをはじめ、各種アイコン、画像、アプリに使うさまざまなUIエレメントのサイズがまとめられています。

サイトのキャプチャ

Swift Cheat Sheet

AppleがWWDC 2014で発表した「Objective-C」に代わる新しい開発言語「Swift」のチートシート。

サイトのキャプチャ

Android Cheatsheet for Graphic Designers

Android用のページ・アプリと作成する時に役立つグラフィックデザイナー用のチートシート。

サイトのキャプチャ

Android Design Cheat Sheet

こちらもAndroid用で、上記より簡単にグラフィカルにまとめられたチートシート。

サイトのキャプチャ

cheat sheet for Twitter Bootstrap 3

Bootstrap 3でページを作成する際、グリッドやエレメントなどに使われているスタイルをまとめたチートシート。

サイトのキャプチャ

Foundation Cheat Sheet

こちらはFoundation 4でページを作成する際、グリッドやエレメントなどに使われているスタイルをまとめたチートシート。

サイトのキャプチャ

The Time Saving WordPress Cheat Sheet

WordPressのテーマファイルの構成をはじめ、各ファイル用の関数やループがまとめられたチートシート。

サイトのキャプチャ

WordPress theme development Cheatsheet

WordPressのテーマファイルを作成する時に役立つチップスをテンプレート形式にまとめたチートシート。

サイトのキャプチャ

GitHub Cheat Sheet

GitとGitHubのよく使う機能から、あまり知られていないような便利な機能をまとめたチートシート。
Gitは以前紹介した本がすごい役立ってます(できることを軸に書かれてるから分かりやすい入門書 -Git 逆引き入門)。

サイトのキャプチャ

Sublime Text 2 Keyboard Shortcuts

Sublime Text 2のキーボードショットカットをまとめたチートシート。ページ上部の「Downloads」からPDFがダウンロードできます。

サイトのキャプチャ

Emmet Cheat Sheet

あなたが使用しているエディタ(Sublime TextやDreamweaverなどいろいろ)で、簡単な記述でよく使うHTML/CSSのコードが書けてしまうEmmetのチートシート。

サイトのキャプチャ

jQuery Cheatsheet

jQuery 1.0から、1.10 / 2.0 までのセレクタや関数、イベント、エフェクトなどがまとめられたチートシート。そろそろ1.11/2.1のアップデートがくるかな。

サイトのキャプチャ

Flexbox Cheat Sheet

最近ではfloatの代わりに「display: flex;」を使ってる人も多いと思います。そんなCSSのフレキシブルボックスを使ったさまざまなレイアウトのチートシート。

サイトのキャプチャ

Favicon Cheat Sheet

デスクトップからスマフォ・タブレットまで、さまざまなデバイスを考慮したクロスブラウザ対応のファビコンのチートシート。

サイトのキャプチャ

Social Media Cheat Sheet

Twitter, Facebook, Google+など、さまざまなソーシャルメディアのページレイアウトの規格がまとめられたチートシート。シェアするとPDFがダウンロードできます。

top of page

©2017 coliss