More Related Content
Similar to 真のレシポンシブって何だろう (20)
More from Yumi uniq Ishizaki (9)
真のレシポンシブって何だろう
- 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. 間がなくて良い
参りましょう。伊勢志摩|JR東海
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
- 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