あなたはどちら派？FlexboxとCSSグリッドで使える便利なリソース10選

Table レイアウト 、float レイアウト を経て、Web開発者たちに大きな衝撃を与えたのが、「Flexbox」という存在です。

Flexboxは名前の通り可変のボックスで、 コンテンツ の レイアウト を デバイス の ディスプレイ サイズに応じて柔軟に対応させることができます。そのため、レスポンシブレイアウトが流行していた当時は非常に革新的な存在として注目を集めました。

時を経て、 CSS グリッドも従来の レイアウト 手法が持つ問題点の多くを克服して登場しました。しかし、今もなおFlexboxが便利なので使い続けている人も多いのではないでしょうか。

そこで今回は、Flexboxと CSS グリッドで使える便利なリソース10選をご紹介します。どれも便利なものばかりなので、気に入ったものがあればブックマークしておきましょう。

あなたはFlexbox派？ CSS グリッド派？

イメージ画像 / stock.io

Flexboxだけでなく、 CSS グリッドも実用段階に入ったので、 CSS グリッドを使いはじめている人も増えてきました。しかし、そもそもFlexboxと CSS グリッドは設計思想が異なるので、単純にFlexboxが CSS グリッドの代替となる、と簡単に言い切ることは難しいでしょう。

現時点では、Webデザインでワイヤーフレームを構築する際に、Flexboxを使う人と CSS グリッドを好んで使う人に別れるでしょう。それぞれに利点があるので、今回はそれぞれに便利なリソースをご紹介していきます。

参考：
グリッドレイアウトと他レイアウトメソッドとの関係 - CSS | MDN

Flexbox好みなあなたにオススメの5つのリソース

1. Sassで思いっきりカスタマイズできるFlexboxライブラリ「Cyanotype」

Cyanotypeは、カスタマイズ可能なSassベースのFlexboxライブラリです。「flex-pad」や「flexible-container」といった、標準では用意されていない便利なmixinを使うことで、柔軟にカスタマイズすることができます。

設定できる数が多い訳ではありませんが、軽量で、コードも書きやすいように工夫されています。Sassを普段からお使いの人にはオススメのライブラリです。

2. 遊びながらFlexboxが学べる「Flexbox Froggy」

Flexbox Froggyは、Flexboxに関する CSS コードを書くことで「カエル」を助けてあげるゲームです。たった1行のコードを完成させる問題が24問続きますが、これらを解くことで結果的にFlexboxの基礎はマスターすることができます。

このゲームを通して、例えば「justify-content: space-between;」と「justify-content: space-around;」の違いなど、初心者がつまずきやすいところを、楽しみながら理解することができるでしょう。よく使う上下左右中央揃えも早期に解決できます。

3. 基本的なプロパティの挙動を学べる「Flexibility」

Flexibilityは、Flexboxでよく使われる基本的な4つのプロパティの挙動を確認することができるWebサイトです。

ここでは、「align-items」「flex-direction」「flex-wrap」「justify-content」の4つが見た目にどのような影響を与えるかを確認することができます。ウィンドウのサイズを動かすことで、それぞれのアイテムがどのように移動するのか、確認してみるといいでしょう。

4. Flexboxを活用した12グリッドの フレームワーク 「Ginger」

Gingerは、Flexboxを活用して作成された、軽量な12グリッドの CSS フレームワーク です。

GingerでもSassが活用されているので、初期設定としていくつかの値を変更すれば、全てのプロパティに変更を適用できます。もちろんブレイクポイントも ニーズ に合わせて変更することも可能です。

5. 日本語にもしっかり対応「 CSS Flexbox チートシート」

CSS Flexboxチートシートは、Webクリエイターボックスで配布されている、日本語で書かれているFlexboxのチートシートです。チートシートとはいわゆる「カンニングペーパー」のことで、逐一リファレンスをチェックしなくとも1枚で大体のことがわかるように書かれていることがほとんどです。

「flex-shrink」や「flex-order」など、使用頻度がそれほど高くないけれどいざという時に知りたい情報も、しっかりとまとめられています。Webクリエイターボックスのニュースレターに登録することで、PDFファイルをダウンロードすることもできます。

CSS グリッド好みなあなたにオススメの5つのリソース

1. CSS グリッドのコードを目視で確認できる便利 ツール 「Griddy」

Griddyは、実行結果を確認しながら CSS グリッドのコードを生成してくれるツールです。

CSS グリッドは2次元 レイアウト なので、FlexboxやFloatの レイアウト が好きな人には少し取っつきにくいかもしれません。しかし、カラム数や幅を設定するだけでコードを自動で生成してくれるので、実践的で便利です。

2. 遊びながらグリッド レイアウト が学べる「Grid Garden」

Grid Gardenは、グリッドに関する CSS コードを書くことで「ニンジン」を育てていくゲームです。先ほど紹介したFlexbox Froggyも開発しているCodepipが開発しています。

たった1行のコードを完成させる問題が28問ありますが、これらを解くことで、おおまかな CSS グリッドの使い方は理解できます。日本語をはじめ18の言語に対応しているので、英語で困ることもないでしょう。

3. 高機能なビジュアルガイド「 CSS Grid Cheat Sheet」

CSS Grid Cheat Sheetは、 CSS グリッドの高機能なビジュアルガイドです。マテリアルデザインの UI で、アイテムを足しながらグリッドの整列をリアルタイムで確認することができます。

非常に細かい部分まで CSS グリッドのプロパティを指定できますが、あくまでも「ここの数字を変えたらこのように見た目が変わる」というのをシミュレーションできるツールです。工夫しながら使ってみましょう。

4. 蜂の巣状に CSS グリッドを配置できる「Hexi-Flexi-Grid」

Hexi-Flexi-Gridは、 CSS グリッドベースで、ヘキサゴン状に蜂の巣のようにグリッドを配置するライブラリです。 JavaScript には依存しておらず、完全に CSS だけで作られています。

Sassファイルが同梱されているので、Sassを設定することで、六角形の大きさや向きなどを変えることができます。ヘキサゴン部分に画像や文字を入れることもできます。

5. CSS 「Grid Examples」

Grid Examplesは、実際に CSS グリッドを使って構築されたサイトを集めたカタログサイトです。 ブログ からニュースサイトまで、さまざまなジャンルのWebサイトが集められています。

一口に CSS グリッドが使われていると言っても、それぞれのサイトがユニークな手法でデザインされています。中にはグリッドを斜めにしたり、あえて崩したデザインを採用しているサイトもあるので、 CSS グリッドの全体的な レイアウト の新しいアイデアが生まれそうです。

まとめ： ツール を最大限に活用しよう

目的や自分自身の使い勝手によって、Flexboxと CSS グリッドを使い分けている人もいるでしょう。中には、Flexboxと CSS グリッドを同時に使う方も出てくるでしょう。 CSS グリッドはまだ登場して時間が浅いので、使えそうなリソースが少ないですが、今あるものを最大限に利用してみましょう。

次々に便利な ツール が開発・公開されるのが、Web開発のよいところでもあり、面白いところでもあります。これらのツールを最大限に活用して、ぜひ自己研鑽に励みましょう。

参考：
Flexbox and Grids, your layout’s best friends