Download to read offline
![従来のマルチデバイス対応方法
サーバサイド、クライアントスクリプトにて切り分け
<?php /* UserAgent Switch */
$ua=$_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’And
roid’)!==false)) {
header(“Location:/sp/index.php”);
exit();
}
?>](https://image.slidesharecdn.com/random-140214103531-phpapp02/85/2013-HTML5-Web-12-320.jpg)
![レスポンシブをIE6〜8
使う方
法
css3-mediaqueries.js
html5shiv.js
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
css3-mediaqueries.js
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->](https://image.slidesharecdn.com/random-140214103531-phpapp02/85/2013-HTML5-Web-27-320.jpg)
![CSS
タブレット向けのスタイル：481px ～
@media only screen and (min-width: 481px) { //*********[ １:Start ]********
}
PC向けのスタイル：769px～
@media only screen and (min-width: 769px) {
}
//*********[ ２:Start ]********](https://image.slidesharecdn.com/random-140214103531-phpapp02/85/2013-HTML5-Web-32-320.jpg)
![img
imgSizer.js
<!--[if lte IE 7.0]>
<script type="text/javascript"
src="imgSizer.js"></script>
<![endif]-->](https://image.slidesharecdn.com/random-140214103531-phpapp02/85/2013-HTML5-Web-35-320.jpg)
Uploaded byDaisuke Yamazaki
2013 HTML5カンファレンス レスポンシブWebデザイン
マルチデバイス対応（各デバイスに合わせたサイト制作）の必要性がでてきている昨今、レスポンシブWebデザイン（略してRWD）のキーワードを聞くようになりました。今回はRWDの概念〜基本的な考え方〜制作方法について解説させていただきます。RWDは制作手法の考え方、手法の１つですので正しく理解していただければと思います。
![[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性](https://cdn.slidesharecdn.com/ss_thumbnails/uxux-211214103138-thumbnail.jpg?width=640&height=640&fit=bounds)
![11月12日セミナー資料[pdf]](https://cdn.slidesharecdn.com/ss_thumbnails/1112pdf-131112125424-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
2013 HTML5カンファレンス レスポンシブWebデザイン
- 2.
- 3. 〜自己紹介〜 Job： ・ U-SYS（ webprofessional fellow） ・ デジタルハリウッド（ソーシャルアプリクリエイター専攻） ・ デジタルハリウッド（オンライン：PHP、Webアプリ開発） ・ Web関連のセミナー（全国各地、ヒカ☆ラボ） Microsoft MVP （Bing Maps Development） 執筆＆記事： 日経ソフトウエア、＠IT、ITpro、Software Designなど、IT関 連のメディアで情報発信中。＠IT「HTML5アプリ作ろうぜ」を連載。日経 PC21「名作フリーソフトを訪ねて」でも自身の開発したアプリが選出。 HTML5アプリ「impress.js design」ChromeWebストアにて公開中。
- 5. 従来求められてるWebサイト 0 情報を正しく表示するサイト 0 目的の情報を探しやすいサイト 0集客を上げられるサイト SEO、広告、ソーシャルメディアとの連携 0 バリアフリーなサイト 視覚障害者（画面を見れない）、身体障害者（マウス使えない）、 高齢者
- 6.
- 7. 今これから求められるWebサイト 0 情報を正しく表示するサイト 0 目的の情報を探しやすいサイト 0集客を上げられるサイト 0 バリアフリーなサイト 0 マルチデバイス対応 PC、携帯電話＋スマートフォン、タブレットなど やること増えたね
- 8.
- 9.
- 10.
- 11.
- 12. 従来のマルチデバイス対応方法 サーバサイド、クライアントスクリプトにて切り分け <?php /* UserAgentSwitch */ $ua=$_SERVER['HTTP_USER_AGENT']; if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’And roid’)!==false)) { header(“Location:/sp/index.php”); exit(); } ?>
- 13.
- 14. ワンソースでマルチデバイス対応 （レスポンシブWebデザイン） ・ Javascript のようなプログラミング （スクリプト）知識は必要ない ・CSSの知識で作成できる ・ ワンソース （HTMLとCSS）で作成可能 ブラウザのスクリーンサイズ（解像度） を基準にレイアウトを調整することがで きるのでマルチスクリーンに対応した Webサイトを制作できるのが特徴です。 デザイナーの方には是非覚えてほしい手法です
- 15. レスポンシブWebデザイン 誰が？いつ頃から？ レスポンシブWebデザイン提唱者： ETHAN MARCOTTE氏（イーサン・マルコット氏） 2010年5月25日 にブログで紹介したマルチデバイス対応のWebサイト制作の 手法 「RWD」です。
- 16. レスポンシブWebデザイン どんなことができるの？ レスポンシブWebデザイン提唱者： ETHAN MARCOTTE氏（イーサン・マルコット氏） 記事内容： MediaQueryを使ってレイアウトし、例えば１カラムを２カラム に流動的に変形させる事を指し、閲覧されたそのデバイスの解像度によって 柔軟に、シンプルに最適化（フルードグリッド、フルードイメージ）させ る。
- 17.
- 18.
- 20.
- 21.
- 22.
- 23. Media Query 書き方１ @media ひとつのCSS 振り分け @mediascreen and (min-width: 481px) { body {...} } @media screen and (min-width: 768px) { body {...} } Link 複数CSSファイルをlink 読み込む <link href=”sp.css"> <link media="screen and (min-width: 481px)" href="tablet.css"> <link media="screen and (min-width: 768px)" href="desktop.css"> @import 複数CSSファイルをimport要素 読み込む @import url(”sp.css"); @import url("tablet.css") only screen and (min-width: 481px); @import url("desktop.css") only screen and (min-width: 768px);
- 24. Media Query 書き方２ @mediaが使いやすい <link… @import… 複数CSSファイルに分けてブレイクポイント（スマホ、タブレット、パソコ ン）を管理するとスタイル管理しやすくなりそうですが、 @mediaの方法で単一CSS 、 「 HTTPリクエスト数を節約できる 」 特典があります。 スマートデバイスの３G回線にもよい。
- 26.
- 27. レスポンシブをIE6〜8 使う方 法 css3-mediaqueries.js html5shiv.js <!--[if lt IE9]> <script src="js/html5shiv.js"></script> <![endif]--> css3-mediaqueries.js <!--[if lt IE 9]> <script src="js/css3-mediaqueries.js"></script> <![endif]-->
- 28.
- 29. viewport Viewport viewport指定できること • モハ 表示幅を指定 • 、拡大縮小の可否の指定 • 拡大縮小の最大・最少倍率の指定 記載方法 •<meta name=“viewport” content=“width=1024”> ※ 例：アップルサイト • <meta name=“viewport” content=“device-width”> ※端末画面の幅に合わせる
- 30.
- 31.
- 32. CSS タブレット向けのスタイル：481px ～ @media onlyscreen and (min-width: 481px) { //*********[ １:Start ]******** } PC向けのスタイル：769px～ @media only screen and (min-width: 769px) { } //*********[ ２:Start ]********
- 33.
- 34. img Img要素（フルードイメージ） width・height属性を なります フルードイメージ img { max-width: 100%; height:auto; } IE 7以下では縮小された画像が粗く見える。 この問題はimgSizer.jsというjsで対処できる。次ページへ＞＞
- 35. img imgSizer.js <!--[if lte IE7.0]> <script type="text/javascript" src="imgSizer.js"></script> <![endif]-->
- 36.
- 38.
- 39.
- 40.
- 41.
- 42. 参考サイト Adobe社 「Dreamweaver CS6 とHTML5 で始めようスマートフォン＆タブレット対応」 http://adobe-html5.jp/ アドビシステムのHTML5特設サイトもレスポンシブWebデザインで作成され てます。ブレイクポイントは0〜520pxの場合は1カラムレイアウト、520px〜 920pxの間は2カラムレイアウト、920px〜より大きい場合は3カラムレイアウ トの表示となります。 ブレイクポイント：520px, 920px