Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

真のレシポンシブって何だろう

1,445 views

Published on

詳細はあとでblogに

Published in: Design
  • Be the first to comment

真のレシポンシブって何だろう

  1. 1. 真のレスポンシブって何だろう 20130322 Yumi Ishizaki (Hashizume)13年3月22日金曜日 1
  2. 2. 自己紹介 id:uniq 名前:Yumi Ishizaki (Hashizume) 元デザイナー。 D社でニコニコ周りの何かとか。 今一応フロントエンド。 D社グループで音楽配信サイトとか。 ※表紙の写真は特に意味ありません13年3月22日金曜日 2
  3. 3. UI研修で レスポンシブwebデザインについてレクチャーを受けた。 allWebクリエイター塾さんより。 ↓ 感動した! ↓ 「技術だけじゃなくて、 意識の部分でもレスポンシブ」…な所。13年3月22日金曜日 3
  4. 4. 基本振り返り レスポンシブwebデザインって何? レスポンシブWebデザインとは、デバイスごとに複数のデザ インを用意するのではなく、ブラウザーのウィンドウサイズ に合わせてデザインをフレキシブルに調整する制作手法だ ASCII.jp:スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3) http://ascii.jp/elem/000/000/613/613028/13年3月22日金曜日 4
  5. 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. 6. ここらへんの 間が誤魔化してる感じで残念。 横幅のフィット感が無い。 プライベートでも作ったけど なんちゃってレスポンシブで残念な感じです13年3月22日金曜日 6
  7. 7. 間がなくて良い 参りましょう。伊勢志摩|JR東海 http://ise.jr-central.co.jp/ こういうレシポンシブを作りたいなー13年3月22日金曜日 7
  8. 8. 意識したいレスポンシブ的な考え 小さい画面は手前に置くので文字は 小さい方がいい。 大きい画面は遠くに置くので文字は 大きい方がいい。 画面の大きさによって、文字サイズ を変更する必要がある CSS Values and Units Module Level 3 http://www.w3.org/TR/2011/WD-css3-values-20110906/#viewport-relative-lengths13年3月22日金曜日 8
  9. 9. 画面の大きさによって、 文字サイズも変更13年3月22日金曜日 9
  10. 10. 挑戦したいレスポンシブっぽい技術 …っていうか、単位? pxじゃなくて%を使う emでブレイクポイントを作る (画面width:70em過ぎたら、35em+35emの2カラムにするとか) 画面に対して何割の大きさの文字にするか単位 vw=viewport width vh=viewport height vmim=viewport minium13年3月22日金曜日 10
  11. 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. 12. まとめ 画面サイズが変われば(端末が変われば)、ユーザーの利用 方法/視聴方法も変わる。それに合わせて、デザインも変え ていきましょー。 そのための技術はすでにあったんだ! 早くおうちかえって自分のサイトを直したいです。13年3月22日金曜日 12

×