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