スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン

スマホ

新時代に乗り遅れない為の

RWD
RESPONSIVE WEB DESIGN

INVOGUE MARK UP Div 岩村東正

13年3月5日火曜日

PART01

RWDについて

PART02

実際の構築方法について


PART00

RWDについて


RWD

=
スマートフォンやタブレット、
PCなどあらゆるデバイスに対応する制作手法


なぜそうすべきなのか？


スマホユーザーの増加

4割に拡大
40

30

20

10

0
2010年9月 2011年4月 2011年10月 2012年5月 2012年10月

http://www.impressrd.jp/news/121120/kwp2013

RWD


スマホサイト作れば早くない？


良くある書かれてある

メリットとデメリット


メリット
単一のURLになるのでSEO面で強い
メンテナンスが楽(レイアウトによる)

デメリット
重くなる
IE


DEMO


IMJ

http://www.imjp.co.jp/

食べログ

http://tabelog.com/

① サイト作り直すのが面倒

② サイトが重くなってしまうから

③ ユーザーの目的が違うから


コンテンツストラテジー


PC SP

位置固定どこでも

走る、歩きなが
行動座ったまま
ら、電車の中

通信安定不安定

UI 自由画面小


• ユーザーがモバイル端末をどう使用するか、
なぜ使用するかを考慮し設計すること。

• コンテンツを重視すること

• 明瞭で焦点をはっきりさせること


モバイルファースト

コンテンツファースト
ユーザーファースト

まとめ

ユーザーがどのような情報を
求めているのかよく考えよう


PART02

CORDING


01

CSS
02

HTML
03

JAVASCRIPT

MEDIA QUERIES

解像度やデバイスの向きなどから条件を判定


書き方3種類


MEDIA属性
<link rel="stylesheet" media="screen and (max-width:800px)" href="#" />

@IMPORTルール
@import url(example.css) screen and (max-width:800px);

@MEDIAルール GOOD!
@media screen and (max-width:800px) {}


PC用サイトのCSSを上書きする
http://web.invogue.biz/seminar/iwamura/css/common/global.css


<div id="Container">

header

footer

article

</div>

header

article


PC用
/* ==================================================
Header
================================================== */
#Header{
! width:205px;
! height:100%;
! position:fixed;
! top:0;
! left:0;
! z-index:100;
! background:url(../../images/common/
bg_main_shadow.png) repeat-y 0 0;
}
#Header div.header-inline{
! width:202px;
}


スマホ用
/* ==================================================
Header
================================================== */

@media screen and (max-width: 767px){
#Header{
! width:100%;
! height:40px;
! padding:0;
! background:#FFF;
}

}

必要な部分のみ上書きする

HTML


デザイン自体を変更したい

＝
背景画像を使用したマークアップ


<nav>
<ul id="GlobalNav">
<li class="g-nav01"><a href="#">ARAI</a></li>
<li class="g-nav02"><a href="#">HATTORI</a></li>
<li class="g-nav03"><a href="#">AKIBA</a></li>
<li class="g-nav04"><a href="#">IWAMURA</a></li>
<li id="SpClose"><a href="javascript:void(0);">CLOSE</a></li>
</ul>
</nav>


/* 各画像に指定 */
#Header #GlobalNavWrap #GlobalNav li.g-nav01 > a{
! background-image:url(../../images/common/
g_navi_btn01.png);
}
g_navi_btn02.png);
}
g_navi_btn03.png);
}
g_navi_btn04.png);
}


/* SP */
@media screen and (max-width: 767px){
/* 各画像に指定 */
#Header #GlobalNavWrap #GlobalNav li.g-nav01 a{
! background-image:url(../../images/common/sp/
g_navi_btn01.png);
}
g_navi_btn02.png);
}
g_navi_btn03.png);
}
g_navi_btn04.png);
}
}

MENU、CLOSEボタンはPCでは非表示


画像を伸縮させたい

＝
画像に100%の記述


MAX-WIDTH:100%;
img {
max-width: 100%;
border: 0;
vertical-align: top;
}

WIDTH:100%;
<img src="images/index/mainvisual_l.png" width="100%">


100% 50%

33%


JAVASCRIPT


HTML CSSでは実現できない事をサポート


デバイスタイプの取得


Common.getdeviceType = function(){
! ! var deviceType;
! ! var userAgent = window.navigator.userAgent.toLowerCase();
! ! if((userAgent.indexOf('iphone') > -1 &&
userAgent.indexOf('ipad') == -1) || userAgent.indexOf('ipod') >
-1){
! ! ! deviceType='iphone';
! ! } else if(userAgent.indexOf('android') > -1){
! ! ! deviceType='android';
! ! }else if(userAgent.indexOf('windows phone') > -1){
! ! ! deviceType='windowsphone';
! ! }else if(userAgent.indexOf('ipad') > -1 ){
! ! ! deviceType='ipad';
! ! }else{
! ! ! deviceType='pc';
! ! }
! ! !
! ! return deviceType;
};//getbrowserType


ブラウザタイプの取得


Common.getbrowserType = function(){
! ! var browserType;
! ! var userAgent = window.navigator.userAgent.toLowerCase();
! ! var appVersion =
window.navigator.appVersion.toLowerCase();
! ! if(userAgent.indexOf("msie") > -1) {
! ! ! if(appVersion.indexOf("msie 6.") > -1) {
! ! ! ! browserType='ie6';
! ! ! } else if(appVersion.indexOf("msie 7.") > -1) {
! ! ! }
! ! } else if(userAgent.indexOf("firefox") > -1) {
! ! ! browserType='firefox';
! ! } else if(userAgent.indexOf("opera") > -1) {
! ! ! browserType='opera';
! ! } else if(userAgent.indexOf("chrome") > -1) {
! ! ! browserType='chrome';
! ! } else if(userAgent.indexOf("safari") > -1) {
! ! ! browserType='safari';
! ! } else {
! ! ! browserType='unknown';
! ! }
! ! return browserType;
};//getbrowserType


BODYにフラグとなるクラスをつける


Common.switchClass = function(){
! var _w = $('window').width();
! var _h = $('window').height();
! var $body = $('body');
! /**
! * PC---1024px
! * SP---768px以下
! */
var flgWidth = 767;
! $(window).resize(resizeHandler);
! resizeHandler();
! function resizeHandler(){
! ! //widthを再定義
! ! _w = $(window).width();
! ! if(_w <= flgWidth){
! ! ! if(!$body.hasClass('Sp')){
! ! ! ! $body.removeClass('Pc');
! ! ! ! $body.addClass('Sp');
! ! ! }
! ! }else{
! ! ! if(!$body.hasClass('Pc')){
! ! ! ! $body.removeClass('Sp');
! ! ! ! $body.addClass('Pc');
! ! ! }
! ! }
! }
};//

まとめ
@MEDIAルールを使おう

デザインが変わる部分は背景画像で

パーセント指定のレイアウトを心がけよう

JAVASCRIPTはHTML、CSSで補えない部分を


全体まとめ

ユーザー目線を忘れずに


ありがとうございました


スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン

Similar a スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン (20)

Último

Último (9)

スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン