レスポンシブデザインでブログをスマートホン対応にする　忍者ブログでTwitter Bootstrapを使う（３）

前回の続き。
このブログは、読者の1/7くらいがスマホで閲覧されている。
まだこの比率はそれほど大きくはないが、今後もっと上がっていくことだろう。
このブログは忍者ブログを使っているが、忍者ブログのスマートホン用テンプレートは使わず、メインのテンプレートでスマホに対応できるように作ってある。
忍者ブログ＋twitter bootstrapでスマホ対応テンプレートを作る場合のポイントをメモしておく。

レスポンシブ・デザインとは

スマートホンのブラウザは、PCとほぼ同じ表示能力を持っている。
しかし、スマホの画面が小さいので、マルチカラムで横1000ピクセルを前提としたPC向けデザインのページを表示するには向いていない。
また、スマートホンといっても画面の解像度は様々であり、画面も縦向きではなく横向きで使う可能性もあるし、さらにスマホだけではなくタブレットもある。
そういった多様なデバイスに対応するWebデザインとして、レスポンシブデザインというコンセプトがある。
レスポンシブデザインとは、画面の解像度の違いやブラウザのウインドウサイズの変更に追随し、表示の仕方を変えてくれるようなデザインだ。
つまり、スマホ専用のテンプレートを作らなくても、メインのテンプレートがレスポンシブデザインになっていれば、そのままスマホにも対応していることになる。
もちろん、忍者ブログにもとからあるスマートホン用テンプレートを使ってもよいのだが、現時点では忍者ブログのスマホ用テンプレートはカスタマイズできないのが欠点だ。
Twitter Bootstrapはレスポンシブデザインも考慮されている。
Twitter Bootstrapのページ自体、レスポンシブデザインになっている。
従って、基本的にbootstrapを使ったテンプレートのスマホ対応はそれほど難しくはないが、それでもいくつか押さえておいたほうがよいポイントがある。
準備として、CSSファイルとして”bootstrap-responsive.min.css”を追加で読み込む必要があるが、これは以前の記事で触れたので省略する。

画面サイズと解像度

多様な画面サイズに対応するために、METAタグでviewportを指定する。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi”>

このcontentで指定されているパラメータをちょっと解説しておく。
widthは指定しなければ、980pxになる。
device-widthにするとiPhone等では360px、Androidの場合はそのデバイスの画面のピクセル数になる。
今時のスマホは480pxかそれ以上だろう。
Androidの画面は、機種によってインチ数が異なる。
同じピクセル数でも画面が小さい場合は、文字が小さくなって読みにくい。
画面の単位長あたりのピクセル数をdpi（dot per inch）で表すが、スマホはdpi値が大きく、PC等では小さい。
フォントサイズの単位「pt」は約1/72dpiに相当するので、216dpiのディスプレイなら実サイズは1/3になってしまう。
ちなみに初期のMacは72dpi、Windowsは96dpi、初代iPhoneは160dpiだった。
target-densitydpiを指定すると、どのデバイスでもだいたい同じ文字サイズを表示させることができる。
medium-dpiに指定すると、読みやすい文字サイズになるようだ。
medium-dpiは160dpiで、他にhigh-dpi（240dpi）、low-dpi（120dpi）、device-dpi、数値での指定が可能とのこと。
initial-scale、maximum-scale、user-scalableはその名の通り拡大縮小に関するパラメータ。
詳しい解説はこのあたりを参照。
第8回 CSS3で作るスマートフォン用ページ | Think IT
WebView | Android Developers

タッチパネルへの配慮

iPhoneやスマートホンはタッチパネルなので、マウスカーソルが存在しない。
従って、マウスカーソルが上に来ると動作するようなものは使えない。
よくある、マウスが上に来ると開く「ドロップダウンメニュー」は使わないほうがよい。
bootstrapに入っているナビゲーションバー（navbar）はタッチパネルに配慮されているし、画面が狭いスマートホンでは自動的に折り畳み式のメニューに切り替わるのでお勧めだ。

レイアウトとデザインの調整

bootstrapでは、マルチカラムの場合でもcontainer-fluidを使ってデザインしていれば、スマートホンで表示するときは自動的に各カラムを縦に一列に並べてくれる。
順番はHTMLの順番になるので、HTML上でメインコンテンツが最初に来るようにしておけばよい。
レイアウトの細部に関しては、paddingやmarginなどをピクセルで指定していると、PCではきちんと表示されても、スマートホンの画面ではバランスが悪くなる場合がある。
このような場合には、CSSを場合分けで書くことができる。
CSSの中で

@media (max-width: 480px) { … }

のように書くと、{}内はviewportの幅が480px以下の場合だけ適用される。
通常のスマホなら、縦でも横でもこの値に収まるはずだ。
当ブログの場合、タイトルの表示の仕方（フォントサイズや背景）の変更と、paddingやmarginの細かい調整を行っている。
また、bootstrapでは.visible-phone、.hidden-phoneといった、スマホやタブレット、PCのそれぞれに応じて表示／非表示を簡単に指定できるクラスも用意されている。
当ブログをiPhone、Androidで表示させると以下のようになる。
これらもPCのページも、全部一つのテンプレートで対応できている。
なお、楽天ブログからの移転関連の話は、そろそろ移転から２ヶ月経ち、だいぶ記憶も薄れてきたので、このへんで終わりにする。

iPhone


Android