覚書も兼ねてレスポンシブwebデザインについて
レスポンシブwebデザインの説明の一つです。
そもそも、レスポンシブWebデザインとは何か？
昨今PC、スマートフォン、タブレットPC、はたまたその他サイネージなど数多くのデバイスが登場している事を背景に、端末毎に合わせたページを作成する のではなく、単一のHtmlファイルで、CSSで各画面サイズ毎に対応したレイアウトを調整することによってマルチデバイスに最適化したWebサイトを作 ることができる技術になります。
例えば、スマートフォンユーザー向けのサイトというと、それまでは①各端末毎に合わせたページを作り、ユーザーエージェントという技術を用いてアクセスし てくる端末を判別し該当するページへ振り分け表示をさせるというものか、②ＰＣサイトをスマートフォン向けページに自動変換するやり方が主流でした。
これに対し、レスポンシブWebデザインではブラウザのスクリーンサイズを基準にレイアウトを自動で切り替える仕組みになりますので端末毎にわざわざペー ジを作成する必要がなく、にも関わらず画面サイズが異なる端末でアクセスした際でもどのように表示させるのか最適化を踏まえた作りにする事が可能となりま す。
WordPress に付属しているテーマは、Twenty Eleven からレスポンシブWebデザインに対応しており、私は、Twenty Twelve でいろいろ確認をしてみたのですが、デバイスに合わせてよきに計らってくれるのはありがたい反面、モバイル端末で見切れや画像のアスペクト比が変わるという症状が出てしまいました。（[nob] モバイル端末の表示）
以下注意点です。
- 表
- 画面の幅が狭くなっても表の幅が変わらないので表の右が見切れる。
- レスポンシブ対応の表に変換するプラグインがあるので、それで対応ができるかもしれない。
- YouTube
- YouTube の画像は画面の幅が狭くなると横幅は狭くなるが、縦の長さが変わらないので、アスペクト比が変わって縦長になる。
- YouTubeの画像のサイズを小さくしておけばアスペクト比が変わることはないはずですが、画像が小さくなるので、PC で見た時には物足りないかも。
- マウスオーバーを使った画像
- マウスオーバーを使った処理は画像のサイズを選べば、アスペクト比がおかしくなる確率は低くなりますが、YouTube の画像と同様、あまり大きくしない方が良いかもしれません。テーマに依存するので、きちんと対応する場合には一手間かかりそう。
- サムネイルの幅が大きな画像の幅より狭くなるようにサムネイルの数を調整する。そうしないと、サムネイルが途中で改行され２段で表示されます。
レスポンシブWebデザインでホームページを作成する場合、端末によって画面のレイアウトが変化するので、まずはスマートフォンのような小さな画面で読みやすく表示できることを確認して徐々にサイズの大きな画面でも問題ないことを確認するという流れになるかと思います。
簡易的に確認するなら、ブラウザの画面の幅を狭くしてみるとレイアウトの変化がわかりますし、投稿前に画面サイズを変えてプレビューできるプラグインもあったと思います。（私はまだ動作確認していませんが）
