bootstrap

【初心者向け】Bootstrapの基礎知識を身に着けよう!

bootstrap

WEBサイトやWEBアプリケーションの制作中に悩むことのひとつにデザインがあげられます。「HTMLは分かるし、ページを作ることはできるけど、デザインが…」という方も多いのではないでしょうか?特にスマートフォンといったモバイルデバイス向けのデザインは制作するのが難しく思えるかもしれません。

パソコンにもモバイルデバイスにも対応するページ(レスポンシブなページ)を制作する場合にはCSSやJavaScriptが必要です。それらの知識を新たに習得するのは難しい場合にBootstrapを利用すれば、モバイルデバイス向けのサイトも手間がかからず、またデザインの整ったサイトを構築できます。

今回はBootstrapに興味がある方、Bootstrapをこれから触るけど何から手を付けてよいかわからない方に向けて、Bootstrapの基礎知識をお伝えします。

目次

Bootstrapとは

bootstrapでコーディング

Bootstrapについて、まずは概要を説明します。

Bootstrapができあがった背景

スマートフォンやタブレット端末が世に送り出されて以降、インターネット上で展開される、WEBサービスが広まっていきました。インターネットでは常に新しいものが求められる傾向が強いため、企業はいかに効率よく、WEBサービスを提供することが課題になってきたなかで、CSSフレームワークというものができあがってきました。その中の一つがBootstrap(旧名称Twitter Bootstrap)です。

Bootstrapの起源

BootstrapはTwitter社によって開発・提供されたフロントエンドツールで、オープンソースとして公開されています。もともとはTwitterで利用するためのフレームワークでした。無償ですので、ダウンロードすれば誰でも自分のサイトやWEBアプリケーションに取り入れて使用することができます。

WEBサイトやWEBアプリケーションのためのフレームワーク

BootstrapはWEBサイトやWEBアプリケーションを作るために用意されたデザインのフレームワーク(枠組み)です。タイポグラフィ(文字の整列や文字間隔といったバランス)や、メール送信などに利用されるフォーム、ボタン、あるいはヘッダーに表示するナビゲーション、また、それらの動作を制御するためのJavaScript拡張などが用意されています。

Bootstrapの特徴

様々なデバイスに対応したwebデザイン

Bootstrapの主な特徴は次の4点です。

手軽に見栄えのよいデザインのサイトが構築できる

WEBサイトやWEBアプリケーションを制作する人にも大きく分けると、サイト全体のデザインを考えるデザイナーと、プログラム開発を行うエンジニアが存在します。
特にアプリケーション開発をする場合、通常デザイン部分についてはデザイナーに仕事を依頼します。
一方で特に凝ったデザインは必要ないけれど、ある程度の見栄えは必要という場合もあります。そういった場合にはBootstrapで用意されたパーツを利用すれば、デザイナーに頼らなくても、見た目の整ったページに仕上げられます。

デザインのカスタマイズが容易にできる

Bootstrapにはあらかじめ用意されたCSSのテンプレートが存在します。HTMLやCSSの知識は必要ですが、例えば文字の色や大きさを変えるといったカスタマイズであれば、テンプレートの値を修正するだけで実現できます。

プログラム部分がパーツ化されている

Bootstrapには豊富なUI(ユーザーインターフェイス)が用意されています。これらは裏側でjQueryと呼ばれるJavaScriptで書かれたプログラムのパーツが動いています。
UIに特定の動作や判断をさせるにはJavaScriptが不可欠で、プログラムを書くことができないと実現できませんのですが、Bootstrapを利用することで、JavaScriptを知らなくても簡単に便利なUIを持つサイトを構築できます。

レスポンシブへの対応

スマートフォンやタブレット端末といったモバイル端末の普及により、パソコンでもモバイル端末でも見られるページを求められています。モバイル端末はパソコンの画面より小さいため、画面サイズをCSSで制御して行いますが、Bootstrapを利用すれば容易にレスポンシブなデザインを提供できます。

Bootstrapを使うメリット

椅子に腰掛けた女性

Bootstrapを使うメリットは2つです。

ノンプログラムで動きのあるデザインを構築できる

Bootstrapの特徴書きましたが、基本的なパーツやプログラムはすでに用意されています。これまではデザイナーしかできないこと、エンジニアしかできないことがありましたが、Bootstrapを利用すれば複雑な作業から回避できます。

もちろん、WEBサイトを構築するうえで最低限必要なHTMLやCSSの知識は身に着ける必要はありますが、デザイン経験のないエンジニアでも見栄えの良いサイトを作ることができます。

WEBサイト・WEBアプリケーションのデザイン制作工数が削減できる

誰でも、簡単に見栄えのあるデザインが作れるようになることは、制作工数の削減につながります。ビジネスにおいて、スピードは特に重要視されます。特にインターネットの世界では流れが速いため、開発の遅れによってチャンスを失う可能性が高くなります。

実際にデザイン案を提出する場合、幾通りのパターンを提供することになりますが、Bootstrapを利用すればデザイン案も早く作成できますし、手直しも早くできます。これは制作サイド、顧客サイド双方にメリットをもたらします。

Bootstrapのデメリットはある?

デメリット

Bootstrapにも悪い点はあるのでしょうか?良い点ばかりだけでなく、デメリットもチェックしてみましょう。

他のサイトとデザインが似てしまう

Bootstrapを使うデメリットは、他のサイトと同じようなデザインになってしまうことです。カスタマイズができるといっても、用意されているパーツを利用する以上、どうしてもどこかで見たことのあるサイトになりがちです。

Bootstrapの制約に縛られる

フレームワークを使用する以上、適用するためのルールは覚える必要はあります。でもデザインにとられる時間を考えたら仕方ないことです。

JavaScriptの干渉

ネット上にはBootstrap以外にも魅力的なUIが数多く提供されています。場合によってはそれらのUIを一緒にサイトに取り込みたいこともあるでしょう。そのような場合に気をつけなければならないのがお互いのUIで定義しているJavaScriptコードの干渉です。

日本語の表示に不具合がでる場合がある。

特にテーマを利用した場合ですが、ほとんどが海外向けのテーマのため、日本語を表示する場合に上手くいかないケースがあります。修正を加えれば上手くいくケースもありますが、内部構造を理解しないといけない場合もあります。気に入ったテーマが見つかっても、諦めざるを得ないこともあります。

更新が必要

Bootstrapにもバージョンがいくつか存在します。理由はベースとなるHTML、CSS、JavaScriptがバージョンアップすることにより、これまで正常に動かなくなる可能性があるからです。また対応するブラウザもバージョンにより異なる場合があります。
現在主流のブラウザでは正常に動作していても、将来的にBootstrapのバージョンもしくはブラウザのバージョンが新しくなることで、くずれる場合もあります。

もちろんこのことに関しては、Bootstrapに限った話ではないですが。古くなって動作しない場合にデザインを見直すという実質的な手間が発生します。

Bootstrapの種類

Bootstrapそのものについてはバージョンの違いはありますが、多くの種類があるわけではありません。以下でご紹介するものは。利用する環境や状況によって使い分けるという意味でご紹介します。

Twitter Bootstrap

bootstrap

Bootstrapは元々Twitter社にて開発、提供されていたためTwitter Bootstrapと呼ばれていましたが、Twitter社でメインで携わっていた開発者が独立したことを機に、オープンソースプロジェクトになりました。現在ではTwitterの名称が外れてBootstrapと呼ばれています。

Angular directive for Bootstrap

Angular directive for Bootstrap

AngularJSと呼ばれるグーグル社とコミュニティが開発しているJavaScriptのフレームワーク用に用意されたBootstrapです。AngularJSとBootstrapの両方にJapascriptが含まれているため、AngularJSをそのまま利用するとお互いが干渉しあいます。そのため、AngularJSを利用する場合はAngular directive for Bootstrapを使用する場合が多いです。

BootstrapWP

BootstrapWP

WordPress用のBootstrapです。サイト制作にWordPressを利用している人はこちらを利用するとよいでしょう。

Bootstrapの学習に役立つサイト

インターネット上にはBootstrapについて解説されたサイトがあります。ここではBootstrapの学習に役立つサイトを4つご紹介します。

Bootstrap入門 日本語版

Bootstrap入門 日本語版

本家Bootstrapの入門者向けページです。公式ですので表現が固いですが、必ず押さえておきたいサイトです。英語版ですがサンプルのダウンロードも可能です。実際にサンプルを動かしてどのような動きになるのか試してみたい人にはおすすめです。

公式のサンプルサイト:https://getbootstrap.com/docs/4.2/examples/

とほほのBootstrap4入門

とほほのBootstrap4入門

WEB制作の情報が豊富な、とほほさんの運営するBootstrap4入門サイトです。Bootstrap4については情報が少ないですので、Bootstrap3編を合わせて読むことをお勧めします。とほほさんのサイトにはその他に、HTML、CSS、JavaScriptに関する情報も掲載されています。

ドットインストール Bootstrap4入門

ドットインストール Bootstrap4入門

ユーザー登録が必要ですが、Bootstrapの使い方を無料動画が公開されています。Bootstrapによる開発に必要なツールのインストールから基本的なコーディングの方法まで解説を聞きながら学習できます。


Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者編】

Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者編】

TECHACADEMY magazineのオンライン講座をベースに入門者向けに解説したページです。本編は有料ですが、Bootstrapが全く初めてという方に参考になります。サンプルコードを掲載して、詳しく解説されています。

Bootstrapを学ぶための参考書籍

Bootstrapを学ぶのに参考になる書籍を4冊ご紹介します。参考書籍の良いところはインターネット環境がなくても、手元ですぐ調べられる点です。Bootstrapだけでなく、HTML、CSS、JavaScriptについても取り上げました。

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

Bootstrap4ファーストガイド

ファーストガイドと書かれているように、最初に読みたい一冊です。サンプルコードもダウンロードできるので、まず動かしてみたい方におすすめです。最新バージョンのBootstrap4向けに書かれています。

Bootstrap 4 フロントエンド開発の教科書

Bootstrapについて網羅的に解説している参考書です。CSSフレームワークの基本からカスタマイズ方法まで幅広く扱っています。
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

Bootstrapを理解する上で、HTMLとCSSの理解は重要です。この本は、単にHTML、CSSの解説だけではなくサイト制作に必要な知識も掲載されています。Bootstrapの解説書と併せておすすめの一冊です。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

こちらはHTML、CSSに加えてJavaScriptについて解説した入門書籍です。サイト制作というよりはWEBアプリケーションを開発する向けの一冊です。

Bootstrapのテーマサイト

Bootstrapを利用して一からデザインするのは大変という場合には、テーマテンプレートを利用する手もあります。テーマテンプレートは、公式サイトが提供しているものと、デザイナーやデザイン会社が独自提供しているテーマがありますので気に入ったデザインのテンプレートを探してみると良いでしょう。

テーマサイトをいくつかご紹介します。

公式サイト:Bootstrap Themes

Bootstrap Themes

本家のテーマサイトです。数はそれほど多くありません。ダッシュボードのテーマが多いです。利用に関しては有料です。

designstub

designstub

海外のBootstrapテーマサイトです。ランディングページ向けも豊富です。サイト内でデモページがありますので、利用する前にイメージの閲覧が出来ます。有料と無料のテーマが掲載されています。

Start bootstrap

designstub

こちらも海外のサイトです。Bootstrapで作成されたテーマやテンプレート、スニペットが紹介されています。管理者サイト向け、ビジネス向け、ブログ向けなどカテゴライズされています。こちらのサイトもプレビューでイメージが閲覧できます。

Honoka

Honoka

日本語向けのBootstrapテーマサイトです。Honokaを利用して作成されたサイトの事例集が公開されているので、参考になります。また、Honokaをベースとしたテーマサイトも3つ(Umi、Nico、Rin)紹介されています。

Material design for bootstrap4

Material design for bootstrap4

Bootstrapと一緒に使える素材を豊富に提供しているサイトです。英語ですがBootstrap、WordPress、AngularJS、他に向けたチュートリアルもあります。デザインにこだわりたいという方はこちらのサイトで、素材を探してみるのも良いでしょう。

まとめ

今回は超初心者の方に向けてBootstrapの基礎からメリット、デメリット、参考書籍まで取り上げました。

Bootstrapを利用するメリットは、誰でも魅力的なデザインのWEBサイトやWEBアプリケーションを提供できることです。また、短期間にWEBサイトやWEBアプリケーションを構築できることです。特にレスポンシブなデザインのサイトやアプリケーションを欠かせないツールです。

初心者でも手軽に学ぶことができますので、是非取り組んで見ることをおすすめします。

WEBでのお問い合わせはこちら