Webデザイン初心者は見ておきたい!Bootstrapの使い方を徹底解説!



Webデザイン初心者は見ておきたい!Bootstrapの使い方を徹底解説!

IT業界を目指している皆さん、デザインに自信はありますか?「デザインは全くの初心者」「デザインセンスには自信があるけどWebページとなると上手く表現できない」「CSSはイマイチ苦手」という方、結構いらっしゃるのではないでしょうか?

そんな方に試していただきたいのがBootstrap。HTMLとCSSの基礎知識があれば、デザイン性に富んだWebページを簡単に作成することができる優れモノのCSSフレームワークです。有名なだけに今更聞けない、Bootstrapの基本的な使い方をご紹介します。

image

目次
  1. Bootstrapの特徴
  2. 洗練されたデザインを簡単に実現
  3. レスポンシブデザインでどの画面にも適正に表示
  4. テンプレートやプラグインで簡単カスタマイズ
  5. Bootstrapのメリット・デメリット
  6. メリット
  7. デメリット
  8. Bootstrapの基本的な使い方
  9. ダウンロード~HelloWorldを表示させるまで
  10. 要素のデザイン例
  11. テンプレートやプラグインの例
  12. テンプレート
  13. プラグインの例
  14. まとめとリンク

Bootstrapの特徴

Bootstrap_Top

Bootstrapは、CSSのスタイルやレイアウトがある程度定義されたファイルの集まりのようなもの。CSSフレームワークと呼ばれています。CSSファイルのスタイル定義を最初から作成せずに済み、デザインが苦手な人やそれほどCSSに詳しくない人でも比較的簡単に、洗練されたWebページを作成できるのが大きな特徴です。

洗練されたデザインを簡単に実現

CSSファイルが既に用意されているので、Webサイト開発者はHTMLファイルを作成するだけで、見栄えのするデザインを使用することができます。

レスポンシブデザインでどの画面にも適正に表示

レスポンシブデザイン(レスポンシブWebデザイン)とは、PCやスマートフォン、タブレットといった様々な種類の機器や画面サイズに、単一のファイルで対応するWebデザイン手法のことをいいます。他の手法としてはWebサイトを様々な機器で適正に表示させるためにHTMLやCSSをそれぞれ複数用意し、アクセスした機器によって振り分けるものもありますが、これは更新作業にかなりの時間と労力が必要となります。レスポンシブデザインではデザインの自由度が若干下がりますが、単一のファイルへの対応で済む分、更新時間の短縮、更新漏れを防ぐなど、後々のメンテナンスの労力を省くことができます。

テンプレートやプラグインで簡単カスタマイズ

Bootstrapをベースに個性あるデザインや流行の機能を付加したものがテンプレート。ボタンデザインや画面操作など、標準で搭載されている機能を拡張したものや新機能を追加するのがプラグインです。Web上に数多く公開されているので、ページをリニューアルしたいときも簡単に機能やデザインの変更/追加が可能です。

Bootstrapのメリット・デメリット

Bootstrapsample

メリット

  • デザインやCSSの知識に自信がなくてもある程度使える
  • 流行のデザインや機能を早く適用できる
  • 打ち合わせの早い段階でサイトイメージが出来上がり、仕様齟齬や手戻りを防げる

最低でもHTMLの知識があれば作成できる上、流行のデザインや機能をいち早く取り入れられる点はデザインが苦手なWeb開発者にとって大きな魅力です。(もちろんCSSの知識がある方がより細かい調整ができます。)また開発手法にもよりますが、実際のサイトイメージを見ながらの詳細な設計作業ができ、かなり早い段階からクライアントや開発チームの意思疎通を図ることができます。仕様齟齬や開発の手戻り防止にも期待できます。

デメリット

  • バージョンアップが早いので常に最新情報をチェックする必要がある
  • 他のサイトとデザインがかぶったり、見る人が見れば「Bootstrapで作成した」と思われてしまう可能性がある
  • デザインの自由度が下がる為、細部にこだわる場合には予算やリソースの都合上、Bootstrapを使わず自作する方が良いケースもある

Bootstrapの流行の早さが逆にデメリットに。Bootstrapのバージョンアップが順次行われているものの下位互換性がそれほどない為、既存サイトに適用するには十分な確認の上で行う必要があります。また、ここ数年で広く利用されるようになってきており、Bootstrapで作成したと一目でわかるという人もいるほどなので、ある程度オリジナリティの部分がないとプロのデザイナーとしての矜持を問われるかもしれません。そして、早く作成できるというメリットを生かす為には、設計段階での作業ボリュームの見極めやクライアントの意識決定を促す調整も重要になってきます。

Bootstrapの基本的な使い方

Bootstrapの簡単な使い方を、画像を交えてご紹介します。

ダウンロード~HelloWorldを表示させるまで


1. 公式サイトにて「Download Bootstrap」をクリック

download1

2.Bootstrapをダウンロードする(このページは後で使うので、閉じずにこのままで download2

3.ダウンロードしたファイルを解凍し、フォルダに新規ファイル「index.html」を作成する download4

4.先ほどのダウンロードページの下部にサンプルコードがあるので、これをコピー(コード右上のボタンでコピー可能) download3

5.index.htmlにコードを貼り付け、保存 download5

6.ブラウザでindex.htmlを開くと… download6

表示されました。

image

要素のデザイン例

HelloWorldを表示するだけだと寂しい感じになってしまいましたが、ボタンやリストなど要素にはシンプルながら使い勝手の良いデザインが施されています。

例1)ボタンelements1

例2)進捗バーelements2

例3)ナビゲーションメニュー elements3

テンプレートやプラグインの例

ぱっと目を引くデザインを備えたテンプレートや流行をいち早く取り入れたプラグインは、とても紹介しきれないほどここ数年で増加しています。以下はほんの一部です。

テンプレート

多くは有志によって無料で公開されています。中にはBootstrapで作ったとは思えないものまであります。

例1)xtendifyよりColorful Flat Templete1

例2)StartBootstrapよりLanding Page template2

例3)Bootplusより

template3

プラグインの例

一から作ると大変な労力が必要になるプラグインも、無料のものが多数公開されています。

例1)Social Buttons for Bootstrapplugin1

TwitterやFacebookなどSNSボタン用のプラグイン。

例2)Datepicker plugin2

カレンダー付きの日付表示。

例3)Bootstrap Image Gallery

plugin

横にスライドする画像集。

まとめとリンク

以上簡単にご紹介しました。「あれ、このデザインどこかで見たと思ったら、Bootstrapだったのか!」なんて心当たりがあったのでは?お気に入りのテンプレートを探してみるのも良いですし、個性ある機能を作りたい人やデザインに悩む人のインスピレーションにも使えます。これを機にCSSを学び直してみるのも良いかもしれません。ご自分のお仕事にメリットがあると思われた方はぜひ、下記リンクからダウンロードして試してみてください。

<リンク>
公式サイト
公式ブログ

image

関連記事

murase miho
この記事を書いた人
murase miho
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp