Lightning Talk Slides / What about RWD

• RWDって？
• RWDに関する誤解
• Media Queries
• スマートフォン対応へのアプローチ
• まとめ

• Media Queriesを使用
• 画像幅が100%
• カラムが可変

スマホサイトで使うものだから普通の案件では関係ない？

PCサイトでも使えます。
RWDの核となるMedia Queriesは、表示画面の幅などを判定し、
それにあわせてスタイルを適用させるものなので、スマホ・PCに関係なく使用できます。

スマホサイトで使うものだから普通の案件では関係ない？

PCサイトでも使えます。
RWDの核となるMedia Queriesは、表示画面の幅などを判定し、
それにあわせてスタイルを適用させるものなので、スマホ・PCに関係なく使用できます。
※ただし、モダンブラウザに限る

HTML5じゃないとできない？

RWDとHTML5は関係ありません。
RWDを実現するのはCSS側の記述なので、HTML5を使用していないサイトでも実装できます。

HTML5じゃないとできない？

RWDとHTML5は関係ありません。
RWDを実現するのはCSS側の記述なので、HTML5を使用していないサイトでも実装できます。
※

Media Queriesとは

<link rel="stylesheet" href="base.css" type="text/css" media="screen" />

RWD = Media Queries くらいに私は思っています。

Media Queriesとは

<link rel="stylesheet" href="base.css" type="text/css" media="screen" />

このmedia部分がMedia Queriesです。

Media Queriesの種類

• width：@media (min-width:500px)
• orientation：@media (orientation:portrait)    * or landscape
• aspect：@media (device-aspect-ratio: 16/9)    * device-width&height
• resolution：@media (min-resolution: 300dpi)    * for print

Media Queriesの役割

デバイスに応じて、スタイルを最適化するためのもの。
そもそもはスマホサイトを作るための技術ではありません。

気をつけるべきこと

• Media Queriesは、非適合の場合も読み込まれる
• パフォーマンスの低下
• Media Queriesに適合すれば、強制的にスタイルがあたる

PCサイト/スマートフォンサイトを分離するメリット

• スマートフォンユーザーにPCの見た目を提供できる
• デバイスにあわせて見た目・パフォーマンスを最適化できる

PCサイト/スマートフォンサイトを統合するメリット（RWD）

• HTMLが一つなので運用効率が良い
• CSSを書き直すだけなので難しいことはできないが、導入しやすい

CMSの復活？

CMSを使ってPCサイトとスマートフォンサイトを構築できれば、効率の良い運用が可能に？

• そもそもMedia Queriesはスマートフォンサイトのための技術ではない
• スマートフォンサイト＝RWDと思い込まないで欲しい
• 最近CMSが下火だが復活してくるかも？
• 結局は、ユーザ＆クライアントが何を求めてるかどうか。

データは公開しています。
RWDについて

このスライドは下記を用いて作成しました。
Shower Presentation