【HTML/CSS】CSSフレームワークについて

こんにちは。駆け出しプログラマーの松下です！

webページ作成でコーディングを効率化するフレームワークについて説明します。

HTMLを学び始めたばかりという方の参考になれば幸いです！

CSSフレームワークとは

webページはデザイン性の良さや利便性、可視性の高さなど、CSS次第でクオリティに差がつきます。

しかし、短期間でWebサイトを実装したい場合や、デザイナー不在のチームでWebサービスを作る場合があると思います。

そんなときにCSSフレームワークが役立ちます。

CSSフレームワークとは、 Webページを作るのに必要な素材をあらかじめ何パターンか用意したもので、 見出しやボタンなどよく使われるレイアウトが簡単に使えるので、デザイン実装の手間を減らすことができます。

ただし、CSSフレームワークは使い方を覚えるまでに時間が必要なものもあったり、目的の異なるCSSフレームワークもあるので、しっかりと考えてからCSSフレームワークを導入する事が必要です。

メリット

作業時間を短縮できる

パターンを用意してくれるので後は組み合わせるだけなので、一からレイアウトやデザインを考える必要がありません。

コーディング量が大幅に削減されるので作業時間の短縮につながります。

提供元の方に問い合わせることができるので、トラブルが起きたときの原因をすぐに見つけやすいという利点もあります。

見栄えの良いサイトがデザイナーを介さなくても素早く作れる

各パーツにおいても行間や余白などが考えられているため、適当に作ったとしても「要素の余白が無さすぎる」「行間が詰まり過ぎてて文章が読みづらい」などのデザイン上の問題が少なく済みます。

ドロップダウンメニューやスライダー、ライトボックスなどCSSだけで実装するには手間がかかるコンポーネントも、簡単に追加することができます。

統一感のあるWebサイトに仕上がる

それぞれに色やサイズがあらかじめ指定されているので、その範囲内で作れば一貫性が生まれ、統一感のあるデザインのWebサイトが作れます。

複数人で実装を行ってもルールを決めてしまえば同じように実装することができます。

レスポンシブデザインに対応しやすい

レスポンシブデザインとは、 PCやモバイルなどWebサイトを見る端末によって、画面幅に合わせた適切なレイアウトを実現し見やすくするものです。

レスポンシブデザインは、画面解像度毎に細かく定義していく必要があります。最近はタブレットなどを含めるとデバイスの種類が多すぎて、それら全部に対応していくのはかなり大変です。

フレームワークはレスポンシブ用に各解像度毎にちゃんと定義されており、それに従っていけばどのようなデバイスでもある程度の表示ができる安心感があります。

デメリット

デザインが似たようなものになりやすい

様々なサイトで利用できるようにするため「ユニバーサルデザイン」になっているので、似たり寄ったりなデザインになりやすいです。

そのため他サイトと差別化をはかるには不向きです。

学習コストがかかる

CSSフレームワークのルールを理解してHTMLを組まなければならないので最初に時間がかかります。

 また、そのルールがバージョンアップによって変わる場合があります。

ファイルサイズが大きい

高機能なフレームワークほどファイルサイズが大きくなるのが一般的です。

用意されているすべてのコードを読み込むため、使わない機能がたくさんあるのにWebサイトが重くなってしまう場合があります。

代表的なフレームワーク

・BootStrap

Twitter社が開発した最も有名で利用者数が多いCSSフレームワークです。

・Foundation

カスタマイズ性が高いフレームワークです。

・Bulma

CSSだけで成立しているのでとても軽量なことが特徴です。

好きなようにjQueryや他のJavaScriptファイルを組み合わせることができます。

・Semantic UI

デザイン性が高く、非常にシンプルで使いやすいことが特徴です。

目的やファイルのサイズで合ったものを選びましょう。