Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。

ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。

Web制作者が備えておきたい最新版チートシートのまとめ

フローをたどるだけで、Flexboxの実装方法が分かる

チートシートのキャプチャ

Flexbox Cheatsheet Cheatsheet

Flexboxの実装を分かりやすいイラストとともに、フローで解説したチートシート。

フローは例えば、Flexboxで横行・縦列のどちらを実装しますか?
横行なら左のフロー、縦列なら右のフローをたどるだけで、分かります。

チートシートのキャプチャ

もちろん上記はごく一部で、Flexboxを使ったさまざまなレイアウトのフローが用意されています。

Flexboxの各プロパティの使い方を詳しく解説

チートシートのキャプチャ

A Visual Guide to CSS3 Flexbox Properties
日本語版: Flexbox の各プロパティの使い方を詳しく解説

Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説したリファレンス。

チートシートのキャプチャ

実際にどのように機能するか試すことができるデモページも用意されています。

サイトのキャプチャ

Flexbox Playground

CSSのセレクタの使い方をまとめたチートシート

チートシートのキャプチャ

CSS Selectors Cheatsheet

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 Cheat Sheet

Bootstrap 4で利用できるさまざまなUIコンポーネント・エレメントのclass名の一覧とその実装方法と実装例がまとめられたチートシート。

各classをクリックすると、実装コードとプレビューが表示されます。

サイトのキャプチャ

10月にBootstrap 4 Alpha 5がリリースされ、グリッドやNavbarやユーティリティがアップデートされました。

Bootstrap 4のチートシートが紙で欲しい

サイトのキャプチャ

Bootstrap 4 Cheat Sheet & Classes List Reference

オンラインのチートシートも便利ですが、プリントして手元において使いたい人には、このチートシートが便利です。

サイトのキャプチャ

オンライン版の方では、class名ごとにどんなUIエレメントが実装できるか分かります。

フロントエンド用の各フレームワークの基本機能を比較

サイトのキャプチャ

CSS Front-end Frameworks

Bootstrap, Foundation, Kube, 960 Grid Systemなど、CSSベースのフロントエンド用の各フレームワークの対応ブラウザやライセンスなどの基本機能を比較することができます。

jQueryの最新版に常に対応のチートシート

サイトのキャプチャ

jQuery Cheatsheet

jQuery 3.1.1対応、セレクタやイベントなどのAPIがまとめられたチートシート。
jQueryのアップデートに合わせて、常に更新され続けています。

ES6の実務的なテクニックがまとめられたチートシート

サイトのキャプチャ

ES2015 (ES6) Cheatsheet

ECMAScript 2015(ES6)のチップスやテクニックをまとめたチートシート。

top of page

©2017 coliss