CJ Column

コラム

【初心者向け】CSSフレームワークとは?メリットや使い方を解説

CSSフレームワークってご存知でしょうか?
すごーく簡単にいうと"Webページのパーツ集"みたいなもので、Webサイト制作の効率化が図れるツールとしてよく使われています。
今回はCSSフレームワークについて、あまり馴染みのない方、聞いたことはあるけど中身はよく知らない…という方に向けて、概要をご説明します。

CSSフレームワークとは?

ボタンやテキストのスタイルから、タブ切り替えコンテンツ、ドロップダウンメニューなどの凝ったものまで、さまざまなパーツがあらかじめデザインとコーディングがされた状態でセットで配布されています。

本来Web制作では、デザインに沿ってCSSで見た目を指定し、ひとつひとつの部品を組み立てていくのですが、フレームワークを使うことによってその作業が省略できます。
パーツデザインをする必要がないので、デザイナーでなくてもある程度のクオリティーのページを作ることができます。
また、要素を横並びにしたり、全画面表示にしたりといったページのレイアウトも簡単に組めるように、あらかじめCSSが用意されています。
多くのCSSフレームワークはレスポンシブに対応しているので、それぞれのデバイスにあわせた表示を簡単に整えられます。


CSSには一切手を加えず、画像のようなマルチデバイス対応ができます。
コーディングの知識はあまりないけど、とりあえず触りながら学びたい!というときにも役立ちそうですね。

フレームワークの使い方

まずはフレームワークの配布ページからファイルをダウンロードし、指定されたCSS(ものによってはJSも)を読み込ませます。
あとはドキュメンテーション通りにHTMLを書き、パーツを指定するclassを追加します。
ものによって違いはありますが、多くのフレームワークはこれで使えるようになります。

パーツの装飾サンプル

See the Pen Bootstrap sample by cj (@cj_0000) on CodePen.

HTMLを書いてclassを指定し、あとは好きな文言を書くだけ!
これを作るためのCSSは一切書いていないので、作業がかなり効率化できることが分かると思います。(サンプルはBootstrapを使っています)

レイアウトサンプル

See the Pen Bootstrap column sample by cj (@cj_0000) on CodePen.

こちらは横並びのレイアウトです。サイズの指定もCSSを一切触らずにできます。
本来であれば、横幅や余白、並べ方を指定する必要があるのですが、フレームワークを使えばそれらを考える手間が省けます。(サンプルはBootstrapを使っています)

フレームワークを使うメリット

・手軽にページが制作できる
Webページに必要なパーツは一通り揃っているので、あとはドキュメンテーションにそって要素を配置していくだけなのでお手軽です!

・デザインの統一感が出せる
各パーツは色やサイズがあらかじめ指定されているので、その範囲で作れば、一貫性のあるデザインのページが作れます。逆に言えば、似たようなパーツばかりで変化に乏しいとも言えます。

・複数人で作ってもクオリティーがある程度保てる
上記の統一感の話とも通じますが、基本的に用意されたパーツを使っていくので、コーディングのルールがしっかり決まっています。複数人で1つのサイトを作る際にも、それぞれが手を加えてデザインにバラつきが出る…ということが避けられます。

フレームワークを使うデメリット、注意点

・凝ったデザインのサイトは作れない
フレームワーク内でできることは限られているので、それ以上のことをしたければ独自にコーディングが必要になります。

・既存サイトには導入しにくい
使えないこともないですが、デザインテイストが混在してしまいます。フレームワークを使いたい場合は、デザイン着手前に方針を決めておいたほうが良いです。

・パフォーマンス低下の可能性がある
すべてのパーツのコードを読み込むため、中には読み込みだけされて一切使われないものもあり、フレームワークによってはページが重たくなってしまうことがあります。

どんなサイトで使うといいの?

デザインに時間をかけられないサイトや、デザイナーがアサインできないときに役立ちます。たとえば、個人ブログ、サンプルサイト作成、Webサービスや社内システムの管理画面、などでしょうか。
逆に、すでにデザインのあるサイトで使うとなると、「フレームワークの型にわざわざデザインを合わせにいく」というような、ちょっと違和感のある作り方になってしまいます。(これ、デザイナーに怒られるのではないでしょうか)
もし使う場合は、パーツのUIが豊富なフレームワークよりは、レイアウト用のフレームワークを使うのが良いと思います。個人的には企業や製品のWebサイトといった、宣伝・広報が目的のサイトにはあまり向かない気がします。短期間・低予算で作りたい!という場合はCSSフレームワークは大いに役立つと思います。

まとめ

CSSフレームワークはサイト制作の効率化を図れる便利なツールですが、作りたいサイトによって向き不向きがあります。
便利だから絶対使おう!ではなく、適した場所で活用させるのがベストな方法だと思います。

A.U  フロントエンドエンジニア

一覧に戻る

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。