CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
Post on:2016年5月9日
sponsors
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
イラスト: Girls Design Materials
Flexboxの基礎知識・バグ情報
まずは、Flexboxで何ができるのか、どういうレイアウトができるのか、各プロパティの機能やバグ情報のまとめから。
CSS3 Flexbox Properties
翻訳: CSS3 Flexbox の各プロパティの使い方
Flexboxで使用する各プロパティがどのように機能するのか、どのように影響を与えるかをビジュアルで解説したガイド。
Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのか、オンラインでいろいろ試すことができます。
Flexboxのアイテムの幅の計算機。
Flexboxの使い方を楽しみながら、身につけることができるゲーム。
Flexboxでカエルをうまいこと導きます。
こちらもゲームで、Flexboxで塔を移動させて進路を防ぎます。
Flexboxの各ブラウザのサポート状況 -Can I use
2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるようになりました。
ちなみに、IE9を唯一サポートしているVistaは2017年4月11日にサポート終了します。
参考: Windows 製品のサポート ライフサイクル について
Flexboxを使う上で備えておきたいのが、バグ情報。
未解決のものもありますが、解決方法が分かるものもあります。
Flexboxの使い方
Flexboxで基本的なグリッドから、よく使うレイアウト、ヘッダ・フッタ・ナビゲーションなどのコンポーネントを実装する方法です。
まずは、Flexboxのスニペットから。
Flexboxのよく使うコードが簡単に利用できるSublime Text用のスニペット。
Flexbox Patterns
翻訳: よく使うUI要素をFlexboxを使ってシンプルに簡単に実装
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFlexboxで実装する方法をまとめたもの。
Solved by Flexbox
翻訳: Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ
Flexbox無しでは出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックのまとめです。
Flexboxを使ったさまざまなレイアウトを簡単に作成できるオンラインツール。
1プロジェクトまで無料で利用できます。
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を使った方がシンプルなコードですが、無しでも実装できます。
Flexboxサポート外のIE8, 9でも利用できるようにするスクリプト。
外部ファイルを一つ加え、「-js-display: flex;」を加えます。
sponsors
