CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ

CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。

CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ

イラスト: Girls Design Materials

Flexboxの基礎知識・バグ情報

まずは、Flexboxで何ができるのか、どういうレイアウトができるのか、各プロパティの機能やバグ情報のまとめから。

サイトのキャプチャ

CSS3 Flexbox Properties
翻訳: CSS3 Flexbox の各プロパティの使い方

Flexboxで使用する各プロパティがどのように機能するのか、どのように影響を与えるかをビジュアルで解説したガイド。

サイトのキャプチャ

Flexbox playground

Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのか、オンラインでいろいろ試すことができます。

サイトのキャプチャ

Flexbox Tester

Flexboxのアイテムの幅の計算機。

サイトのキャプチャ

Flexbox Froggy

Flexboxの使い方を楽しみながら、身につけることができるゲーム。
Flexboxでカエルをうまいこと導きます。

サイトのキャプチャ

Flexbox Defense

こちらもゲームで、Flexboxで塔を移動させて進路を防ぎます。

サイトのキャプチャ

Flexboxの各ブラウザのサポート状況 -Can I use

2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるようになりました。
ちなみに、IE9を唯一サポートしているVistaは2017年4月11日にサポート終了します。
参考: Windows 製品のサポート ライフサイクル について

サイトのキャプチャ

Flexbugs

Flexboxを使う上で備えておきたいのが、バグ情報。
未解決のものもありますが、解決方法が分かるものもあります。

Flexboxの使い方

Flexboxで基本的なグリッドから、よく使うレイアウト、ヘッダ・フッタ・ナビゲーションなどのコンポーネントを実装する方法です。
まずは、Flexboxのスニペットから。

サイトのキャプチャ

Flexbox Snippets

Flexboxのよく使うコードが簡単に利用できるSublime Text用のスニペット。

サイトのキャプチャ

Flexbox Patterns
翻訳: よく使うUI要素をFlexboxを使ってシンプルに簡単に実装

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFlexboxで実装する方法をまとめたもの。

サイトのキャプチャ

Solved by Flexbox
翻訳: Flexboxのこれが知りたかった!今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ

Flexbox無しでは出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックのまとめです。

サイトのキャプチャ

visual flexbox builder

Flexboxを使ったさまざまなレイアウトを簡単に作成できるオンラインツール。
1プロジェクトまで無料で利用できます。

サイトのキャプチャ

cssPlus
デモページ

Flexboxを使ったさまざまなレイアウトを簡単に利用できます。

Flexboxのフレームワーク

グリッドだけのシンプルなものから、さまざまなコンポーネントが用意されたものまで、フレームワークも数多くリリースされている中からオススメのものをご紹介。

サイトのキャプチャ

Flexbox Grid
Flexbox Grid -GitHub

Flexboxを使ったグリッドを構築できるシンプルなフレームワーク。

サイトのキャプチャ

Bulma
Bulma -GitHub
翻訳: ブルマがすごい!外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma

最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワーク。一部だけ利用してもよし、もちろん全部を利用してもよしです。
キャプチャは、グリッドのタイル

サイトのキャプチャ

driveway
デモページ
翻訳: レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway

Masonryレイアウトをスクリプト無し、Flexboxで簡単に実装できます。

サイトのキャプチャ

FOX CSS
FOX CSS -GitHub
翻訳: IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS

モバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークの超軽量CSSです。
FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。

サイトのキャプチャ

Bootstrap v4
参考: Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ

Bootstrapも4になり、Flexboxでの実装がメインとなりました。グリッドだけを利用してもよいし、人気が高いカード型コンポーネントを利用してもよしです。

Flexboxを旧ブラウザで使う時

いろいろな事情でFlexboxを使いたいけど、使えない時もまだあると思います。そんな時の代替・補助方法です。

サイトのキャプチャ

Almost complete guide to flexbox (without flexbox)

Flexboxでの挙動をFlexbox無しで実装する方法のまとめ。Flexboxを使った方がシンプルなコードですが、無しでも実装できます。

サイトのキャプチャ

Flexibility -GitHub
デモページ

Flexboxサポート外のIE8, 9でも利用できるようにするスクリプト。
外部ファイルを一つ加え、「-js-display: flex;」を加えます。

top of page

©2017 coliss