iPod shuffle研究所

2012/04/23(月)

前回の続き。

このブログは、読者の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のページも、全部一つのテンプレートで対応できている。

なお、楽天ブログからの移転関連の話は、そろそろ移転から2ヶ月経ち、だいぶ記憶も薄れてきたので、このへんで終わりにする。

iPhone



Android


  1. この記事のリンク
  2. | コメント:2

Re: レスポンシブデザインでブログをスマートホン対応にする 忍者ブログでTwitter Bootstrapを使う(3)
こんにちは。

>device-widthにするとiPhone等では360px、Androidの場合はそのデバイスの画面のピクセル数になる。

これは間違いではないでしょうか?devicePixelRatioがあるので、ほとんどのAndroidスマホでは320pxか360pxになり、iPhoneは320pxになると思います。
Re: レスポンシブデザインでブログをスマートホン対応にする 忍者ブログでTwitter Bootstrapを使う(3)
ありがとうございます。もう忘却の彼方なのですが、確かにdevicePixelRatioが設定されていれば、解像度はデバイスのピクセル数÷devicePixelRatioになりますね。昔はdevicePixelRatio=1のものも散見されたようです。
コメント
お名前
タイトル
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

ブログ内検索

プロフィール

勇者カズ坊★
ガジェット好きの徒然日記です。

カテゴリー

最新記事

アーカイブ

広告

最新コメント

勇者カズ坊★ [03/14 ]
匿名希望 [03/14 ]
勇者カズ坊★ [03/09 ]
山田 [03/09 ]
勇者カズ坊★ [02/10 ]
mz2500 [02/10 ]
勇者カズ坊★ [09/19 ]
イーザス [09/19 ]
イーザス [05/09 ]
勇者カズ坊★ [05/08 ]

☆★おすすめショップ★☆

富士カメラ
デジカメなどの限定商品が安い
shopU
キーボードなどの玄人好みの入力機器が揃う
BENQジャパン
液晶ディスプレイのアウトレットがおすすめ
上海問屋
USBメモリやSDカードが安い
エレコムダイレクトショップ
PC関連2100円以上送料無料
サンワダイレクト
PC関連2000円以上送料無料
デンシ電気店
ちょっと変わった電子ガジェットがおすすめ!
にぎわい商店
変わったグッズがたくさんあっておすすめ!
インテリアショップplywood
ちょっと洒落たグッズ満載、一見の価値あり

バーコード

RSS

おすすめ