スマートフォン対応のウェブをつくろう
•
1 like•2,091 views
2013年12月13日に山陰ITPro勉強会で発表したスライドです。 http://sitw.techtalk.jp/sitwinfo/info22
More Related Content
Similar to スマートフォン対応のウェブをつくろう
Similar to スマートフォン対応のウェブをつくろう (20)
Recently uploaded
Recently uploaded (14)
スマートフォン対応のウェブをつくろう
- 1. マルチデバイス対応の ウェブをつくろう 平成25年12月14日 株式会社 前川商会 ウェブ事業部 前川峻志 13年12月14日土曜日
- 3. 自己紹介 • 名前: 前川 峻志 (まえかわ たかし) • 前川商会 ウェブ事業部に所属 • 保険代理店が主の事業。保険関係のウェブを内製。 • 島根県隠岐郡隠岐の島町に拠点 • ウェブ事業部にて保険関係のウェブ制作全般を行う。 • 今回は、HTML、CSSはある程度知っているけど、 まだスマホ向けのウェブを作ったことがない人向けに 弊社で制作した事例も踏まえながら押さえておくとOKな 仕様、ライブラリなどのノウハウを紹介します。 13年12月14日土曜日
- 6. media queriesを使った表示の最適化 media queriesとは 条件ごとにCSSを切り替える(Conditional CSS) HTML4,CSS2のMedia Typesを踏まえた CSS3による仕様。 media queriesの例 (幅480pxまでsmall-device.css、幅481pxからnot-small-device.css) <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet"> 13年12月14日土曜日
- 7. media queriesの背景 HTML4、CSS2のMedia Typeの仕様から追加 HTML4, CSS2のmedia typeの例 (画面表示はsans-serif.css、印刷はserif.css) <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> スマホ、タブレットなど、より詳細にデバイスを指定して スタイルシートを使い分ける要求が多くなった。 将来、こんなデバイスがでてもOK？！ 13年12月14日土曜日
- 8. media queriesの使用例 弊社の医療保険のウェブでの使用例 /* PC用 */ @media only screen and (min-width: 940px) { (横幅940px以上のPCの場合のCSS) } /* スマートフォン 縦(ポートレート) */ @media only screen and (max-width: 480px) { (スマートフォンを縦にした場合のCSS) } /* スマートフォン 横(ポートレート) */ @media only screen and (max-width: 640px) { (スマートフォンを横にした場合のCSS) } レスポンシブウェブデザインを実装するために欠かせない 13年12月14日土曜日
- 10. 例: VIEWPORTの例 320 x 356の 画像を指定した場合 デフォルトの980pxで表示 参照元: https://developer.apple.com/library/safari/documentation/appleapplications/reference/ safariwebcontent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW1 13年12月14日土曜日
- 11. 例: VIEWPORTの例 320 x 356の 画像でVIEWPORTを指定 幅 320px スケール 1.0倍 参照元: https://developer.apple.com/library/safari/documentation/appleapplications/reference/ safariwebcontent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW1 13年12月14日土曜日
- 12. 例: VIEWPORTの例 320 x 356の 画像でVIEWPORTを指定 幅 320px スケール 1.5倍 参照元: https://developer.apple.com/library/safari/documentation/appleapplications/reference/ safariwebcontent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW1 13年12月14日土曜日
- 13. 例: VIEWPORTの指定方法 HTMLのmetaタグで指定 <meta name="viewport" content=" height = [pixel_value | "device-height"] , width = [pixel_value | "device-width"] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = ["yes" | "no"] " /> 参照元: http://developer.android.com/guide/webapps/targeting.html#Viewport 13年12月14日土曜日
- 14. 例: IPHONE5SでのVIEWPORT iPhone5sの場合(640px x 1,136px) •SafariでVIEWPORTの指定がない場合は幅980pxで表示。 •VIEWPORTをして指定した場合の例 <meta name="viewport" content="width=device-width, userscalable=yes, maximum-scale=5.0, minimum-scale=1.0"> •width=device-width → 640px •user-scalable=yes → ズームによる拡大、縮小を有効に •maximum-scale=5.0 → 最大5.0倍まで拡大OKに •minimum-scale=1.0 → 縮小は等倍まで 13年12月14日土曜日
- 16. JQUERY MOBILEの基本形 下記のように、jQuery Mobileの「Page」の構造に従う →表示例を見る <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-‐width, initial-‐scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-‐1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-‐1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-‐1.3.2.min.js"></script> </head> <body> <div data-‐role="page"> <div data-‐role="header"> <h1>Page Title</h1> </div><!-‐-‐ /header -‐-‐> <div data-‐role="content"> <p>Page content goes here.</p> </div><!-‐-‐ /content -‐-‐> <div data-‐role="footer"> <h4>Page Footer</h4> </div><!-‐-‐ /footer -‐-‐> </div><!-‐-‐ /page -‐-‐> </body> </html> 13年12月14日土曜日
- 17. 弊社でのJQUERY MOBILE利用例 携帯電話・スマートフォンで加入できる自動車保険で利用 •ボタン、リストビューを使用 • data-roleというプロパティを指定することで 「続きを見る」のボタンができる。 •ボタン風の見た目はjQuery MobeileのCSS、Javascriptが適用 してくれるので、実装の手間が非常に減る <div data-role="collapsible"> <h4>タイトル</h4> <p>コンテンツ</p> </div> 13年12月14日土曜日