Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
Post on:2016年11月15日
CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。
ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。
![Web制作者が備えておきたい最新版チートシートのまとめ](http://coliss.com/wp-content/uploads-201604/2016111501.png)
フローをたどるだけで、Flexboxの実装方法が分かる
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-01.png)
Flexboxの実装を分かりやすいイラストとともに、フローで解説したチートシート。
フローは例えば、Flexboxで横行・縦列のどちらを実装しますか?
横行なら左のフロー、縦列なら右のフローをたどるだけで、分かります。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-02.png)
もちろん上記はごく一部で、Flexboxを使ったさまざまなレイアウトのフローが用意されています。
Flexboxの各プロパティの使い方を詳しく解説
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-03.png)
A Visual Guide to CSS3 Flexbox Properties
日本語版: Flexbox の各プロパティの使い方を詳しく解説
Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説したリファレンス。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-04.png)
実際にどのように機能するか試すことができるデモページも用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-05.png)
CSSのセレクタの使い方をまとめたチートシート
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-06.png)
CSSのセレクタは非常に便利です。
よく使われるセレクタから、限定的だけど非常に活躍するセレクタまで、セレクタの使い方がまとめられています。
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-07.png)
擬似クラス:nth-childの便利な使い方のまとめ
![チートシートのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-08.png)
擬似クラス:nth-childの便利な使い方をまとめたスタイルシート
リストの最初のアイテム、テーブルをシマシマにカラーリングなどでよく使われる擬似クラス:nth-childの便利な使い方がまとめられたスタイルシート。
上記のように、10個の時のみ最初のアイテムを選択する、といった使い方もできます。
さまざまなCSSアニメーションが簡単に利用できるスタイルシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-09.png)
Animate.css
Animate.css -GitHub
クロスブラウザ対応のさまざまなCSSアニメーションがclass一つで簡単に利用できるスタイルシート。バウンド、フェード、フリップ、スライド、ズームなど、多種多様なエフェクトが用意されています。
スクロールに連動したCSSアニメーション、クリックやホバーに連動したCSSアニメーションなどを実装するスクリプトの多くにもこのスタイルシートが利用されています。
Bootstrap 4のUIを実装するコードが分かるチートシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-10.png)
Bootstrap 4で利用できるさまざまなUIコンポーネント・エレメントのclass名の一覧とその実装方法と実装例がまとめられたチートシート。
各classをクリックすると、実装コードとプレビューが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-11.png)
10月にBootstrap 4 Alpha 5がリリースされ、グリッドやNavbarやユーティリティがアップデートされました。
Bootstrap 4のチートシートが紙で欲しい
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-12.png)
Bootstrap 4 Cheat Sheet & Classes List Reference
オンラインのチートシートも便利ですが、プリントして手元において使いたい人には、このチートシートが便利です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-13.png)
オンライン版の方では、class名ごとにどんなUIエレメントが実装できるか分かります。
フロントエンド用の各フレームワークの基本機能を比較
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-16.png)
Bootstrap, Foundation, Kube, 960 Grid Systemなど、CSSベースのフロントエンド用の各フレームワークの対応ブラウザやライセンスなどの基本機能を比較することができます。
jQueryの最新版に常に対応のチートシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-14.png)
jQuery 3.1.1対応、セレクタやイベントなどのAPIがまとめられたチートシート。
jQueryのアップデートに合わせて、常に更新され続けています。
ES6の実務的なテクニックがまとめられたチートシート
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016111302-15.png)
ECMAScript 2015(ES6)のチップスやテクニックをまとめたチートシート。
sponsors