Hatena::ブログ(Diary)

asa nisi masa RSSフィード

2011-09-17 レスポンシブ・ウェブ・デザイン(CSS NITE Vol.59)

レスポンシブ・ウェブ・デザイン(CSS NITE Vol.59)

9/14 に「CSS Nite in Ginza, Vol.59」に参加しました。

今回のテーマは、「DreamweaverによるレスポンシブWebデザインの実装」です。

レスポンシブ・ウェブ・デザインとは、デバイスにより異なる解像度に対応するための方法の一つです。


課題:デバイスにより解像度はさまざま

PC, タブレット、携帯など様々なデバイスにコンテンツを表示したいが、デバイス等により解像度は様々な状況。

  • iPhone でも OS のバージョンにより、解像度は異なる。
  • Android 端末の場合は、OS のバージョンが同じでも機種により異なり、統一性がない。
    • こちらにまとめられています => 「no title
  • Windows Phone

また、「幅」に着目した場合、縦置きか横置きかにより、幅は異なるため、どう対応するかという課題がある。


そもそも、コンテンツのマルチデバイス対応って?

これは私が勝手に持った疑問。


デバイス固有のブラウザで表示する際に、解像度にあわせてコンテンツが分かりやすく表示されること。具体的には、

  • 横スクロールせずにコンテンツを表示できる
  • ボタンやリンクが表示され、当然押せる(押せないサイトは多いよね・・)
  • 縦スクロールせずに、そのサイトの全体像がわかる(数画面スクロールして、メニューが分かるサイトはイライラするよね・・)

そのために有効な技術要素は、デバイスの幅にあわせて、

  • コンテンツそのものの幅を変える
  • 画像の大きさを変える(画像の差し替えや収縮等)
  • ワイヤフレームを変更する。
    • 例えば、PC ならヘッダの右に表示されているサイドメニューを、携帯ならヘッダの下に表示するなど。

いろいろなアプローチがある

対応するアプローチとしては、いくつかある。

  • アプリ
  • 独自系
  • 流用系
    • 同じコンテンツを使用する
      • meta 要素で指定する
    • レスポンシブ・ウェブ・デザイン

レスポンシブ・ウェブ・デザインの3要素

A flexible grid

コンテンツの幅を固定幅指定でなく、相対幅指定にする。

Flexible images

画像のサイズを表示幅にあわせて、フレキシブルに収縮させる。

foreground で指定する方法と、background で指定する方法がある。

Media Queries

幅に応じて、どの css を読み込むかを指定する方法。

指定方法には3種類ある。

  1. HTML ファイルに LINK 指定する。
  2. 読み込み用の css を作成して間に挟む。
  3. @media を使用する。

KA-Channel」にコードも含め、詳しく書かれてますね。

ここにサンプルサイトがあります。



レスポンシブ・ウェブ・デザインのメリット・デメリット

メリット

同じコンテンツを使い回せるため、効率的にマルチデバイス対応が可能なこと。

少ない工数/費用で対応できる。

デメリット

重い。PC 用の画像、スマホ用の画像を両方読み込み、表示するかどうかを選択する方式のため、回線が遅い場合は、表示に時間がかかる。


マルチデバイス対応とデバイス最適化は違う

それぞれのデバイスを利用するコンテキストにあわせて、コンテンツを最適化することがデバイス最適化

コンテキストの例は、

  • PC で CSS NITE のサイトを参照する場合には、内容を確認して参加申し込みしたい
  • 携帯でアクセスする場合は、(当日)場所や開始時間を知りたい

コンテキストとしては他にも、場所や時間など様々なものがあるけど、デバイスで機械的に判断できるものもあるということ、何を作る場合にも同じなんだね、という点、目からウロコでした。

菊池崇菊池崇 2011/09/18 16:36 まとめ記事ありがとうございます。文中にあります「レスポンシブル・デザイン」ですが正しくは、「レスポンシブ・ウェブ・デザイン」となります。もしお時間がある時に修正していただけると嬉しいです。

januaryjanuary 2011/09/19 07:16 ご指摘ありがとうございます。
修正しました。

菊池崇菊池崇 2011/09/19 13:33 早速の修正ありがとうございます。うるさいようですが、もう1点、「レスポンシブル」ではなく「レスポンシブ」が正しい表記になります。すいません、お願いします。

januaryjanuary 2011/09/19 20:22 菊池さん、お手数おかけしております。
今度こそ、修正しました。
responsible では、まったく意味が違いますね><
responsive で覚え直しました。ありがとうございました。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/january/20110917/1316238526