レスポンシブウェブデザインに効くこの一言!のはなし
DESCRIPTION
WordBench福井 第8回勉強会(2012年4月21日)で発表したライトニングトークのスライドです。レスポンシブウェブデザインのテンプレートを作る際に便利な変数を紹介しています。TRANSCRIPT
![Page 1: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/1.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
レスポンシブウェブデザインに効くこの一言!のはなし。
カウベル・コーポレーション 森川徹志
![Page 2: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/2.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
森川徹志(もりかわ・てつし)自己紹介
● 福井市生まれ
● 雑誌・パンフ・サイト等を編集・制作
● WordPress歴7年目(バージョン2.0.xより)
● 仕事(受託・自社サービス)でも個人でもWP活用
![Page 3: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/3.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
最近ヒットしたブログネタ最近ヒットしたブログネタ
![Page 4: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/4.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
FB+TwFB+Tw効果でアクセスが普段の効果でアクセスが普段の22倍倍
![Page 5: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/5.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
さて、レスポンシブデザイン。
![Page 6: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/6.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
レスポンシブウェブデザインとは?
● ブラウザの横幅でレイアウトが変わる
● (x)HTMLファイルは単一
● CSS3で横幅を判断しレイアウト制御
![Page 7: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/7.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
WordPressでの例
![Page 8: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/8.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
PCPCで見たで見たTwenty ElevenTwenty Eleven
![Page 9: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/9.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
iPhoneiPhoneで見たで見たTwenty ElevenTwenty Eleven
![Page 10: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/10.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
CSS3 CSS3 の の Media QueriesMedia Queries
![Page 11: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/11.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved 拙作『へやさがす拙作『へやさがす.net.net』』
PC iPhone
![Page 12: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/12.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
![Page 13: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/13.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
![Page 14: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/14.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
![Page 15: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/15.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
デバイスに応じて文字列を変える?
![Page 16: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/16.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
$is_iphone$is_iphone
![Page 17: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/17.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
コーディング例コーディング例
<?php
global $is_iphone;
if ( $is_iphone ) :
?>
<p>スマホorタブレットの場合の文字列</p>
<?php else : ?>
<p>PCの場合の文字列</p>
<?php endif; ?>
![Page 18: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/18.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
$is_iphone が true になる条件
● User-Agent(UA)文字列に safari がある
(大文字・小文字を区別しない)
● かつ UA文字列に mobile がある
(大文字・小文字を区別しない)
![Page 19: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/19.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
$is_iphone が true になる環境
● iOS
(iPhone, iPod touch, iPad)
● Android
標準ブラウザ
Dolphin Browser HD
![Page 20: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/20.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
余談
![Page 21: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/21.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
$is_iphone のありか
INSTALL_DIR
wp-includes
vars.php ←ここ
![Page 22: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/22.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
まあまあ使えそうまあまあ使えそう
$is_winIE
![Page 23: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/23.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
使わなくもない…かな…使わなくもない…かな…
$is_opera
![Page 24: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/24.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
えっ? えっ?えっ? えっ?
$is_NS4
![Page 25: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/25.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved
レスポンシブウェブデザインへの対応
● レイアウト
→CSS3 の Media Queries を利用
● 文字列
→$is_iphone を有効活用
![Page 26: レスポンシブウェブデザインに効くこの一言!のはなし](https://reader033.vdocuments.mx/reader033/viewer/2022060110/55614cd1d8b42a857d8b4bbc/html5/thumbnails/26.jpg)
Copyright 2012 COWBELL Corporation.Some rights reserved Thanks! Thanks! tetsushi.morikawatetsushi.morikawa