レスポンシブ・ウェブ・デザイン（CSS NITE Vol.59）
9/14 に「CSS Nite in Ginza, Vol.59」に参加しました。
今回のテーマは、「DreamweaverによるレスポンシブWebデザインの実装」です。
レスポンシブ・ウェブ・デザインとは、デバイスにより異なる解像度に対応するための方法の一つです。
課題：デバイスにより解像度はさまざま
PC, タブレット、携帯など様々なデバイスにコンテンツを表示したいが、デバイス等により解像度は様々な状況。
- iPhone でも OS のバージョンにより、解像度は異なる。
- Android 端末の場合は、OS のバージョンが同じでも機種により異なり、統一性がない。
- こちらにまとめられています ＝＞ 「DOMAIN ERROR
- Windows Phone
また、「幅」に着目した場合、縦置きか横置きかにより、幅は異なるため、どう対応するかという課題がある。
そもそも、コンテンツのマルチデバイス対応って？
これは私が勝手に持った疑問。
デバイス固有のブラウザで表示する際に、解像度にあわせてコンテンツが分かりやすく表示されること。具体的には、
- 横スクロールせずにコンテンツを表示できる
- ボタンやリンクが表示され、当然押せる（押せないサイトは多いよね・・）
- 縦スクロールせずに、そのサイトの全体像がわかる（数画面スクロールして、メニューが分かるサイトはイライラするよね・・）
そのために有効な技術要素は、デバイスの幅にあわせて、
- コンテンツそのものの幅を変える
- 画像の大きさを変える（画像の差し替えや収縮等）
- ワイヤフレームを変更する。
- 例えば、PC ならヘッダの右に表示されているサイドメニューを、携帯ならヘッダの下に表示するなど。
いろいろなアプローチがある
対応するアプローチとしては、いくつかある。
レスポンシブ・ウェブ・デザインの３要素
A flexible grid
コンテンツの幅を固定幅指定でなく、相対幅指定にする。
Flexible images
画像のサイズを表示幅にあわせて、フレキシブルに収縮させる。
foreground で指定する方法と、background で指定する方法がある。
Media Queries
幅に応じて、どの css を読み込むかを指定する方法。
指定方法には３種類ある。
- HTML ファイルに LINK 指定する。
- 読み込み用の css を作成して間に挟む。
- @media を使用する。
「http://d.hatena.ne.jp/KA-Channel/20110915/1316167945」にコードも含め、詳しく書かれてますね。
ここにサンプルサイトがあります。
レスポンシブ・ウェブ・デザインのメリット・デメリット
デメリット
重い。PC 用の画像、スマホ用の画像を両方読み込み、表示するかどうかを選択する方式のため、回線が遅い場合は、表示に時間がかかる。
