詳細はあとでblogに

1. 真のレスポンシブって何だろう
20130322
Yumi Ishizaki (Hashizume)
13年3月22日金曜日 1

2. 自己紹介
id:uniq
名前:Yumi Ishizaki (Hashizume)
元デザイナー。
D社でニコニコ周りの何かとか。
今一応フロントエンド。
D社グループで音楽配信サイトとか。
※表紙の写真は特に意味ありません
13年3月22日金曜日 2

3. UI研修で
レスポンシブwebデザインについてレクチャーを受けた。
allWebクリエイター塾さんより。
↓
感動した！
↓
「技術だけじゃなくて、
意識の部分でもレスポンシブ」…な所。
13年3月22日金曜日 3

4. 基本振り返り
レスポンシブwebデザインって何？
レスポンシブWebデザインとは、デバイスごとに複数のデザ
インを用意するのではなく、ブラウザーのウィンドウサイズ
に合わせてデザインをフレキシブルに調整する制作手法だ
ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
http://ascii.jp/elem/000/000/613/613028/
13年3月22日金曜日 4

5. 基本振り返り
コードは？
html：metaタグのviewport設定
<meta name="viewport" content="width=device-width,
initial-scale=1">
CSS：Media Queries だよ
/* 画面が480px以上で800px以下のときに。 */
@media only screen and (min-width: 480px) and (max-width: 800px) {}
/* 画面が479px以下のとき。スマートフォンとか。 */
@media only screen and (min-width: 479px) {}
/* 画面が800px以上のとき */
@media only screen and (min-width: 800px) {}
/* 端末が横置き（横長） */
@media only screen and (orientation: landscape) {}
/* 端末が縦長 */
@media only screen and (orientation: portrait) {}
13年3月22日金曜日 5

6. ここらへんの 間が誤魔化してる感じで残念。
横幅のフィット感が無い。
プライベートでも作ったけど
なんちゃってレスポンシブで残念な感じです
13年3月22日金曜日 6

7. 間がなくて良い
参りましょう。伊勢志摩｜ＪＲ東海
http://ise.jr-central.co.jp/
こういうレシポンシブを作りたいなー
13年3月22日金曜日 7

8. 意識したいレスポンシブ的な考え
小さい画面は手前に置くので文字は
小さい方がいい。
大きい画面は遠くに置くので文字は
大きい方がいい。
画面の大きさによって、文字サイズ
を変更する必要がある
CSS Values and Units Module Level 3
http://www.w3.org/TR/2011/WD-css3-values-20110906/#viewport-relative-lengths
13年3月22日金曜日 8

9. 画面の大きさによって、
文字サイズも変更
13年3月22日金曜日 9

10. 挑戦したいレスポンシブっぽい技術
…っていうか、単位？
pxじゃなくて％を使う
emでブレイクポイントを作る
（画面width:70em過ぎたら、35em+35emの2カラムにするとか）
画面に対して何割の大きさの文字にするか単位
vw=viewport width
vh=viewport height
vmim=viewport minium
13年3月22日金曜日 10

11. vw,vh,vmin の解説
画面サイズによってfontやカラムのサイズが変更される
vw→画面がwidth:800pxなら8px=1vw
vh→画面がheight:600pxなら6px=1vh
vmin→画面がwidth:800px; height:600px; なら6px=1vmin
demo→http://css-tricks.com/examples/
ViewportTypography/
13年3月22日金曜日 11

12. まとめ
画面サイズが変われば（端末が変われば）、ユーザーの利用
方法／視聴方法も変わる。それに合わせて、デザインも変え
ていきましょー。
そのための技術はすでにあったんだ！
早くおうちかえって自分のサイトを直したいです。
13年3月22日金曜日 12