こんにちは。All About ホームページ作成ガイドの西村文宏です。
ウェブ上で広く採用されつつある「レスポンシブWebデザイン」という名称を耳にしたことはあるでしょうか？
スタイルシートを工夫することで、どんな環境でも（PCでもタブレットでもスマートフォンでも）、単一のHTMLで閲覧できるようにするデザインです。端末別に専用サイトを用意する必要がなくなるため、ウェブ製作にかかる労力を大きく減らせます。
この「レスポンシブWebデザイン」を採用したウェブページが簡単に作れるフレームワーク（＝JavaScriptやCSSのセット）の1つとして、「Bootstrap」（ブートストラップ）があります。Twitter社が開発したフレームワークで、無料で利用できます。
以前は、「レスポンシブWebデザイン」への対応はオプションとして提供されていましたが、最新のVer 3.0からは標準で対応するようになりました。
今回は、この「Bootstrap」を使って、「レスポンシブWebデザイン」に対応したウェブページを作る方法をご紹介いたします。
事前の準備は不要
この「Bootstrap」を利用するためには、「Bootstrap」そのものを構成する各ファイルの他に、「jQuery」というライブラリが必須です。
しかし、特にそれらのファイルを自力で準備する必要はありません。ウェブ上に既に公開されている各ファイルを、HTML内から読み込むように記述すれば良いだけだからです。なお、どうしても自サイト上に個別にアップロードして使いたい場合には、以下のURLからダウンロードできます。
- ［参考URL］Bootstrap（ブートストラップ）公式サイト
- ［参考URL］jQuery 公式サイト
- ※上記は英語のサイトです。
各ファイルを読み込む
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を利用したHTMLの記述方法
Bootstrapには、あらかじめ用意されている様々なデザインを使うための、決まったclass名があります。
例えば、アラートを表示するボックスを作るための「alert-warning」や、リンクをボタンのように見せる「btn-primary」など、たくさんのclass名が用意されています。これらは、以下のようにclass属性を使って記述するだけで使えます。
<p class="alert alert-warning">アラートの表示ボックス <a class="btn btn-primary" href="/">ボタン型のリンク
Bootstrapでは、上記ように「規定のclass名」をHTMLに追記することで、様々なデザインを適用できます。
この規定の名称の中には、「レスポンシブWebデザイン」を作るためのclass名も用意されています。
Bootstrapで、レスポンシブWebデザインを作る
こちらのサンプルページをご覧ください。
このサンプルページには、複数のボックスがあり、段組を構成しています。
PC・タブレット・スマートフォンで閲覧してみると、それぞれの環境ごとに表示のされ方が異なることが分かります。
正確には、「端末の機種」で変わるのではなく、「画面サイズ」で変わります。
ですから、PCからのアクセスであっても、極端に狭いウインドウで見れば、スマートフォン用のデザインで見えます。
ブラウザのウインドウの横幅を様々に変化させて、表示を確認してみてください。
このように、「閲覧者が利用している描画領域の横幅」に応じて、適切にレイアウトを変化させると、「レスポンシブWebデザイン」になります。
具体的にどのように記述すれば良いかは、次にご紹介いたします。
ログインしてご覧ください。
ご注意ください
- 本記事の内容は、2013/11/12更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら