- 更新日: 2018年11月15日
- 公開日: 2015年08月03日
Webデザイン初心者は見ておきたい!Bootstrapの使い方を徹底解説!
IT業界を目指している皆さん、デザインに自信はありますか?「デザインは全くの初心者」「デザインセンスには自信があるけどWebページとなると上手く表現できない」「CSSはイマイチ苦手」という方、結構いらっしゃるのではないでしょうか?
そんな方に試していただきたいのがBootstrap。HTMLとCSSの基礎知識があれば、デザイン性に富んだWebページを簡単に作成することができる優れモノのCSSフレームワークです。有名なだけに今更聞けない、Bootstrapの基本的な使い方をご紹介します。
Bootstrapの特徴
Bootstrapは、CSSのスタイルやレイアウトがある程度定義されたファイルの集まりのようなもの。CSSフレームワークと呼ばれています。CSSファイルのスタイル定義を最初から作成せずに済み、デザインが苦手な人やそれほどCSSに詳しくない人でも比較的簡単に、洗練されたWebページを作成できるのが大きな特徴です。
洗練されたデザインを簡単に実現
CSSファイルが既に用意されているので、Webサイト開発者はHTMLファイルを作成するだけで、見栄えのするデザインを使用することができます。
レスポンシブデザインでどの画面にも適正に表示
レスポンシブデザイン(レスポンシブWebデザイン)とは、PCやスマートフォン、タブレットといった様々な種類の機器や画面サイズに、単一のファイルで対応するWebデザイン手法のことをいいます。他の手法としてはWebサイトを様々な機器で適正に表示させるためにHTMLやCSSをそれぞれ複数用意し、アクセスした機器によって振り分けるものもありますが、これは更新作業にかなりの時間と労力が必要となります。レスポンシブデザインではデザインの自由度が若干下がりますが、単一のファイルへの対応で済む分、更新時間の短縮、更新漏れを防ぐなど、後々のメンテナンスの労力を省くことができます。
テンプレートやプラグインで簡単カスタマイズ
Bootstrapをベースに個性あるデザインや流行の機能を付加したものがテンプレート。ボタンデザインや画面操作など、標準で搭載されている機能を拡張したものや新機能を追加するのがプラグインです。Web上に数多く公開されているので、ページをリニューアルしたいときも簡単に機能やデザインの変更/追加が可能です。
お探しの記事は見つかりませんでした
Bootstrapのメリット・デメリット
メリット
- デザインやCSSの知識に自信がなくてもある程度使える
- 流行のデザインや機能を早く適用できる
- 打ち合わせの早い段階でサイトイメージが出来上がり、仕様齟齬や手戻りを防げる
最低でもHTMLの知識があれば作成できる上、流行のデザインや機能をいち早く取り入れられる点はデザインが苦手なWeb開発者にとって大きな魅力です。(もちろんCSSの知識がある方がより細かい調整ができます。)また開発手法にもよりますが、実際のサイトイメージを見ながらの詳細な設計作業ができ、かなり早い段階からクライアントや開発チームの意思疎通を図ることができます。仕様齟齬や開発の手戻り防止にも期待できます。
デメリット
- バージョンアップが早いので常に最新情報をチェックする必要がある
- 他のサイトとデザインがかぶったり、見る人が見れば「Bootstrapで作成した」と思われてしまう可能性がある
- デザインの自由度が下がる為、細部にこだわる場合には予算やリソースの都合上、Bootstrapを使わず自作する方が良いケースもある
Bootstrapの流行の早さが逆にデメリットに。Bootstrapのバージョンアップが順次行われているものの下位互換性がそれほどない為、既存サイトに適用するには十分な確認の上で行う必要があります。また、ここ数年で広く利用されるようになってきており、Bootstrapで作成したと一目でわかるという人もいるほどなので、ある程度オリジナリティの部分がないとプロのデザイナーとしての矜持を問われるかもしれません。そして、早く作成できるというメリットを生かす為には、設計段階での作業ボリュームの見極めやクライアントの意識決定を促す調整も重要になってきます。
お探しの記事は見つかりませんでした
Bootstrapの基本的な使い方
Bootstrapの簡単な使い方を、画像を交えてご紹介します。
ダウンロード~HelloWorldを表示させるまで
1. 公式サイトにて「Download Bootstrap」をクリック
2.Bootstrapをダウンロードする(このページは後で使うので、閉じずにこのままで
3.ダウンロードしたファイルを解凍し、フォルダに新規ファイル「index.html」を作成する
4.先ほどのダウンロードページの下部にサンプルコードがあるので、これをコピー(コード右上のボタンでコピー可能)
表示されました。
要素のデザイン例
HelloWorldを表示するだけだと寂しい感じになってしまいましたが、ボタンやリストなど要素にはシンプルながら使い勝手の良いデザインが施されています。
お探しの記事は見つかりませんでした
テンプレートやプラグインの例
ぱっと目を引くデザインを備えたテンプレートや流行をいち早く取り入れたプラグインは、とても紹介しきれないほどここ数年で増加しています。以下はほんの一部です。
テンプレート
多くは有志によって無料で公開されています。中にはBootstrapで作ったとは思えないものまであります。
例1)xtendifyよりColorful Flat
例2)StartBootstrapよりLanding Page
例3)Bootplusより
プラグインの例
一から作ると大変な労力が必要になるプラグインも、無料のものが多数公開されています。
例1)Social Buttons for Bootstrap
TwitterやFacebookなどSNSボタン用のプラグイン。
例2)Datepicker
カレンダー付きの日付表示。
横にスライドする画像集。
\一流デザイナーのスキルが身に付く/
まとめとリンク
以上簡単にご紹介しました。「あれ、このデザインどこかで見たと思ったら、Bootstrapだったのか!」なんて心当たりがあったのでは?お気に入りのテンプレートを探してみるのも良いですし、個性ある機能を作りたい人やデザインに悩む人のインスピレーションにも使えます。これを機にCSSを学び直してみるのも良いかもしれません。ご自分のお仕事にメリットがあると思われた方はぜひ、下記リンクからダウンロードして試してみてください。
- この記事を書いた人
- murase miho