Your SlideShare is downloading. ×
small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術

6,763
views

Published on

== 関連資料 == …

== 関連資料 ==
CSSメディアクエリの正しい使い方(動画): http://daniemon.com/videos/using-media-queries/
リサイザー: レスポンシブWebデザイン用のページリサイズツール: http://daniemon.com/tools/resizer/

Published in: Technology

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,763
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
23
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. small 画面でも、 BIG 画面でも、今すぐ使えるレスポンシブ活用術 ダニエル デイビス bit.ly/flexiweb
  • 2. まずはお話タイム…
  • 3. oneillclothing.com
  • 4. 主にモバイル専用サイト かレスポンシブサイト
  • 5. モバイル != iPhone
  • 6. ギークなユーザーmy.opera.com/ODIN/blog/2013/01/17 /a-simple-survey-of-screen-sizes
  • 7. ギークではないユーザーmy.opera.com/ODIN/blog/2013/01/17 /a-simple-survey-of-screen-sizes
  • 8. モバイル != 動く
  • 9. つまり•
  • 10. コンテンツの縮小より、表示の最適化
  • 11. もうちょっと技術的な話…
  • 12. マルチデバイスの注意点•文字の大きさ•空間•ロールオーバーやドラグ•ユーザーの入力•パフォーマンス
  • 13. 1 viewportのメタタグ を使いましょう <meta name=”viewport”content=”width=device-width”>
  • 14. 2 メディアクエリ を使いましょう@media screenand (max-width:800px) { /* スタイルはここ */}
  • 15. 2の2 TVの判断はこれで:@media tv,(width:1280px) and (height:720px),(width:1920px) and (height:1080px){ /* スタイルはここ */}
  • 16. 3 コンテンツをシングル コラムにしましょう#content { display:block; float:none; width:100%;}
  • 17. 4画像の幅を最大100% にしましょうimg { max-width:100%;}
  • 18. 5不必要のコンテンツを 非表示にしましょう(でも表示できるような 機能を忘れず)
  • 19. 6HTML5を使いましょう (フォーム、位置情報、オフラインストレージ等)<input type=”number”><input type=”email”>
  • 20. 7 :hover のあるところ、 :focus も使いましょう#item:hover, #item:focus { /* 好きなプロパティ */}
  • 21. 8エフェクトはJavaScriptよりCSSを使いましょう-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;
  • 22. 8の2 ダニエルのワンポイントCSS…
  • 23. 8の2(続き)#items { max-height:1.5em; transition:1s;}#items:hover, #items:focus { max-height:30em;} jsfiddle.net/leaverou/zwvNY/
  • 24. そろそろタイムアップですよ…
  • 25. エミュレーター モバイルOpera www.opera.com/developer/tools/mobile/Firefox addons.mozilla.org/en-US/firefox/addon /firefox-os-simulator/WebKit developer.blackberry.com/html5/download/ TVOpera www.opera.com/business/tv/emulator/
  • 26. small 画面でも、 BIG 画面でも、今すぐ使えるレスポンシブ活用術 ダニエル デイビス bit.ly/flexiweb