サイト制作

BootstrapでレスポンシブWebデザインを簡単に作る方法

更新日:2015/05/25 公開日:2013/11/12

西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

こんにちは。All About ホームページ作成ガイドの西村文宏です。
ウェブ上で広く採用されつつある「レスポンシブWebデザイン」という名称を耳にしたことはあるでしょうか?

スタイルシートを工夫することで、どんな環境でも(PCでもタブレットでもスマートフォンでも)、単一のHTMLで閲覧できるようにするデザインです。端末別に専用サイトを用意する必要がなくなるため、ウェブ製作にかかる労力を大きく減らせます。

この「レスポンシブWebデザイン」を採用したウェブページが簡単に作れるフレームワーク(=JavaScriptやCSSのセット)の1つとして、「Bootstrap」(ブートストラップ)があります。Twitter社が開発したフレームワークで、無料で利用できます。

以前は、「レスポンシブWebデザイン」への対応はオプションとして提供されていましたが、最新のVer 3.0からは標準で対応するようになりました。

今回は、この「Bootstrap」を使って、「レスポンシブWebデザイン」に対応したウェブページを作る方法をご紹介いたします。

この「Bootstrap」を利用するためには、「Bootstrap」そのものを構成する各ファイルの他に、「jQuery」というライブラリが必須です。

しかし、特にそれらのファイルを自力で準備する必要はありません。ウェブ上に既に公開されている各ファイルを、HTML内から読み込むように記述すれば良いだけだからです。なお、どうしても自サイト上に個別にアップロードして使いたい場合には、以下のURLからダウンロードできます。

  • ※上記は英語のサイトです。

Bootstrapを利用するためには、HTMLのhead要素内(〜の間)に、以下の3行を記述します。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" 
rel="stylesheet" />

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="text/javascript" 
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js">
</script>

1行目は「Bootstrap」のCSSを、2行目は「jQuery」のスクリプトを、3行目は「Bootstrap」のスクリプトを読み込んでいます。 上記の3行を記述するだけで、「Bootstrap」を使えるようになります。

Bootstrapには、あらかじめ用意されている様々なデザインを使うための、決まったclass名があります。

例えば、アラートを表示するボックスを作るための「alert-warning」や、リンクをボタンのように見せる「btn-primary」など、たくさんのclass名が用意されています。これらは、以下のようにclass属性を使って記述するだけで使えます。

<p class="alert alert-warning">アラートの表示ボックス

<a class="btn btn-primary" href="/">ボタン型のリンク

Bootstrapでは、上記ように「規定のclass名」をHTMLに追記することで、様々なデザインを適用できます。
この規定の名称の中には、「レスポンシブWebデザイン」を作るためのclass名も用意されています。

こちらのサンプルページをご覧ください。

このサンプルページには、複数のボックスがあり、段組を構成しています。
PC・タブレット・スマートフォンで閲覧してみると、それぞれの環境ごとに表示のされ方が異なることが分かります。

正確には、「端末の機種」で変わるのではなく、「画面サイズ」で変わります。
ですから、PCからのアクセスであっても、極端に狭いウインドウで見れば、スマートフォン用のデザインで見えます。

ブラウザのウインドウの横幅を様々に変化させて、表示を確認してみてください。
このように、「閲覧者が利用している描画領域の横幅」に応じて、適切にレイアウトを変化させると、「レスポンシブWebデザイン」になります。

具体的にどのように記述すれば良いかは、次にご紹介いたします。

SHARE
西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2015/05/25更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら