【初心者必見】簡単にWebサイトが作れる？「CSSフレームワーク」とは。
目次
HTML/CSSについて何となく理解しているけれど、
いざ一から自分でWebサイトを作ろうとすると行き詰まったり、デザインが思い浮かばなかったりすることはありませんか？
そんなコーディング初心者が簡単にWebサイトを作ることができる
「CSSフレームワーク」についてお話したいと思います。
HTML/CSSについての知識はある？
その前に…あなたはHTML/CSSについての知識はありますか？
この記事はHTML/CSSについて少し勉強したことがある人におすすめです。
- HTMLで適切なタグを使いWebサイトを構成できる！
- class,id名や様々なセレクタを用いCSSでレイアウトを指示できる！
- jQueryのプラグインを導入することができたり、簡単なコードを記述することができる！
当てはまる方はぜひ、この機会に「CSSフレームワーク」を知ってください。
CSSフレームワークはWebサイトを簡単に作るための“制作キット”
さて、ここからが本題です。
結論からお伝えすると、CSSフレームワークとは、
Webサイトのデザインやレイアウトを簡単に作ることができる“制作キット”のようなものです。
具体的にどう使うのかというと、
- 用意されているCSSやJavaScriptのファイルを自分で作ったHTMLファイルにリンクさせる
- タグに指定のclass名を追加する
基本的に、この二つの作業だけです。
<!--オープンソースのCSSフレームワーク「BULMA」読み込み例-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<!-- CDN（＝ファイルをダウンロードせず、直接URLを記述しリンクさせる方法）で「BULMA」のCSSファイルを読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
</head>
<body>
</body>
</html>レイアウトは、いくつかのパターンから好みに合わせて選べます。
パーツに関しても、テキストのスタイル、ナビゲーションやボタンなど、CSSフレームワークによって様々なものが用意されてあります。
<!-- 「BULMA」.button（=ボタン）実装例 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
</head>
<body>
<a href="#" class="button">ボタン</a>
</body>
</html>このように、Webサイトを形にして行く上でのベースやパーツをまとめたライブラリが
「CSSフレームワーク」です。
一部分のデザインのみであれば、サンプルコードを使ってデザインする方法もありますが、
サイト全体のデザインで使用する場合はCSSフレームワークの方が適しているでしょう。
本当に便利？CSSフレームワークのメリット・デメリット
メリット
作業時間を短縮できる
Webサイトのベースや必要なパーツが用意されているので、
一からレイアウトやデザインを考える必要がありません。
タグにclass名を指定するだけなので、作業時間を大幅に短縮することができます。
結果、効率的にWebサイト制作を進めることができます。
統一感のあるWebサイトに仕上がる
それぞれに色やサイズがあらかじめ指定されているので、その範囲内で作れば一貫性が生まれ、
統一感のあるデザインのWebサイトが作れます。
そのため、初心者にありがちな安っぽいデザインになることはありません。
また、コーダーやフロントエンジニアなどのノンデザイナーの強い武器にもなります。
レスポンシブデザインに対応しやすい
最近重要視されている、PCやモバイル、画面幅に合わせて適切なレイアウトを実現する
レスポンシブデザインも比較的簡単に取り入れられます。
レスポンシブデザインについての記事は、
レスポンシブデザインとリキッドデザイン！違いとメリット・デメリット
こちらの記事をご覧ください。
CSSフレームワークによっては
ディスプレイの解像度ごとに細かく定義されているものもあるので、使用の際は確認してください。
デメリット
デザインの自由度が低い
パーツが用意されているということは、似たようなパーツばかりで変化に乏しいともいえます。
デザインやレイアウトに関しても、自由度は低いでしょう。
そのため、既存のWebサイトのリニューアルや、オリジナリティが求められるブランドサイトには導入しにくいです。
また、フレームワーク内でできることは限られているので、
それ以上のことをしたければ独自にコーディングが必要になります。
CSSフレームワークごとの使い方を理解しなければならない
CSSフレームワークのルールを理解してHTMLを組まなければならない上に、
class名を確認することに手間がかかります。
<!--煩雑なclass名の記述例-->
<a href="#" class="button is-black is-large is-rounded">button</a>それが面倒に感じる人は自分でCSSを記述するほうが楽に感じるかもしれません。
パフォーマンス低下の可能性がある
フレームワークのファイルサイズは様々ですが、高機能なものほど大きくなるのが一般的です。
用意されているすべてのコードを読み込むため、中には一切使われないものもあります。
そのため無駄にWebサイトが重たくなってしまいます。
しかし、フレームワークによっては必要なファイルのみを選択してダウンロードできる機能もあります。
ある程度フレームワークに慣れた段階で応用してみてください。
CSSフレームワークを選ぶときのポイント
CSSフレームワークを選ぶときは以下のポイントに注意して選んでください。
使用する目的とファイルの大きさが見合っているか
CSSフレームワークには、細かなボタンのデザイン、写真のスライドショーやアコーディオンメニューなどたくさんの要素が詰まっているものから、
レイアウトのためだけのCSSフレームワークもあります。
余計な機能ばかりでファイルサイズが大きいと、ページの読み込みに時間がかかってしまいます。
それが原因で、せっかくのWebサイトを閲覧してもらえなければ意味がありません。
どのようにCSSフレームワークを使用するかを先に決めておくことで、
軽量で最適なCSSフレームワークを見つけることができます。
デザインテーマに合っているか
デザインまですべてCSSフレームワークを使うことを希望していても、
サイトの目的と合うデザインのものがなければ自分でデザインするべきでしょう。
どうしてもCSSフレームワークを使いたい場合は、レイアウトを整えるところまでは活用して、細かなデザインは自分でCSSを記述して調整するようにしてください。
利用にあたっての情報が充実しているか
オープンソースでCSSフレームワークを配布しているWebサイトは、海外のものが多いです。
もし、使用時につまづいたり困ったりしたときに、頼りが英語だらけの公式サイトの情報だけだと使いこなせないかもしれません。
公式サイトが分かりやすいか、
そのCSSフレームワークについての情報があるか、リサーチしましょう。
おすすめのCSSフレームワーク
「BULMA」
これまでこの記事内で例に出してきた「BULMA」。
BULMAの最大の特徴は、CSSだけで成立していることです。
JavaScriptファイルを読み込まなければその分ファイルサイズは小さくなりますし、
好きなようにjQueryや他のJavaScriptファイルを組み合わせることができます。
「MUSUBii」
デザインや機能面のコーディングはフレームワークに依存させたくありません。そこで、大きなコンポーネント・JavaScript は含まず「リセット CSS + ベース CSS」というミニマムな構成を取っています。
MUSUBii 公式サイトより https://musubii.qranoko.jp/getting-started/
上記の通り、MUSUBiiを導入するだけでWebサイトが完成するわけではありません。
しかし、一からすべて構成するよりも、ベースを作る分の手間も時間もかかりません。
そして何よりもの大きな利点が、公式サイトが日本語で書かれていることです。
初めてCSSフレームワークを導入する場合、海外サイトのものよりも使いやすいでしょう。
CSSフレームワークの必要性を考えて利用しよう！
「CSSフレームワーク」について、理解できましたか？
CSSフレームワークはWebサイト制作の効率化を図れる便利なツールです。
すべてのWebサイトに向いているとはいえませんが、使い方次第で無限の可能性を秘めています。
Webサイト制作に時間をかけられない場合や、デザインがなかなか決まらない場合は、CSSフレームワークの活用を検討してみてはいかがでしょうか。
逆に、オリジナリティを追求したい場合や、無駄のないスリムなWebサイトを作りたい場合は、CSSフレームワークを使わずに手作業で作り上げるほうがいいですね。
また、CSSフレームワークを使用する場合も、自分の目的に沿ったものを選びましょう。
おすすめの記事
Webサイト制作・コンセプトについて
Webサイトには「サイトコンセプト」が絶対必要！その理由と決め方とは？
フリーランスにホームページは必須？~顧客獲得ツールとしてのWEB~
レイアウト・デザインについてはこちら
綺麗にまとめる？おしゃれに崩す？ホームページ制作でおすすめのレイアウト3選
