レスポンシブウェブデザインに効くこの一言!のはなし
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,091 views

WordBench福井 ...

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

Statistics

Views

Total Views
2,091
Views on SlideShare
2,084
Embed Views
7

Actions

Likes
1
Downloads
18
Comments
0

3 Embeds 7

http://japanese-slideshare.com 4
http://localhost 2
http://s.deeeki.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • レスポンシブウェブデザインに効くこの一言!のはなし。カウベル・コーポレーション 森川徹志 Copyright 2012 COWBELL Corporation. Some rights reserved
  • 森川徹志(もりかわ・てつし)自己紹介● 福井市生まれ● 雑誌・パンフ・サイト等を編集・制作● WordPress歴7年目(バージョン2.0.xより)● 仕事(受託・自社サービス)でも個人でもWP活用 Copyright 2012 COWBELL Corporation. Some rights reserved
  • 最近ヒットしたブログネタ 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. Some rights reserved
  • 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. Some rights reserved
  • 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; ?> コーディング例 Copyright 2012 COWBELL Corporation. Some rights reserved
  • $is_iphone が true になる条件● User-Agent(UA)文字列に safari がある (大文字・小文字を区別しない)● かつ UA文字列に mobile がある (大文字・小文字を区別しない) Copyright 2012 COWBELL Corporation. Some rights reserved
  • $is_iphone が true になる環境● iOS (iPhone, iPod touch, iPad)● Android 標準ブラウザ Dolphin Browser HD Copyright 2012 COWBELL Corporation. Some rights reserved
  • 余談Copyright 2012 COWBELL Corporation. Some rights reserved
  • $is_iphone のありか   INSTALL_DIR    wp-includes     vars.php ←ここ   Copyright 2012 COWBELL Corporation. Some rights reserved
  • $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 Corporation. Some rights reserved
  • Thanks! tetsushi.morikawa Copyright 2012 COWBELL Corporation. Some rights reserved