Responsive design

2,651 views
2,618 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,651
On SlideShare
0
From Embeds
0
Number of Embeds
544
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. Responsive Designtomoyuki kashiro (@Tkashiro)
  2. 2. Liquid Design からResponsive Design
  3. 3. Liquid Designとは?Webページの表示領域が変更されても、従来の表示を維持させるデザイン手法・絶対値指定→相対値指定       ( % , em )・例:楽天市場TOPページ
  4. 4. 背景・ディスプレイの高解像度化 ・ディスプレイサイズが大きくなる ・高解像度になる   高解像度ユーザに対して余白の大きい画面ではなく   より多くの情報を表示させる   小さな画面、低解像度の考慮はなし
  5. 5. 変化 - 多ディバイス- 多くのディバイスが登場 スマートフォン タブレット スマートTV
  6. 6. 問題点・端末ごとに最適なUIは違う・解像度、画面サイズが小さい為、 Liquid Designでは対応でいない
  7. 7. Responsive Designとは?端末の画面サイズに応じてUIを切り替えるデザイン手法下記デザイン手法から構成される ・Liquid Design ・Fluid Image ・Media Query ・Responsive Type Setting
  8. 8. Liquid Design各コンテンツの要素サイズを相対値(%)で指定--- CSS ---#main { width : 100% ; padding : 10% ; margin : 10% ;}
  9. 9. Fluid Image画面のサイズを基準にして、画像を縮小拡大して表示-- CSS ---#mainImage { max-width : 30% ; max-height : 30% ;}※IE系はmax-*をサポートしてない為、widthとheightで指定
  10. 10. Media Query特定の条件に応じてスタイルを切り替える指定※CSS3のプロパティ--- CSS ---@media screen and (max-width : 640px) { #main { widht : 300px ; }}
  11. 11. Responsive Type Settings画面サイズに応じてフォントサイズを変える--- CSS ---@media screen and (max-width : 480px) { #main { font-size : 14px ; }}
  12. 12. 事例 - Kings Hill Car -http://www.kingshillcars.com/画面幅い応じて、デザインが変化その他の例http://mediaqueri.es/
  13. 13. 結論・端末により最適なUIは違う・最適化されたUIをクライアントサイドで 実装できる方法の1つがResponsive Design

×