前提
・普段そんなにフロントやってない
・レスポンシブデザインってなによ
・モバイルファーストなんでしょこれからは
・モバイルはもうスマホって言いかえるよ
レスポンシブデザインって
・複数の端末の画面サイズに対応するWebサイトづくりのこと
・単一のファイルで制作し、端末や画像サイズで適時変化するようにする手法
※スマホ用とPC用でデザインを分けるのは違う
・複数ファイルによるURLの分散が防げるのはもちろん、更新なども容易になる
レイアウトの種類
リキッドレイアウト
ボックスの要素が端末に応じて伸縮して伝えられる。
要は常に、横幅いっぱいにブロックが表示される感じ。
フレキシブルレイアウト
リキッドレイアウトと基本変わらない。
ただし、最小幅と最大幅の制限があり、
最大幅以上のときは余白が出来るような作り。
グリッドレイアウト
メイン部はリキッドなどで。
一部のボックスを固定サイズとして、
画面幅に変更があった場合、それに応じて再配置されるレイアウト。
よく言われているのは、
画面を縦と横で方眼のブロックにして、
コンテンツを配置していく設計方法。
例)
http://www.nhk.or.jp/studiopark/
※ブラウザ幅を変えたりしてみてください
HTML5とCSS3で実現しよう
メディアクエリ
メディアクエリ？
画面の表示幅とかで適用するスタイルを変える方法。
CSS3で実装する。
条件に応じて読み込むCSSファイルを変える方法と、
一つのCSSファイルで分岐を書く方法がある。
前者だと同じ属性やその値の管理がバラけそうなので、
ここでは後者について触れる。
基本的な記述方法
@media screen and 幅条件 {
スタイル
}
幅条件を組み合わせて、上記のような記載を数種用意する。
すると、適時その幅などに合わせて、スタイルが変わる。
記載順のルール
ファイルの上から下へ。
つまり、
画面幅が小→大か、大→小のどちらかしかありえない。
| 俗称 | 説明 |
|---|---|
| モバイルファースト | 小さいサイズから順に読んでいく方法 |
| デスクトップファースト | 大きいサイズから順に読んでいく方法 |
主流はモバイルファースト。
よく使う記述属性
max-widht：ビューエリアの最大幅。このサイズより小さい場合に適用
min-width：ビューエリアの最小幅。このサイズより大きい場合に適用
上記を踏まえてモバイルファーストな記述
//グローバル
@media screen and (max-width:480px) {
//480pxまでのサイズ
}
@media screen and (min-width:481px) and (max-width:768px) {
//481px~768pxまでのサイズ
}
@media screen and (min-width:769px) and (max-width:1200px) {
//769px~1200pxまでのサイズ
}
viewport
言葉としてのviewport
ブラウザの表示領域のこと。
PCの場合、viewportに収まらない場所は
スクロールすれば良い。
じゃあスマホは？
スマホのviewport
何もしないと、
スマホはPC向けサイトを表示するときに、
デフォルトで横幅980pxデザイン
という前提で描画する。
→結果：文字が小さい！
そこで・・・。
HTMLのviewport
端的に言ってしまえば、
スマホの表示をフィットさせるための機能といっていいだろう。
コレすなわち
スマホ向けにデザインしているよ！
という主張になる。
ちゅーても、サイトの作りによって表示のさせ方は違うので、
細かい設定は必要になる。
基本的な記述方法
<meta name="viewport" content="表示条件">
表示条件はカンマ区切りで複数かける。
content属性にかけるもの
| 属性 | 説明 |
|---|---|
| width | 表示領域の幅 数値：ピクセル数 device-width：画面幅に合わせる |
| height | 表示領域の高さ 数値：ピクセル数 device-height：画面高に合わせる |
| initial-scale | 初期のズーム倍率 |
| minimum-scale | 最小倍率(0~10、デフォ0.25) |
| maximum-scale | 最大倍率(0~10、デフォ1.6) |
| user-scalable | ズーム操作の許可(yes |
とりあえず
コレ安定？(要検証)
<meta name="viewport" content="width:device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0">
Retina
Retinaってなんなのよまじで
きれいなのすっごく。
なぜきれいなのか？
↓
画像って結局、点(ピクセル)の集合体。
点が細ければ細かいほど、鮮明に表現できます。
その昔は、
ピクセルっていったら、全部同じサイズで、
ピクセルから画面サイズも割り出せた。
でもレッティーナさんのお陰で、それができなくなってしまった。
Retinaのせいでメディアクエリのピクセル数と一致しなくなるんじゃ！？
実はここでviewportさんが活躍します。
width=device-width
height=device-height
の値は
デバイスの解像度 ÷ デバイスピクセル比
となる。
一度用語をまとめよう。
| 用語 | 説明 |
|---|---|
| CSSピクセル | CSSで使われる仮想的なピクセル。 これが全ての基準。 メディアクエリで指定しているのもこれ。 |
| デバイスピクセル | そのデバイスのピクセルの細かさ。 |
| デバイスピクセル比 | CSSピクセルの幅にデバイスピクセル何個はいるの？っていう比率。 |
| デバイスの解像度 | デバイスの画面サイズの中に入っている、 デバイスピクセルの数。 縦×横で表記されたりする。 |
話を戻しましょう。
上記の用語を踏まえると、実画面サイズって、
デバイスの解像度をデバイスピクセル比で割ってあげれば、
実画面サイズがでるってことですよね？
！！！！？？？？
そうです。
width=device-width
height=device-height
の値は
デバイスの解像度 ÷ デバイスピクセル比
となる。
という話に戻ってきます。
つまりviewportで上記を指定していれば、
画面サイズに関しては解決！となるわけです。
Retinaで考える事
画像です。
鮮明な画像を使いたいときにだけ考えれば良いのです。