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