CSSフレームワークを使おう

■第１話：CSSフレームワークで簡単レスポンシブ対応

（最終更新日：2022.05.16）

「CSSって難しい(-_-;)」

Web制作を始めて、多くの方が最初に悩むのがCSS。思ったように大きさが合わない。 こっちの枠を整えると、もう一方の枠が合わない。スマホだとサイズが合わなくなる。などなど。 かくいうワシも、CSS（Sass）でかなりの苦戦を強いられた。今でも素のCSSで調整すると苦戦する。スコープの制御も効かないので、そういうものだと思ってくれればいい。 そんなCSSによるデザインを簡単にしてくれる強い味方がCSSフレームワークである。 PC、タブレット、スマホと手動では苦戦するレスポンシブ対応を簡単にできる。 今回から４回に及びCSSフレームワークについて説明する。 比較的簡単に使える上、見た目が抜群に整うので、是非使い方を覚えてほしい。

１.CSSフレームワークを使う理由

CSSフレームワークを使う理由は主に以下の３点であると考える。

①レスポンシブデザインへの対応

素のCSSでレスポンシブデザインを作ったことがある人なら分かると思う。 メディアクエリを駆使すれば確かに実装できるのだが、PCとスマホでレイアウトを整えつつ、デザインしていくのは本当にしんどい。 ちょっとしたずれや隙間で苦しむことになる。そんな苦しみを和らげててくれるのが、CSSフレームワークである。 カラムレイアウトから画像サイズの調整、文字の折り返し等を自動で行ってくれる。 下記はCSSフレームワークを用いてレスポンシブ対応した例である。 PCサイズの場合は２カラムレイアウト、スマートフォンサイズの場合は1カラムレイアウトになる。

レスポンシブデザインに対応するものとして、グリッドシステムというものが存在する。 画面サイズに合わせて調整してくれるコンテナ中で、12分割したカラムを配置する。 そのサイズに合わせて、横並び、縦並びにしてくれるものがグリッドシステムである。 Webサイトを簡単にレスポンシブ対応できる。 例えば、12分割を4:4:4の3列並びのレイアウトにすることができる。

②デザインに統一感を出す

デザインに統一感を出すということは、Webサイトを構築する上で非常に重要である。 LPのような単一ページで完成されているものの場合は必要ないかもしれないが、 コーポレートサイトやブログ、その他様々なサイトでは、複数ページに渡り内容が構成されている。 色や形、メニューの動き等に統一感が無いと、同じサイトを見ている感覚が薄くなり、見る方としても疲れてしまう。 CSSフレームワークは、デザインの統一を簡単に実現することができる。

ボタンやフォーム、テーブル、リスト、見出し等、あらかじめデザインが用意されている。

③ライブラリとしての活用

Webサイトの構築に置いて欠かせないものに、ハンバーガーメニューやカルーセルがあり、 これらを自分で作ろうとするとかなり大変である。CSSとJavaScriptを駆使する必要がある。 こういった部品を気軽に利用するために、CSSフレームワークを活用するということもある。 下記はBootstrapを利用したカルーセルである。公式サイトに参考となるデザイン、種類があり、 そこにあるコードをコピー&ペーストするだけで利用することができる。

２.CSSフレームワークの種類

CSSフレームワークには様々なものが存在する。 大きく、モダンフロント（ReactやVue）開発に特化したものと、Web制作で使えるものに分けられる。 モダンフロントに特化したもの（Material UIやChakra UI等）については、ここでは扱わない。 Web制作で使えるものだけを紹介する。 Web制作で使えるものだけでも、非常に多くのCSSフレームワークが存在する。 次回から、機能を最小限に抑えたSkelton、JavaScriptを含まないCSSだけで構成されるBulma、 高機能で定番のBootstrapの３つを順に紹介する。

３.CSSフレームワークの人気ランキング（2022年度版）

CSSフレームワークの人気をGithubのリポジトリのスター数でランキングにした（下記表の括弧内はスター数）。 やはり、多くの人が使っているものほど情報が多く、機能も洗練されたものになりやすい。ぜひ、参考にしてほしい。 ちなみに、このランキングに示すものは全てMITライセンスなので、安心して使っていい。

▼参考図書、サイト

 「Bootstrap5入門 -基礎から実演まで-」　原田けいと、豊内茜、Robert Segawa
   Skeleton: Responsive CSS Boilerplate 　Skelton公式ドキュメント
   Bootstrapのグリッドを理解する【図解たっぷりBootstrap入門】　SKILLHUB