Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to レスポンシブデザインってなに？
Similar to レスポンシブデザインってなに？ (20)
レスポンシブデザインってなに？
- 1. Skill Project 2016年度 技術向上プロジェクト 第三回社内勉強会 2016年2月10日開催 ▲ ResponsiveDesignってなに？ 第三回勉強会 後半戦（43ページ）
- 2. 222 1. レスポンシブ（Web）デザインとは 2. レスポンシブデザインに注目する背景 3. レスポンシブデザインの４つのポイント 4. レスポンシブデザインのメリットとデメリット 5. レスポンシブデザインサイト構築にあたって 6. フレームワーク（ CSS+JavaScript ） 本日の内容
- 3. 333レスポンシブ（Web）デザインとは • レスポンシブデザイン 【responsive design】 レスポンシブデザインとは、Webデザインの手法の一つで、 様々な種類の機器や画面サイズに単一のファイルで対応すること。 WebサイトやWebページをパソコンやスマートフォン、 タブレット端末など複数の機器や画面サイズに対応させる際、 内容が同じでデザインや動作をそれぞれに最適化した複数の HTMLファイルやCSSファイルを用意し、HTTPリダイレクト などでアクセスを振り分ける手法がよく用いられる。 ※リダイレクト処理 ユーザーアクセス端末（ユーザーエージェント）に応じて、Webサー バーで設定されたURLへ転送する仕組み。 !
- 4. 444レスポンシブ（Web）デザインとは • レスポンシブデザイン 【responsive design】 レスポンシブデザインではこのような対応はせず、表示された 機器の種類やサイズに応じて表示内容が最適な状態に変化する よう設定された単一のファイルを制作し、すべての機器に同じ ように送信する。 複数のファイルを用意する場合に比べ、デザインや機能の自由度 は下がるが、すべての機器に同じ内容を表示でき、更新作業の 簡略化や更新漏れの防止が期待できる。 検索エンジンやアクセス解析に内容が重複した複数の異なるURL が出現することも避けられる。 ※IT用語辞典より
- 8. 888 • ユーザー視点で考えると？ 1. コーポレート・プロモーション・EC・業務システム問わず、 サイトを閲覧する端末や解像度が多様化している。 • 開発者視点で考えると？ 1. メンテナンス性の向上が図れる。 2. 管理ファイル数の削減により、更新作業の簡略化や更新漏れ の防止が期待できる。 • SEO（検索エンジン最適化）視点で考えると？ 1. URLが統一されるのでページランクが分散する心配が少ない。 レスポンシブデザインに注目する背景
- 11. 111111アクセス端末（画面サイズ）の判別 • Webサイトにアクセスしてきた端末の判別方法は？ 1. CSS3 Media Queries で判別する。 2. ユーザーエージェント で判別する。
- 12. 121212 • CSS3 Media Queries メディアクエリは、CSSスタイルに適用できるシンプルな フィルタである。 メディアクエリを使用すると、デバイスの種類、幅、高さ、向き、 解像度など、コンテンツをレンダリングするデバイスの特性に 基づいてスタイルを容易に変更できるようになる。 ※Google Developersより アクセス端末（画面サイズ）の判別
- 13. 131313 • CSS3 Media Queries 【HTML】 <meta name="viewport" content="width=device-width, initial-scale=1"> 【CSS】 @media screen and (min-width: 768px) { /* view portが768px以上の場合に適用される */ div#wrapper { width: 960px; } } @media screen and (max-width: 479px) { /* view portが479px以下の場合に適用される */ div#wrapper { width: 100%; } } アクセス端末（画面サイズ）の判別
- 15. 151515 • ユーザーエージェント 【Javascript】 <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { document.write('<link rel="stylesheet" type="text/css" href="css/smartphone.css">'); }else { document.write('<link rel="stylesheet" type="text/css" href="css/pc.css">'); } </script> アクセス端末（画面サイズ）の判別
- 21. 212121 • 表示する画面サイズで要素サイズを可変する。 1. 画像 2. 要素ブロック 3. フォントサイズ オートサイジング
- 25. 252525 • 表示する画面サイズで要素の表示／非表示を制御する。 1. 画像 2. ナビゲーション 3. 広告 要素のON/OFF
- 28. 282828 • メンテナンス性の向上。 1. 共通ファイルの更新で、全デバイス対応できる。 2. 用途に応じてどのエージェントをターゲットとするか考慮 しないと、デザインの統一性や機能の破綻、最悪エージェン ト別に同一機能を二重実装する事態に陥り、開発やメンテナ ンスのコスト工数の増大に繋がる。 ユーザー要件に基づいてどこまで考慮にいれるか、設計初期 段階で抑えておくべき事項である。 レスポンシブデザインのメリットデメリット
- 29. 292929 • 一貫性のあるデザイン。 1. デザインが統一されていることで、ユーザーがどの端末から 閲覧しても、イメージと操作感が保障される。 • デザイン設計に時間がかかる。 レスポンシブデザインのメリットデメリット
- 30. 303030 • デバイス別のユーザーのニーズを考慮する必要がある。 1. 例えば「飲食店Webサイト」であれば？ レスポンシブデザインのメリットデメリット いろいろな店の メニューや値段 を比較したい！ 店の地図や 営業時間を 確認したい！ PCから閲覧するユーザー スマフォから閲覧するユーザー
- 31. 313131 • Internet Explorer 8以下への対応が必要？ 1. 少し古い解説サイトだと、IE8以下への対応にふれているが、 Microsoftのポリシーが変わり、基本的にサポート外となる為、 対応は不要となった。 2014 2015 2016 2017 2018 2019 2020 2021 Internet Explorer 11 Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 Windows7の場合のサポート ※atmarkITより レスポンシブデザインのメリットデメリット
- 33. 333333 • 参考）おすすめ書籍 レスポンシブデザインのメリットデメリット Web担当者よ、古いIEを捨てて モダンブラウザに今すぐ対応せよ 物江修, 春日井良隆, 小山健治, 伊藤秀樹, Web担当者Forum編集部
- 37. 373737 • 主にCSS（デザイン面）とJavaScript（機能面）が統合 されたパッケージ。 1. BootStrap 2. Foundation 3. YahooPure 4. Responsive Grid System 5. Material Design Lite フレームワーク（CSS+JavaScript）
- 39. 393939 • BootStrapを例にレスポンシブグリッド実装してみる。 1. row内のcolのグリッド数を12とし、どのような割合で 分割するか設定する。 フレームワーク（CSS+JavaScript） 左 <div class="container"> <div class="row"> <div class="col-sm-3">左</div> <div class="col-sm-6">中央</div> <div class="col-sm-3">右</div> </div> </div> 中央 右
- 40. 404040 • BootStrapを例にレスポンシブグリッド実装してみる。 1. row内のcolのグリッド数を12とし、どのような割合で 分割するか設定する。 フレームワーク（CSS+JavaScript） <div class="container"> <div class="row"> <div class="col-sm-6">左</div> <div class="col-sm-6">右</div> </div> </div> 右左
- 41. 414141 • BootStrapを例にレスポンシブグリッド実装してみる。 2. colのプレフィックスを分岐点にし、グリッドが可変する。 フレームワーク（CSS+JavaScript） <div class="container"> <div class="row"> <div class="col-sm-6">左</div> <div class="col-sm-6">右</div> </div> </div> 右 左 プレフィックス「sm」では、端末が幅が768px未満の場合に可変
- 42. 424242 • BootStrapを例にレスポンシブグリッド実装してみる。 3. colのプレフィックスは様々。ターゲットデバイスにより適切 に設定する。 フレームワーク（CSS+JavaScript） デバイス 画面サイズ Prefix デスクトップ 1200px以下 -lg Large デスクトップ 992px～1200px未満 -md Medium タブレット 768px～992px未満 -sm Small モバイル 768px未満 -xs Extra small