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