レスポンシブウェブデザインに効くこの一言!のはなし。カウベル・コーポレーション 森川徹志        Copyright 2012 COWBELL Corporation.                Some rights reserved
森川徹志(もりかわ・てつし)自己紹介●   福井市生まれ●   雑誌・パンフ・サイト等を編集・制作●   WordPress歴7年目(バージョン2.0.xより)●   仕事(受託・自社サービス)でも個人でもWP活用             Co...
最近ヒットしたブログネタ   Copyright 2012 COWBELL Corporation.           Some rights reserved
FB+Tw効果でアクセスが普段の2倍      Copyright 2012 COWBELL Corporation.              Some rights reserved
さて、レスポンシブデザイン。    Copyright 2012 COWBELL Corporation.            Some rights reserved
レスポンシブウェブデザインとは?●   ブラウザの横幅でレイアウトが変わる●   (x)HTMLファイルは単一●   CSS3で横幅を判断しレイアウト制御           Copyright 2012 COWBELL Corporation...
WordPressでの例  Copyright 2012 COWBELL Corporation.          Some rights reserved
PCで見たTwenty Eleven     Copyright 2012 COWBELL Corporation.             Some rights reserved
iPhoneで見たTwenty Eleven       Copyright 2012 COWBELL Corporation.               Some rights reserved
CSS3 の Media Queries      Copyright 2012 COWBELL Corporation.              Some rights reserved
PC                                         iPhone拙作『へやさがす.net』       Copyright 2012 COWBELL Corporation.               Som...
Copyright 2012 COWBELL Corporation.        Some rights reserved
Copyright 2012 COWBELL Corporation.        Some rights reserved
Copyright 2012 COWBELL Corporation.        Some rights reserved
デバイスに応じて文字列を変える?     Copyright 2012 COWBELL Corporation.             Some rights reserved
$is_iphoneCopyright 2012 COWBELL Corporation.        Some rights reserved
<?phpglobal $is_iphone;if ( $is_iphone ) :?><p>スマホorタブレットの場合の文字列</p><?php else : ?><p>PCの場合の文字列</p><?php endif; ?>        ...
$is_iphone が true になる条件●   User-Agent(UA)文字列に safari がある    (大文字・小文字を区別しない)●   かつ UA文字列に mobile がある    (大文字・小文字を区別しない)    ...
$is_iphone が true になる環境●   iOS    (iPhone, iPod touch, iPad)●   Android    標準ブラウザ    Dolphin Browser HD               Copy...
余談Copyright 2012 COWBELL Corporation.        Some rights reserved
$is_iphone のありか   INSTALL_DIR     wp-includes      vars.php ←ここ            Copyright 2012 COWBELL Corporation.            ...
$is_winIEまあまあ使えそう Copyright 2012 COWBELL Corporation.         Some rights reserved
$is_opera使わなくもない…かな…   Copyright 2012 COWBELL Corporation.           Some rights reserved
$is_NS4えっ? えっ? Copyright 2012 COWBELL Corporation.         Some rights reserved
レスポンシブウェブデザインへの対応●   レイアウト    →CSS3 の Media Queries を利用●   文字列    →$is_iphone を有効活用             Copyright 2012 COWBELL Cor...
Thanks!     tetsushi.morikawa          Copyright 2012 COWBELL Corporation.                  Some rights reserved
Upcoming SlideShare
Loading in …5
×

レスポンシブウェブデザインに効くこの一言!のはなし

2,809
-1

Published on

WordBench福井 第8回勉強会(2012年4月21日)で発表したライトニングトークのスライドです。レスポンシブウェブデザインのテンプレートを作る際に便利な変数を紹介しています。

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,809
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

レスポンシブウェブデザインに効くこの一言!のはなし

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

    Clipping is a handy way to collect important slides you want to go back to later.

×