主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

BootstrapでWebサイトの対応デバイスを広げる

                
tags: bootstrap
 スマフォやタブレットの普及によって、Webサイトを見るためのデバイスが増え、Webサイトの製作側もそれらに対応する必要がある。Googleは検索の表示順位にモバイルデバイス対応をしているかを加味すると発表したようだ。
 それでもわざわざ高解像度をもったデバイスと低解像度のデバイスを分けてサイトを用意するのは手間である。そこで使う手の一つがBootstrapによるレスポンシブWebデザイン。一つのHTMLで低解像度にも高解像度にも対応できるようにしてしまおうと。


 たとえばこのブログでは、ページ上部にタイトルと概要を書いたヘッダー、その下が左右にわかれていて、左側がブログ記事本文、右側がサイドバーとして簡単な案内を書いてある。高解像デバイスには今表示されているこの状態でいいとして、低解像デバイスで見るには、記事本文とサイドバーが横並びになっていると表示領域が足りないだろう。そこで低解像デバイスではサイドバーを横でなく、記事本文の下にまわせばよさそう。そういうときに使えるのがBootstrapのグリッドシステム。
 参考:http://www.atmarkit.co.jp/ait/articles/1403/19/news034_2.html
 グリッドシステムは横幅最大値を12として、要素にクラスとして”col-{prefix}-{n}”と書くことでデバイスの水平解像度ごとにどの程度横幅を取るかを設定できる。”col-lg-6”と書けばlgはlargeを表すので高解像デバイスで、nの最大が12のところ6なので、隣にもう一つ同じ要素を置ける。さらに一つ置こうとすればカラムが12からあふれることになるので表示位置が改行される。
 以下のように書けば、低解像度デバイスではサイドバーが下にまわってくれる(つまりサイドバーではなくなるが)。下にデモファイルもつけたのでブラウザで開いて、ブラウザの横幅を変化させてみたり。
<div class="container">
<section class="row">
<div id ="main" class="col-md-8 col-sm-12">main</div>
<div id="sidebar" class="col-md-4 col-sm-12">sidebar</div>
</section>
</div>

デモ

 上記のグリッドシステムを使って、PC向けに横に並べて表示していた要素を、うまく幅調節したり下部にまわしたりして画面内に収められれば、それで低解像度向けの対策がおおよそ済んでしまいそうなWebサイトはぼちぼち見かける(実際はタップするためにリンク要素間に間を取るようにするなども必要だが)。まあとりあえず解像度による要素配置を検討するときにグリッドシステムは有用ということ。



 Bootstrapでもう一つ使えるようにしておきたいのが「navbar」。
 会社のWebページを見るとおおよそが、ページ上部に会社名と案内メニューを並べている。
Company | About | うんたら | かんたら
というように。会社以外でもこういう上部に案内メニューを付けるというテンプレートを採用するWebサイトは多い。こういうメニューを作れるのがnavbar。
 低解像度デバイスで上記のような案内メニューをつける場合、多くはメニューの要素ごとに改行することで画面に収めている。
Company |
About |
うんたら |
かんたら
 このやり方を採用するのもありだが、案内メニューの要素が多いとコンテンツにたどりつくまでのスクロール量が増えて手間。訪問者に嫌われるかも。だから低解像度デバイスではトグルメニューとして表示できるように準備はしておくが、デフォルトでは表示しないという方法もありえる。
参考:http://codezine.jp/article/detail/8182?p=2
デモ
<nav class="navbar navbar-default" role="navigation">
<div class="container">

<!-- 1.モバイル表示用の省略メニュー -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>

<!-- 2.ナビゲーションメニュー -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Content1</a></li>
<li><a href="#">Content2</a></li>
</ul>
</div>
</div>
</nav>



 とりあえず上記に挙げたグリッドシステム、navbarを理解しておけば、コンテンツをどう低解像度端末と高解像度端末に収めるか考える助けになるだろう。それが済んだらあとは実際のコンテンツの見易さやタップのしやすさなどを考えていけば低解像度端末と高解像度端末の両対応に近づいていける。
            

コメントの投稿

非公開コメント

プロフィール

Matoba

Author:Matoba

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。