Downloaded 19 times
![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](https://image.slidesharecdn.com/wordbenchrwd-140709214312-phpapp02/85/WordBench-7-Web-WordPress-74-320.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](https://image.slidesharecdn.com/wordbenchrwd-140709214312-phpapp02/85/WordBench-7-Web-WordPress-76-320.jpg)
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
- 1.
- 2. 印刷会社で DTP オペレーターとして2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin hiro.ogw
- 3.
- 4.
- 5.
- 6. RWDを実現する要素 •Fluid Grid •Fluid Image •MediaQueries •viewport
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. 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%
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. .col1,col2,col3,……col12{ padding: 010px; } width padding:10px
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. @media screen and(min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域幅が 640px以上の場合背景色を赤にする メディアタイプ メディア特性 CSS
- 30. メディア特性 情報 max-/min- width表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ☓ resolution 解像度 ○
- 31.
- 32. body{ backgorund-color:red; } @media screen and(min-width:768px){ body{ backgorund-color:blue; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用
- 33. 幅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 以上に適用 全サイズ に適用
- 34. 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 以下に適用 全サイズ に適用
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. CSS Flexible BoxLayout Module Level 1
- 61.
- 62. .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
- 63.
- 64.
- 65.
- 66. <script src="matchmedia.js"></script> <script src="picturefill.js"></script> ! <spandata-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> 600px smallImage.jpg largeImage.jpg JavaScriptのライブラリ CSS
- 67. <img alt="" src="default.jpg"srcset="small.jpg 320w, large.jpg 768w, 2x.jpg 2x” /> Responsive Image 幅320px以下 幅768px以下 デバイスピクセル比2
- 68.
- 69. RESS Responsive design withserver-side components
- 70.
- 71.
- 72.
- 73. WordPressの関数を使う <?php if(wp_is_mobile()): ?> <p>mobile</p> <?phpelse: ?> <p>PC</p> <?php endif; ?> PHP
- 74. 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
- 75.
- 76. 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
- 77.
- 78. スマートフォンのシェア Android iOS 他 63.0% 35.6% 1.4% MM総研携帯電話利用者に対するアンケート調査および出荷統計データ(2013)
- 79. スマートフォンのシェア Android iOS 他 63.0% 35.6% 1.4% MM総研携帯電話利用者に対するアンケート調査および出荷統計データ(2013) AndroidとiOSでほぼ100%
- 80.
- 81.
- 82. 本日のまとめ ・RWDはワンソースでマルチデバイスに対応する手法 ・RWDを実装する要素 （Fluid Grid,Fluid Image,MediaQueries,viewport） ・グリッドシステム、CSSフレームワークを使って ラクをする ・WordPressの特性を活かしてより最適化を
- 83.