読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

「レスポンシブルなテーマの作り方」@HissyNC #wbkobe

第12回 WordBench神戸 2012/06/03

レスポンシブルなテーマとは?

レスポンシブ・ウェブデザインに対応したデザイン

画像解像度をベースに表示を切り替える。
(画面の幅に合わせてレイアウトも変わる。ソースは変わらないが、
幅に合わせて自動的にCSSを変更している)

レイアウトはおろかフォントのサイズも動的に変更される。

モバイル最適化するための技術なのか?

単にPCをモバイルに変換、という手法ではない。
(Google Analyticsとかで解析してみるといろいろなデバイスでサイトにアクセスしている)

IE未対応

レスポンシブウェブデザインの利点

  • 制作コストの削減
    • UIで切り替えてそれぞれ作りこんでいくのは大変
    • カスタム投稿タイプにテンプレートで対応する作業、基本テーマとWPtouchのテーマで2回やりたいのか?
  • 各デバイスに適した見せ方ができる(という建前)
  • コンテンツの管理が楽
    • 更新者はモバイルで確認する必要がない(エミュとか引っぱりだす必要がない)

レスポンシブウェブデザインの利点

  • マークアップエンジニアの力量が要る(モノによっては無理なときもある)
  • 場合によってはデザインの差し戻しもありうる
    • プロジェクト関係者全体でデザインが共有されている必要がある
  • 仕様が完璧ではない(すごく流動的)
  • 個別対応よりユーザーがダウンロードするデータ量が増える
    • CSSの記述量が増える(画像サイズは結局同じもの)
  • iPhoneがキレイすぎる功罪
    • PCと等倍だと画像が荒く見えてしまう

レスポンシブウェブデザインの確認

  • 実機
  • エミュ
  • Webサービス(responsive.js)

メタ情報

1. viewport スケール率を調整
minimum-scale
maximum-scale

2. Media Queries
ブラウザ幅によるCSSの条件分岐を行う
iPhone縦 320px
iPhone横 768px
iPad縦 960px
iPad横、PC

widthによってCSSを変更することが出来る。

例1. TwitterCSSのライブラリを配っている

例2. HTML5-Reset

例3. Twenty Eleven
800px 650px 450px....
320pxと480px

モバイル対応が主な使いどころなので、
IEはもう無視していいんじゃないだろうか。

具体的に何をするか

http://www.lukew.com/ff/entry.asp?1514

  1. 可変レイアウト
  2. カラム落とし(狭くなったらサイドバーを下に落とす、ナビゲーションが2段になる)
  3. レイアウト組み換え
  4. 微調整ですます
  5. 画面外に出す(e.g. FBのiPhoneアプリ)

e.g. Kobe IT Festival
カラム落ちを利用して、左右に配置されているサイドバーが、
メインコンテンツの下に配置される

CSSについて

優先順位の問題から、該当するCSSは一番最後に書くのがよい。
また具体的にはfloatを解除するとか、余白を調整することが多い。

ナビゲーションの問題

  1. はじめから可変にしておく
  2. 無理くり調整する
  3. 想定される解像度に合わせてエレメントを用意する

画像の問題

  • 最大幅の設定が基本
  • GoogleMapで不具合を起こすこともある

iframeの問題

  • 縦長になってしまってイマイチ
  • 外側をdivで囲むというテクニックもあるにはある
  • けどWordPressYouTube埋め込みはdivで囲んでくれない


レスポンシブ対応しているCSSライブラリやjQueryプラグインを選ぶ

  • Bootstrap, from Twitter (レスポンシブ対応の手本)を
  • ResponsiveSlider.js

レスポンシブなWordPressテーマもあるにはあるけど、
有料機能に誘導するものが多い。カスタマイズ用途では使いにくい。