見やすいデザインが簡単に作れるフレームワークBootstrap

Bootstrapを使ったサンプル

Bootstrapを使ったサンプルページ

見やすくて使いやすいデザインや機能をウェブ上に用意できる便利なフレームワークの1つに「Bootstrap」があります。右図のように、ナビゲーションバー、サイドバー、メニュー、ボタン、マルチカラムレイアウトなどを活用したページが簡単に作れます。

指定のclass名を付加するだけで使える
各種の装飾は指定のclass名を加えることで使えます。例えば下記のように「リンクを作るa要素」に3つのclass名を付加すると、
<a class="btn btn-primary btn-lg" href="http://allabout.co.jp/">ボタン型リンク</a>
このリンクは、ボタン型(btn)に装飾され、ボタンの配色は濃い青色(btn-primary)で表示され、ボタンのサイズは大きめ(btn-lg)になります。


 
レスポンシブ・ウェブデザインに対応
標準でレスポンシブ・ウェブデザインに対応

標準でレスポンシブ・ウェブデザインに対応

Bootstrapはレスポンシブ・ウェブデザインに標準で対応しているため、PC・モバイル両対応のウェブデザインを簡単に作ることもできます。例えば、
  • PCなどの広い画面で閲覧されたらメニュー項目を全部表示
  • モバイル端末などの狭い画面で閲覧されたら、右図の赤丸部分のようにメニューバーを畳んでおき、メニューボタンがタップされた際にメニュー項目を開く
……というような機能を簡単に用意できます。


 
今回は、このBootstrapで実現できるデザインや機能の概要をご紹介致します。具体的な導入方法を解説した記事(次のページで紹介)も用意していますので、併せてご参照下さい。

ボタン型の押しやすいリンクが簡単に作れる

様々な大きさ・色のボタン型リンクが作れる。立体的に見せたりフラットに見せたり、アイコンを付加することも可能。

様々な大きさ・色のボタン型リンクが作れる。立体的に見せたりフラットに見せたり、アイコンを付加することも可能。

Bootstrapを使うと、リンクを右図のようなボタン型に装飾することも簡単です。文字だけのリンクよりも面積を広くできるため、押しやすいリンクになります。

ボタンは大きさや配色を数種類から選べる上、右図のようにアイコンを組み合わせて表示することもできます。Bootstrap3の標準ではボタンの表面はフラットな配色になりますが、オプションのCSSを加えることで立体的な配色でも表示できます。


 
複数のボタンを縦横に結合したり、ドロップダウンメニュー付きのボタンを作ったりもできる。

複数のボタンを縦横に結合したり、ドロップダウンメニュー付きのボタンを作ったりもできる。

Bootstrapで作るボタンは「シンプルなリンク」以外にも、複数のリンクをまとめてドロップダウンメニューの形にしたり、さらに項目間に境界線を加えて「リンク兼ドロップダウンメニュー」の形にしたりもできます。複数のボタンを連結して、リンクの関連を表現することもできます。

このようなボタン型に装飾できるのはリンクだけではありません。チェックボックスやラジオボタンのように機能する「押し下げた状態」を維持できるボタンを作ることもできます。


 

メニューやリストが簡単に作れる

サイドメニューなどにも活用できる「リストグループ」関連機能の使用例

サイドメニューなどにも活用できる「リストグループ」関連機能の使用例

Bootstrapには複数のリスト項目を結合して見やすく表示する「リストグループ」機能があります。右図のようにサイドメニューなどとして活用すると便利です。

リスト項目には文字以外にもアイコンを加えて分かりやすくできますし、バッヂ(右端にある丸囲みの数字)を加えて「その項目に該当する個数」を示すこともできます。リスト項目をリンクにすれば、余白部分も含めた項目全体がクリック可能になるため、使いやすいナビゲーションメニューになるでしょう。


 

段組構造が簡単に作れるグリッドレイアウト機能がある

3段組と4段組を縦に並べた例

3段組と4段組を縦に並べた例

2段組や3段組などの段組構造(マルチカラムレイアウト)を自力で作るのはなかなか面倒です。Bootstrapには段組構造を簡単に作れるグリッドレイアウト機能が用意されているため、右図のように3段組や4段組を作ることも簡単です。ある段の中をさらに複数の段に分割するような複雑な構造でも問題なく作れます。


 
画面(ブラウザの幅)に応じて段組構造を変化させられる

画面(ブラウザの幅)に応じて段組構造を変化させられる

Bootstrapはレスポンシブ・ウェブデザインに対応しているため、広い画面では4段組、狭い画面では2段組、さらに狭い画面では段組を解除する……といった柔軟な段組構造を作ることもできます。この仕様は、PC・モバイル両対応のウェブサイトを作成する際に、特に重宝するでしょう。


 

表(テーブル)を美しく見せられる

表の表示も見やすく美しく

表(テーブル)の表示も見やすく美しくできる

ウェブ上で表組み(テーブル)を表示する際は、見やすく装飾するのに手間が掛かります。Bootstrapを使えば、読みやすい余白を確保した上で見やすい罫線を引く装飾が簡単に実現できます。

すべてのセルに線を引くだけでなく、縦線を省略してシンプルにしたり、1行おきに背景色を付けて読みやすくしたり、見出しと本体との境界だけを太線にしたりなど、見やすく美しく装飾するスタイルが用意されています。


 

タブを使った切り替え機能が簡単に作れる

タブを作った例

タブを使ってコンテンツを切り替える機能も簡単に用意できる

コンテンツが多い場合や、カテゴリ別に分けて見やすくしたい場面では、右図のようなタブ機能が便利です。このようなタブも簡単に作れます。

このタブ機能を自力で作ろうとすると、タブらしく見える線をCSSなどで引くのが難しい上に、コンテンツを切り替えるスクリプトを書くのが大変です。Bootstrapを使えば、それらの面倒さは一切なく、class名やid名などを付加するだけで簡単に実現できます。


 

ナビゲーションバー(メニューバー)が簡単に作れる

上端や下端に常時固定されるナビゲーションバーを作ることもできる

上端や下端に常時固定されるナビゲーションバーを作ることもできる

Bootstrapでは、ページ上部に固定表示するナビゲーションバーも簡単に作れます。メニュー項目としてリンクを自由に追加できるだけでなく、左上にブランドイメージを掲載したり、各項目をドロップダウンメニューの形にしたり、検索窓を加えたりなど、ナビゲーションに必要な様々な機能が簡単に加えられます。

ナビゲーションバーのデザインでは、「リンク項目は左寄せで表示したいが、検索窓は右寄せで表示したい」という場合もあるでしょう。そのような左寄せと右寄せを混在させることも簡単です。


 
ナビゲーション項目は、狭い画面では畳まれて表示される

ナビゲーション項目は、狭い画面では畳まれてハンバーガーボタンが表示される

このナビゲーションバーは、テンプレートHTML通りに記述しておけば、何も考えなくてもレスポンシブ・ウェブデザインになります。モバイル端末などの画面が狭い環境で閲覧された際には、メニュー項目が自動で折りたたまれた上でハンバーガーボタンが表示されます。閲覧者はそれをクリック(タップ)することで、メニュー項目を展開できます。


 

入力フォームが見やすく便利に作れる

様々な入力欄が作れる

様々な入力欄を見やすく装飾できる

各種入力フォームは特に、見やすさが使いやすさに影響します。Bootstrapでは各種入力欄を大きく見やすく装飾できるほか、右図のように説明書きと入力欄をくっつけて分かりやすくしたり、ボタンと入力欄をくっつけて操作を分かりやすくしたりできます。

フォーカスのある入力欄には、カラーのぼかしが枠線に加わるなど、どこが入力可能な状態なのかも分かりやすくなります。


 

ツールチップや吹き出しのポップアップなど、他にもたくさん

吹き出しを表示する機能も簡単

吹き出しを表示する機能も簡単

上記でご紹介した以外にも、右図のように「吹き出し」を使ってヘルプを表示したり、ツールチップを表示したり、モーダルダイアログ(ボタンをクリックするまで他の操作をできなくするメッセージボックス)を表示したり、たくさんの便利な機能が用意されています。

Bootstrapを活用すると、自身のウェブページ上にこのようなインターフェイスを簡単に掲載できます。


 
それでは次のページで、Bootstrapの導入方法やサンプルページをご紹介致します