BootstrapでレスポンシブWeb - Intelligent Technology's Technical Blog

こんにちは。出石です。
最近のWeb制作では、PCのみならずスマートフォンやタブレットを意識する事が増えています。
サイト自体を別にするという事もあったりしますが、今回はCSS フレームワークの「Bootstrap」を使ったレスポンシブデザインを試してみました。

準備

Bootstrapは現在3.2.0が最新です。
使い方は一式を読み込むだけです。
ここでは簡単にCDNから読み込みます。(もちろんダウンロードして自サーバから読み込んでも可能です)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML、動作確認は下記jsdo.itで行えます。
動作確認は左上の最大化ボタンで表示後「play」ボタンで確認できます。

対応ブラウザは公式で説明があり主要なブラウザは抑えれています。
が、IEについては機能にもよりますが9以上が必要そうです。
今回はChrome[バージョン 35.0.1916.153]でのみ検証しました。

Bootstrapでのレスポンシブデザイン

BootstrapではレスポンシブWebを実現する為にグリッドデザインが用意されています。
グリッドデザインでは解像度に関わらず、列(画面)を12のグリッドと見立てて各エレメントを配置し、デバイス(解像度)によってエレメントの配置グリッドを調整する事ができます。
グリッドの指定はエレメントのclass属性に「col-xs-6」、「col-sm-3」等で指定していきます。

デバイスとclassのパターン

デバイス	解像度	class
大画面PC	1200px以上	col-lg
PC	992px～1199px	col-md
タブレット	768px～991px	col-sm
スマートフォン	768px未満	col-xs

今回は、スマートフォン・タブレット・PCでレイアウトが変わるようBootstrapを指定します。

まずはヘッダーの下にあるメニューリンクをスマートフォンでは縦並び、タブレットでは縦横2×2、PCでは横並びになるよう指定します。

<!--headerNav-->
<div class="container">
   <div class="row">
      <a href="#"><div class="col-xs-12 col-sm-6 col-md-3 headerBtn">Menu1</div></a>
      <a href="#"><div class="col-xs-12 col-sm-6 col-md-3 headerBtn">Menu2</div></a>
      <a href="#"><div class="col-xs-12 col-sm-6 col-md-3 headerBtn">Menu3</div></a>
      <a href="#"><div class="col-xs-12 col-sm-6 col-md-3 headerBtn">Menu4</div></a>
   </div>
</div>
<!--//headerNav-->

スマートフォン[col-xs-12]では12/12グリッドで1列に指定します。
タブレット[col-sm-6]は6/12グリッドで横2列に指定します。12グリッドを超えた分は改行されて次の2列に配置されます。
PC以上[col-md-3]は3/12グリッドで4列に配置するレイアウトとしています。

次にコンテンツ部分もスマートフォン、タブレット、PCでレイアウトを変えます。
※コンテンツの説明欄はwikiより転載しています

<div class="col-xs-12 col-sm-6 col-md-3">
   <div class="box clearfix">
      <div class="col-xs-6 col-sm-12">
         <img src="http://jsrun.it/assets/a/P/s/3/aPs3C.jpg" alt="" class="img-responsive" style="width: 100%;" />
      </div>
      <div class="col-xs-6 col-sm-12">アジサイ（紫陽花、学名 Hydrangea macrophylla）は、アジサイ科アジサイ属の落葉低木の一種である。広義には「アジサイ」の名はアジサイ属植物の一部の総称でもある。</div>
   </div>
</div>

コンテンツ枠をスマートフォン[col-xs-12]では1列表示、タブレット[col-sm-6]では2列表示、PC以上[col-md-3]では4列表示とし、イメージ・説明部分はスマートフォン[col-xs-6]で2列表示、タブレット以上[col-sm-12]で1列表示としています。

最後にヘッダー、フッターをスマートフォンでは非表示の指定にします。

<!--header-->
<div class="header">
   <div class="container">
      <div class="row">
         <div class="col-sm-12 hidden-xs">
            <span class="guide"> Header </span>
         </div>
      </div>
   </div>
</div>
<!--//header-->