View
8.291
Download
3
Category
Preview:
Citation preview
小川 裕之
レスポンシブWebデザインの基礎と WordPressを使った最適化の手法
WordBench東京7月 モバイル勉強会
印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める。
制作会社でデザイン、コーディング、ディレクション、
コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。
「レスポンシブWebデザイン入門」執筆
小川 裕之
barchin hiro.ogw
本日の流れ
•レスポンシブWebデザインの実装方法 •グリッドシステム・CSSフレームワークの紹介 •RWDとWordPressを組み合わせて最適化を •まとめ
レスポンシブWebデザインの実装
ワンソースで各デバイスの画面サイズに 対応したレイアウトを実現
HTML
CSSCSS CSS
幅768px 以下
幅480px 以下
幅769px 以上
RWDを実現する要素
•Fluid Grid
•Fluid Image
•Media Queries
•viewport
Fluid Grid
規則性をもったライン（Grid）にそって コンテンツを配置
Grid Design
グリッドの幅を相対値で指定
Fluid Grid
%
求める要素の幅÷親要素の幅×100%
相対値の求め方
620px 300px
960px
60px 20px
=64.58333%300÷960×100
960px
相対値の求め方
620÷960×100=31.25%
求める要素の幅÷親要素の幅×100%
Fluid Grid Systemが便利
pxからいちいち計算するのは手間
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
960px
60px 20px
1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 3カラム= (60px×3+20×2) ÷960px×100%=22.91667% 4カラム= (60px×4+20×3) ÷960px×100%=31.25% 5カラム= (60px×5+20×4) ÷960px×100%=39.5833%
12カラム=(60px×12+20×11)÷960px×100%=97.9166%
8カラム 4カラム
100%
=31.25%=64.58333%
Gridに沿ってレイアウトすると実装しやすい
px %
幅を相対値にする
box-sizing
margin (50px)
border(20px)
padding (50px)
box-sizing:content-box
contents (100px)
width (100px)
margin (50px)
border(20px)
padding (50px)
box-sizing:border-box
contents (100px)
width (240px)
12
Xカラムの幅=(Xカラム÷最大カラム数)×100%
12
1カラム=1÷12×100%=6.25% 2カラム=2÷12×100%=16.6666% 3カラム=3÷12×100%=25% 4カラム=4÷12×100%=33.3333% 5カラム=5÷12×100%=41.6666% 6カラム=6÷12×100%=50%
12カラム=12÷12×100%=100%
.col1,col2,col3,……col12{ padding: 0 10px; }
width
padding:10px
Fluid Image
画像が親要素より はみ出してしまう
画像を可変にする
画像を可変にする
img{ max-width: 100%; height: auto;
}
CSS
親要素内に 収まる
Media Queries
メディアタイプと特性に関する条件を調べ その結果に応じて処理を行う
@media screen and (min-width: 640px){ body{ background-color: red; }
}
メディアがスクリーンで表示領域幅が 640px以上の場合背景色を赤にする
メディアタイプ メディア特性
CSS
メディア特性 情報 max-/min-
width 表示領域の幅 ○
height 表示領域の高さ ○
device-width デバイスの横方向の解像度 ○
device-height デバイスの縦方向の解像度 ○
orientation 表示領域の向き ☓
resolution 解像度 ○
body{ backgorund-color:red; }
モバイルファースト
1025px768px
全サイズ に適用
body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } }
モバイルファースト
1025px768px
幅768px 以上に適用
全サイズ に適用
幅1025px 以上に適用
body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } @media screen and (min-width:1025px){ body{ background-color:green; } }
モバイルファースト
1025px768px
幅768px 以上に適用
全サイズ に適用
body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } @media screen and (max-width:767px){ body{ background-color:green; } }
767px1024px
デスクトップファースト
幅767px 以下に適用
幅1024px 以下に適用
全サイズ に適用
Viewport
Viewportに指定されたサイズで ページを描画する
980pxのウインドウサイズで アクセスしたときと同じ表示
<meta name="viewport" content="width=device-width, initial-scale=1">
そのデバイスの幅で サイトが表示される
もっと効率化を
Grid System
さらにラクをする
CSSフレームワーク
CSSフレームワークのメリット
•簡単にRWDに対応できる •検証の手間が減る •作業時間の短縮
DEMO
8カラム 4カラム
CSSフレームワークのデメリット
•学習コスト •カスタマイズしにくい •余分なコンポーネントがある
WordPressを活用してさらに最適化を
HTML
CSSCSS CSS
HTML
CSSCSS CSS
CSSのみでは、できることに制限がある
構成の制限
1
2 3
4 1432
.hidden-pc{ display:none; } @media screen and (max-widht:768px){ .hidden-pc{ display:block; } .hidden-mobile{ display:none; } }
768px.hidden-pc
CSSで表示・非表示切り替え
CSS
.hidden-sp .hidden-pc.hidden-sp
まだ実用的でない
画像サイズの問題
光回線 3G回線
表示に時間が かかる
<script src="matchmedia.js"></script> <script src="picturefill.js"></script> ! <span data-picture data-alt="pic"> <span data-src="img/smallImage.jpg"></span> <span data-src="img/largeImage.jpg" media="(min-width: 600px)"></span> <noscript><img src="img/smallImage.jpg" alt="pic"></noscript> </span>
600pxsmallImage.jpg
largeImage.jpg
JavaScriptのライブラリ
CSS
<img alt="" src="default.jpg" srcset="small.jpg 320w, large.jpg 768w, 2x.jpg 2x” />
Responsive Image
幅320px以下
幅768px以下 デバイスピクセル比2
手間がかかる。 まだ使えない。
RESSResponsive design with server-side components
RWD ×
User Agent
HTML HTML HTML
User Agent
WordPressの関数を使う
<?php if(wp_is_mobile()): ?> <p>mobile</p>
<?php else: ?> <p>PC</p> <?php endif; ?>
PHP
PHPを使う
function is_sp() { $ua=$_SERVER['HTTP_USER_AGENT']; if( strpos($ua, 'iPhone') !== false || strpos($ua, 'Android') !== false){ return true; }else{ return false; } }
<?php if(is_sp()): ?> <p>smart phone</p> <?php else: ?> <p>tablet and PC</p> <?php endif; ?>
PHP
User Agent
smallImage.jpg
largeimage.jpg
WordPressの関数の組み合わせ
<?php $small_image = wp_get_attachment_image_src( get_post_meta($post->ID,’galleryimg’,true),'medium'); $large_image = wp_get_attachment_image_src( get_post_meta($post->ID,’galleryimg',true),'large'); ?> !!<?php if(wp_is_mobile()): ?> <img src="<?php echo $small_image[0]; ?>"> <?php else:?> <img src="<?php echo $large_image[0]; ?>"> <?php endif;?>
PHP
各手法のメリット・デメリット
手法 メリット デメリット
レスポンシブWebデザイン
更新がラク
URLがひとつ
無数のデバイスに適応できる
構成の制限
設計が難しい
テストの工数が増える
デバイス専用サイトデバイスの特性にあった最適化ができる
デザインの自由度が高い
開発コストがかかる
更新の手間がかかる
新しいデバイスを判定する必要がある
プログラム変換
更新が比較的ラク
URLが共通
デザインの自由度が高い
開発コストがかかる
新しいデバイスを判定する必要がある
スマートフォンのシェア
Android iOS 他
63.0%
35.6%
1.4%
MM総研 携帯電話利用者に対するアンケート調査および出荷統計データ(2013)
スマートフォンのシェア
Android iOS 他
63.0%
35.6%
1.4%
MM総研 携帯電話利用者に対するアンケート調査および出荷統計データ(2013)
AndroidとiOSでほぼ100%
まとめ
本日のまとめ
・RWDはワンソースでマルチデバイスに対応する手法
・RWDを実装する要素（Fluid Grid,Fluid Image,Media Queries,viewport） ・グリッドシステム、CSSフレームワークを使って ラクをする
・WordPressの特性を活かしてより最適化を
ありがとうございました
Recommended