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

更新日: 2018年06月26日

マイページにお気に入り

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

CSSを使いこなす

CSSで背景を作る。backgroundプロパティの使い方を解説

ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。背景の設定にはCSSを使うことが多いのですが、背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。