Web制作の実装や勉強に役立つ便利なチートシートのまとめ
Post on:2016年4月25日
sponsors
あれ何だっけ？ という時にさっと分かるWeb制作の実装や勉強に役立つチートシートがあると便利です。
BootstrapのさまざまなUIエレメントの実装、FlexboxでUIコンポーネントを実装、CSSの各ブラウザのサポート状況、Gitのコマンド、React.jsやAngular.jsなどのチートシートを紹介します。
必要なものは全部、ダウンロード・ブックマークしておきたいですね。
まずは、Bootstrapの最新版に対応したチートシートから。
2016年4月現在最新のBootstrap v4.0.0-alpha.2に対応したチートシート。さまざまなUIエレメントを実装するコードとデモを見ることができます。
CSS Front-end Frameworks by Comparison
フロントエンド用の各フレームワークの対応ブラウザ・Sass対応、ライセンスなどの比較一覧。
CSS3 Flexbox Properties
和訳: CSS3 Flexbox の各プロパティの使い方
Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」。
Flexbox Patterns
和訳: よく使うUI要素をFlexboxを使ってシンプルに簡単に実装
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装する方法をまとめたもの。
CSS, HTML, SVG, JS APIなど、各ブラウザのサポート状況やバグが分かります。
jQuery Cheat Sheet
jQuery 1.10, 2.0対応、セレクタやイベントなどのAPIがまとめられたチートシート。
React.jsのチートシート。
Angular.jsのチートシート。
Docker Commands and Best Practices Cheat Sheet
Dockerのコマンドと実践的な使い方のチートシート。
JAVAのコレクションクラスのそれぞれの特徴をまとめたチートシート。
JAVA8 Stream APIのチートシート。
Java 8 Best Practices Cheat Sheet
JAVA8の実践的な使い方のチートシート。
Default WordPress Generated CSS Cheat Sheet
WordPressのデフォルトで使用しているclassのチートシート。
WordPressのテンプレートの構成のまとめ。
Vimのコマンドのチートシート。
マークアップが楽になるEmmetのコマンドをまとめたチートシート。
Regular Expressions Cheat Sheet
正規表現のチートシート。
Google Analytics Regular Expressions Cheat Sheet
Goole Analyticsの正規表現のチートシート。
Git Commands and Best Practices Cheat Sheet
Gitのコマンドと実践的な使い方のチートシート。
Chromeのデベロッパーツールのショートカットやコマンドをまとめたチートシート。
sponsors
