Webデザイン

【CSSフレームワーク】Bootstrapとは?Webデザイン初心者でも簡単にWebサイトが作れちゃうBootstrapことはじめ!

【フロントエンド】CSSフレームワーク・Bootstrapとは?Webデザイン初心者でも簡単にWebサイトが作れちゃうBootstrapことはじめ!

こんにちは。
GOSHIMMERです。

今回は、CSSフレームワーク「Bootstrap」についてWebデザイン初心者さん向けにご紹介します!

この記事はこんな人におすすめ

Bootstrapについて詳しく(メリットなど)知りたい!

Webデザイン初心者だけどWebサイトを作ってみたい!

Bootstrapの導入方法を知りたい!

Bootstrapって何?

【フロントエンド】CSSフレームワーク・Bootstrapとは?Webデザイン初心者でも簡単にWebサイトが作れちゃうBootstrapことはじめ!

Bootstrapとは、Twitter社により開発されたフレームワークの一つで、Webサイトのデザインにおけるスタイルなどがあらかじめ定義されています。
これによって、よりスピーディにWebサイトを作成できることはもちろん、ある程度のCSSなどが準備されているので、Webデザイン初心者さんにも、業務で使う方にも、とても便利なものになっています。
ここでBootstrapを利用するメリット・デメリットに関して詳しく説明します。

Bootstrapを利用するメリット

コーディングの量を減らし、素早くデザイン適用できる。

予め用意された、グリッド、ボタン、テキストなどのクラスを適用するだけで、デザインができるので、コーディングの量を減らし、迅速なWebサイト制作が可能になります。

デザイン知識がなくてもおしゃれなWebサイトを作ることができる。

クラスがあらかじめ用意されていることはもちろん、カルーセルや、ナビゲーションなどの一見難しそうなWebデザインもテンプレートとして用意されています。
これらを使うことで、コピペによるWebサイト制作も可能になります。

レスポンシブWebデザイン対応。

レスポンシブ対応Webサイトとは、一つのHTMLに対し、デバイスごとのCSSを用意して設定するサイトのことです。
Bootstrapの「グリッドシステム」という機能を使うことで、簡単に少ないコーディング量で、レスポンシブ対応することができます。

Bootstrapを利用するデメリット

ある程度のコーディング知識は必要

先ほどから、初心者にもできると書いていますが、あらかじめ準備されているとはいえ、Bootstrapには定義されていない要素が必要になってくる可能性があるため
HTML、CSSの基礎の部分は少なくとも理解しておいた方がいいでしょう。
HTMLとjavascript、そしてCSSがどのように構成されて、どう適用されているのかは知っておきたいところです。

デザインが似たものになりがちで個性が欠ける

あらかじめ用意されたものを使えるのはメリットでもありますが、その分似たようなデザインに偏りがちな部分があるので、個性を出しにくいです。

向いている場面・向いていない場面

メリット・デメリットはやっぱりあります。
私的にBootstrapが向いていると思う場面は、「納期が短い」「デザインはそこまでいじらなくていい」「レスポンシブデザイン」のWebデザイン。
逆に、「デザインで個性を出したい」「デバイス別の細かい設定が必要」なWebデザインには向いていないとおもいます。

Bootstrapの導入方法

【フロントエンド】CSSフレームワーク・Bootstrapとは?Webデザイン初心者でも簡単にWebサイトが作れちゃうBootstrapことはじめ!

今回は、ファイルをダウンロードしなくても使える、「CDN」での読み込み方法を解説していきます。
もし、CDNを使わずに、ダウンロードして使いたい場合は、公式サイトをご参照ください。

01HTMLファイルを準備する。

公式サイトにあらかじめ用意されているスターターテンプレートなどを使って、HTMLファイルを用意します。
この時、必ずviewportの設定が必要になります。(※レスポンシブ対応のため。)

copyする
<meta name="viewport" content="width=device-width, initial-scale=1">

02CDNファイルを読み込む。

<link> <head> 内側に他のスタイルシートよりも先に入れてください。
もし、別のCSSを読み込む場合は、必ずBootstrapのCSSの下にいれてください。

copyする
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

また、body内にbootstrap.bundle.js もしくは bootstrap.bundle.min.jsを読み込んでください。

copyする
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"></script>

03テンプレートなどを使いながら、Webサイトを構築する

ここまで準備ができたらあとは、Webサイトを構築するだけです!

参考になるデザインサンプル集

公式サイト サンプル
テンプレート(ナビゲーションや、ある程度デザインされたWebページ)が掲載されているので、コピペで構築できて便利です。

公式サイト チートシート
文字サイズや表組、ボタン、カルーセルなどはここにまとめられています。

Bootstrap5設置ガイド
より詳しい導入方法や、余白(margin、paddingなど)の設定、グリッドシステムの設定、デバイスサイズごとの設定などはこちらを見るのがおすすめです。

【番外編】Bootstrapを利用してポートフォリオサイトを作ってみました。

【フロントエンド】CSSフレームワーク・Bootstrapとは?Webデザイン初心者でも簡単にWebサイトが作れちゃうBootstrapことはじめ!
Bootstrapを利用して、フォトグラファーとしてのポートフォリオサイトを作ってみました。
構成、デザイン、コーディングまで大体半日程度で制作できました。
CSSのコーディング量は普通に制作するよりは半分くらいの量に抑えられたことや、スピーディに制作できたのはよかったと思います。

今回は、ノンデザイナーの方や、CSSなどを学びたての方でも使えるように、HTML5とCSS3で構築しているので、ぜひコードをパクッてオリジナルサイトを制作してください。
また、今回コンタクトフォームはダミーで入れていますが、もし導入する場合はphpの知識が必要になるので、あらかじめワードプレスなどを使ってプラグイン「Contact form 7」を使うと便利です。

goshimmer ポートフォリオサイト

まとめ

いかがだったでしょうか。
基本的なWebサイトや、ノンデザイナーの方でも簡単にWebデザインできる「Bootstrap」。
メリット、デメリットはありますが、場面を見極めて導入することで、よりスピーディなサイト制作を叶えてくれます。

スピードが求められる場面が多いと思いますので、私自身ももっと勉強していきたいと思います。

GOSHIMMER

Creater - Web,Graphic,Video
Mayu Goto
インハウスWeb制作の仕事をする24歳。
人のために何かをすること、考えることが好きです。