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