Upload
ourmaninjapan
View
6.900
Download
6
Embed Size (px)
DESCRIPTION
== 関連資料 == CSSメディアクエリの正しい使い方(動画): http://daniemon.com/videos/using-media-queries/ リサイザー: レスポンシブWebデザイン用のページリサイズツール: http://daniemon.com/tools/resizer/
Citation preview
smallsmall 画面でも、画面でも、
BIGBIG 画面でも、画面でも、
今すぐ使えるレスポンシブ活用術今すぐ使えるレスポンシブ活用術
ダニエル デイビスダニエル デイビスbit.ly/flexiwebbit.ly/flexiweb
smallsmall 画面でも、画面でも、
BIGBIG 画面でも、画面でも、
今すぐ使えるレスポンシブ活用術今すぐ使えるレスポンシブ活用術
ダニエル デイビスダニエル デイビスbit.ly/flexiwebbit.ly/flexiweb
まずはお話タイム…まずはお話タイム…まずはお話タイム…まずはお話タイム…
electricpulp.coelectricpulp.comm
electricpulp.coelectricpulp.comm
oneillclothing.comoneillclothing.comoneillclothing.comoneillclothing.com
electricpulp.comelectricpulp.com/notes/you-like-/notes/you-like-
apples/apples/
electricpulp.comelectricpulp.com/notes/you-like-/notes/you-like-
apples/apples/
主に主に
モバイル専用サイトモバイル専用サイトかか
レスポンシブサイトレスポンシブサイト
主に主に
モバイル専用サイトモバイル専用サイトかか
レスポンシブサイトレスポンシブサイト
モバイル モバイル != iPhone!= iPhoneモバイル モバイル != iPhone!= iPhone
ギークなユーザーギークなユーザー
my.opera.com/ODIN/blog/2013/01/17my.opera.com/ODIN/blog/2013/01/17/a-simple-survey-of-screen-sizes/a-simple-survey-of-screen-sizes
ギークなユーザーギークなユーザー
my.opera.com/ODIN/blog/2013/01/17my.opera.com/ODIN/blog/2013/01/17/a-simple-survey-of-screen-sizes/a-simple-survey-of-screen-sizes
ギークではないユーザーギークではないユーザー
my.opera.com/ODIN/blog/2013/01/17my.opera.com/ODIN/blog/2013/01/17/a-simple-survey-of-screen-sizes/a-simple-survey-of-screen-sizes
ギークではないユーザーギークではないユーザー
my.opera.com/ODIN/blog/2013/01/17my.opera.com/ODIN/blog/2013/01/17/a-simple-survey-of-screen-sizes/a-simple-survey-of-screen-sizes
モバイル モバイル != != 動く動くモバイル モバイル != != 動く動く
•つまりつまり•つまりつまり
コンテンツの縮小より、コンテンツの縮小より、
表示の最適化表示の最適化
コンテンツの縮小より、コンテンツの縮小より、
表示の最適化表示の最適化
もうちょっと技術的な話…もうちょっと技術的な話…もうちょっと技術的な話…もうちょっと技術的な話…
マルチデバイスの注意点マルチデバイスの注意点
•文字の大きさ文字の大きさ•空間空間•ロールオーバーやドラグロールオーバーやドラグ•ユーザーの入力ユーザーの入力•パフォーマンスパフォーマンス
マルチデバイスの注意点マルチデバイスの注意点
•文字の大きさ文字の大きさ•空間空間•ロールオーバーやドラグロールオーバーやドラグ•ユーザーの入力ユーザーの入力•パフォーマンスパフォーマンス
11viewportviewportのメタタグのメタタグ
を使いましょうを使いましょう
<meta name=”viewport”<meta name=”viewport”content=”width=device-width”>content=”width=device-width”>
11viewportviewportのメタタグのメタタグ
を使いましょうを使いましょう
<meta name=”viewport”<meta name=”viewport”content=”width=device-width”>content=”width=device-width”>
22メディアクエリメディアクエリを使いましょうを使いましょう
@media screen@media screenand (max-width:800px) {and (max-width:800px) { /* /* スタイルはここ スタイルはここ */*/}}
22メディアクエリメディアクエリを使いましょうを使いましょう
@media screen@media screenand (max-width:800px) {and (max-width:800px) { /* /* スタイルはここ スタイルはここ */*/}}
22のの22TVTVの判断はこれで:の判断はこれで:
@media tv,@media tv,(width:1280px) and (height:720px),(width:1280px) and (height:720px),(width:1920px) and (height:1080px) (width:1920px) and (height:1080px) {{ /* /* スタイルはここ スタイルはここ */*/}}
22のの22TVTVの判断はこれで:の判断はこれで:
@media tv,@media tv,(width:1280px) and (height:720px),(width:1280px) and (height:720px),(width:1920px) and (height:1080px) (width:1920px) and (height:1080px) {{ /* /* スタイルはここ スタイルはここ */*/}}
33コンテンツをシングルコンテンツをシングル
コラムにしましょうコラムにしましょう
#content {#content { display:block;display:block; float:none;float:none; width:100%;width:100%;}}
33コンテンツをシングルコンテンツをシングル
コラムにしましょうコラムにしましょう
#content {#content { display:block;display:block; float:none;float:none; width:100%;width:100%;}}
44画像の幅を最大画像の幅を最大100%100%
にしましょうにしましょう
img {img { max-width:100%;max-width:100%;}}
44画像の幅を最大画像の幅を最大100%100%
にしましょうにしましょう
img {img { max-width:100%;max-width:100%;}}
55不必要のコンテンツを不必要のコンテンツを
非表示にしましょう非表示にしましょう(でも表示できるような(でも表示できるような
機能を忘れず)機能を忘れず)
55不必要のコンテンツを不必要のコンテンツを
非表示にしましょう非表示にしましょう(でも表示できるような(でも表示できるような
機能を忘れず)機能を忘れず)
66HTML5HTML5を使いましょうを使いましょう(フォーム、位置情報、(フォーム、位置情報、
オフラインストレージ等)オフラインストレージ等)
<input type=”number”><input type=”number”><input type=”email”><input type=”email”>
66HTML5HTML5を使いましょうを使いましょう(フォーム、位置情報、(フォーム、位置情報、
オフラインストレージ等)オフラインストレージ等)
<input type=”number”><input type=”number”><input type=”email”><input type=”email”>
77:hover :hover のあるところ、のあるところ、:focus :focus も使いましょうも使いましょう
#item:hover, #item:focus {#item:hover, #item:focus { /* /* 好きなプロパティ 好きなプロパティ */*/}}
77:hover :hover のあるところ、のあるところ、:focus :focus も使いましょうも使いましょう
#item:hover, #item:focus {#item:hover, #item:focus { /* /* 好きなプロパティ 好きなプロパティ */*/}}
88エフェクトはエフェクトはJavaScriptJavaScriptよりよりCSSCSSを使いましょうを使いましょう
-webkit-transition:1s;-webkit-transition:1s;-moz-transition:1s;-moz-transition:1s;-o-transition:1s;-o-transition:1s;transition:1s;transition:1s;
88エフェクトはエフェクトはJavaScriptJavaScriptよりよりCSSCSSを使いましょうを使いましょう
-webkit-transition:1s;-webkit-transition:1s;-moz-transition:1s;-moz-transition:1s;-o-transition:1s;-o-transition:1s;transition:1s;transition:1s;
88のの22
ダニエルのダニエルのワンポイントワンポイントCSS…CSS…
88のの22
ダニエルのダニエルのワンポイントワンポイントCSS…CSS…
88のの22(続き)(続き)#items {#items { max-height:1.5em;max-height:1.5em; transition:1s;transition:1s;}}#items:hover, #items:focus {#items:hover, #items:focus { max-height:30em;max-height:30em;}}
jsfiddle.net/leaverou/zwvNY/jsfiddle.net/leaverou/zwvNY/
88のの22(続き)(続き)#items {#items { max-height:1.5em;max-height:1.5em; transition:1s;transition:1s;}}#items:hover, #items:focus {#items:hover, #items:focus { max-height:30em;max-height:30em;}}
jsfiddle.net/leaverou/zwvNY/jsfiddle.net/leaverou/zwvNY/
そろそろタイムアップですよ…そろそろタイムアップですよ…そろそろタイムアップですよ…そろそろタイムアップですよ…
エミュレーターエミュレーター
モバイルモバイルOperaOpera
www.opera.com/developer/tools/mobile/www.opera.com/developer/tools/mobile/FirefoxFirefox
addons.mozilla.org/en-US/firefox/addonaddons.mozilla.org/en-US/firefox/addon/firefox-os-simulator//firefox-os-simulator/
WebKitWebKitdeveloper.blackberry.com/html5/download/developer.blackberry.com/html5/download/
TVTVOperaOpera
www.opera.com/business/tv/emulator/www.opera.com/business/tv/emulator/
エミュレーターエミュレーター
モバイルモバイルOperaOpera
www.opera.com/developer/tools/mobile/www.opera.com/developer/tools/mobile/FirefoxFirefox
addons.mozilla.org/en-US/firefox/addonaddons.mozilla.org/en-US/firefox/addon/firefox-os-simulator//firefox-os-simulator/
WebKitWebKitdeveloper.blackberry.com/html5/download/developer.blackberry.com/html5/download/
TVTVOperaOpera
www.opera.com/business/tv/emulator/www.opera.com/business/tv/emulator/
smallsmall 画面でも、画面でも、
BIGBIG 画面でも、画面でも、
今すぐ使えるレスポンシブ活用術今すぐ使えるレスポンシブ活用術
ダニエル デイビスダニエル デイビスbit.ly/flexiwebbit.ly/flexiweb
smallsmall 画面でも、画面でも、
BIGBIG 画面でも、画面でも、
今すぐ使えるレスポンシブ活用術今すぐ使えるレスポンシブ活用術
ダニエル デイビスダニエル デイビスbit.ly/flexiwebbit.ly/flexiweb