読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

BootstrapでレスポンシブWeb

こんにちは。出石です。
最近の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-->

タブレット以上[col-sm-12]で1列表示とし、スマートフォンでは非表示[hidden-xs]に指定します。

レイアウトの確認はそれぞれの実機でもちろんできますが、PCブラウザでもサイズを調整すれば意図したレイアウトになるかを確認できます。
jsdo.itでブラウザ表示する事で同じ表現が確認できると思います。

PCサイトレイアウト
f:id:IntelligentTechnology:20140728163822p:plain

タブレットレイアウト
f:id:IntelligentTechnology:20140728163833p:plain

スマートフォンレイアウト
f:id:IntelligentTechnology:20140728163841p:plain

今回はレスポンシブデザインを試すためBootstrapのグリッドデザインのみ使ってみましたが、Bootstrapはレイアウト以外のデザイン部分(見た目、枠組み)がメインなので、機会があればそちらも試していきたいと思います。