Web制作者が備えておきたい最新版チートシートのまとめ
Post on:2018年11月7日
あれはどうだったかな? という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。
iPhone 8やXsのスクリーンサイズはいくつだったかな? CSS FlexboxやGridの挙動がまとめて知りたい、CSSのプロパティの値や対応ブラウザは? Vue.js, React.jsのよく使用するイベントや構文、ブラウザごとのバグやハックはあるのか、がまとめられています。
![Web制作者が備えておきたい最新版チートシートのまとめ](http://coliss.com/wp-content/uploads-201804/2018110701.png)
チートシートはPDFや画像をダウンロードしておいたり、ブックマークして、すぐに確認できるようにしておくと便利ですね。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-01.png)
Adaptivity and Layout -iOS Human Interface Guidelines
iOSのApple公式のガイドラインです。iPhone, iPadなどのUIのスペックを調べるにはココが一番です。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-02.gif)
iOSの制作者向けの情報が分かりやすくまとめられたガイドライン。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-03.png)
Popular Screen Resolutions: Designing for All
Apple, Androidの主要なデバイスの解像度がまとめられています。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-04.gif)
HTMLのタグと実装のコードがまとめられたチートシート。PDF版もダウンロードできますが、オンライン版は楽しいデザインになっています。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-06.gif)
Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説したリファレンス。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-07.gif)
CSS Flexbox Cheatsheet
CSS Grid Cheatsheet
CSS FlexboxとGridの各プロパティがどのようにレイアウトされるかコンパクトにまとめられたチートシート。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-08.png)
CSS Alignment Cheatsheet
解説: CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ
揃える際に、最適な方法が分かるチートシート。最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-10.png)
CSSのプロパティなど、使い方が分からない時に便利なリファレンス。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-11.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-12.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-13.png)
Vue.jsのよく使用するイベントや構文、メソッド、プロパティがまとめられたチートシート。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-14.png)
Vue.js Handbook
解説: Vue.js Cheat Sheet
Vue.jsの導入から、実装まで、122ページにわたり、詳しく解説されたハンドブック。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-26.png)
Vue.js Complete API Cheat Sheet
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-27.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-22.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-23.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-15.png)
Asynchronous JavaScript cheatsheet
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-16.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-24.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-17.png)
各ブラウザ用のCSS Hackがまとめられています。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-18.png)
ブラウザごとのバグがまとめられており、解決方法があるもの、お手上げなもの、が分かります。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-19.png)
Chrome DevTools のキーボード ショートカット
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-20.png)
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-21.png)
Visual Studio Code Cheat Sheet
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018110702-25.png)
PDF版も画像版も縦長で同じです、Font Awesomeの膨大なアイコンを一覧できます。
sponsors