Web制作、Web開発の歩き方

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

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

(最終更新日:2022.05.16)

CSSフレームワークのイメージ
この記事は6分で読めます!
(絵が小さい場合はスマホを横に)

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

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


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

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

  1. レスポンシブデザインへの対応
  2. デザイン全体に統一感を出す
  3. ライブラリとしての活用
①レスポンシブデザインへの対応

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

CSSフレームワークによるレスポンシブ対応(横→縦並び)

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

グリッドシステムによるレスポンシブ対応

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

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

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

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

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

Bootstrapのカルーセル

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

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

3.CSSフレームワークの人気ランキング(2022年度版)

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


▼参考図書、サイト

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