レスポンシブwebデザイン

覚書も兼ねてレスポンシブwebデザインについて

レスポンシブwebデザインの説明の一つです。

そもそも、レスポンシブWebデザインとは何か?

昨今PC、スマートフォン、タブレットPC、はたまたその他サイネージなど数多くのデバイスが登場している事を背景に、端末毎に合わせたページを作成する のではなく、単一のHtmlファイルで、CSSで各画面サイズ毎に対応したレイアウトを調整することによってマルチデバイスに最適化したWebサイトを作 ることができる技術になります。

例えば、スマートフォンユーザー向けのサイトというと、それまでは①各端末毎に合わせたページを作り、ユーザーエージェントという技術を用いてアクセスし てくる端末を判別し該当するページへ振り分け表示をさせるというものか、②PCサイトをスマートフォン向けページに自動変換するやり方が主流でした。

これに対し、レスポンシブWebデザインではブラウザのスクリーンサイズを基準にレイアウトを自動で切り替える仕組みになりますので端末毎にわざわざペー ジを作成する必要がなく、にも関わらず画面サイズが異なる端末でアクセスした際でもどのように表示させるのか最適化を踏まえた作りにする事が可能となりま す。

WordPress に付属しているテーマは、Twenty Eleven からレスポンシブWebデザインに対応しており、私は、Twenty Twelve でいろいろ確認をしてみたのですが、デバイスに合わせてよきに計らってくれるのはありがたい反面、モバイル端末で見切れや画像のアスペクト比が変わるという症状が出てしまいました。([nob] モバイル端末の表示
以下注意点です。

    • 画面の幅が狭くなっても表の幅が変わらないので表の右が見切れる。
    • レスポンシブ対応の表に変換するプラグインがあるので、それで対応ができるかもしれない。
  1. YouTube
    • YouTube の画像は画面の幅が狭くなると横幅は狭くなるが、縦の長さが変わらないので、アスペクト比が変わって縦長になる。
    • YouTubeの画像のサイズを小さくしておけばアスペクト比が変わることはないはずですが、画像が小さくなるので、PC で見た時には物足りないかも。
  2. マウスオーバーを使った画像
    • マウスオーバーを使った処理は画像のサイズを選べば、アスペクト比がおかしくなる確率は低くなりますが、YouTube の画像と同様、あまり大きくしない方が良いかもしれません。テーマに依存するので、きちんと対応する場合には一手間かかりそう。
    • サムネイルの幅が大きな画像の幅より狭くなるようにサムネイルの数を調整する。そうしないと、サムネイルが途中で改行され2段で表示されます。

レスポンシブWebデザインでホームページを作成する場合、端末によって画面のレイアウトが変化するので、まずはスマートフォンのような小さな画面で読みやすく表示できることを確認して徐々にサイズの大きな画面でも問題ないことを確認するという流れになるかと思います。

簡易的に確認するなら、ブラウザの画面の幅を狭くしてみるとレイアウトの変化がわかりますし、投稿前に画面サイズを変えてプレビューできるプラグインもあったと思います。(私はまだ動作確認していませんが)

レスポンシブwebデザイン” への6件のコメント

  1. 先日やっとiphonでワードプレスに掲載したオンマウスを見てきました。全くダメですね。縦横比4:3の写真を利用していて、サムネールはそのままちゃんと出ています。
    が、大きな写真は「これって、3:4じゃないの」と言いたくなるほど縦に伸びているのです。とても見るに堪えません。

    サムネールは横が75pxで作っているのだけど、それが3枚弱程度だったら、縦横比はうまくいきそう。  ということは、大きなサイズでも、横幅が200px程度にしておかないと、見れないわけで、つまらないですね。オンマウスの意味がないわ。

    eleven だったら大丈夫ということでしょうか。

  2. テーマに手を加えれば大きな画面のオンマウスもできそうに思いますが、ハードルはちょっと高そうですね。

    > eleven だったら大丈夫ということでしょうか。
    一般的にレスポンシブ対応のテーマとオンマウスの相性は悪いと書いているのですが、、^_^
    Twenty Eleven で確認したわけではないのでダメとは断言できませんが、まず無理でしょう。(キッパリ)
    ただ、世の中にはたくさんのレスポンシブ対応のテーマがあります。むかごさんと同じようにオンマウスを使いたいという方がオンマウスに対応のテーマを作って公開しているかもしれませんね。オンマウスにこだわるならいろいろ探してみるのもおもしろいかもしれません。

    因みに私は、レスポンシブ対応のテーマで大きな画面を見せるならギャラリーショートコードを使います。こちらの方がスマートフォンやタブレットとの相性が良いとおもいます。ギャラリーショートコードについては、のぶさんの実験室の「gallery ショートコードのテスト」を見て下さい。

    • のぶさんの実験室の「gallery ショートコードのテスト」拝見してきました。写真が1枚だけブラウザで開いて見れますね。私も似たようなギャラリーを作っているのですが、仕様が違っていて、とんでもないことが起こりました。

      http://homeken.sakura.ne.jp/mukago/?page_id=247
      今はよさこいを入れてテストしている私のwp(twenty twelve)です。写真をクリックすると、固定ページの中に大きな写真が現れます。左右に矢印が付いてくるので、これだったらオンマウスの代わりになるかしらと、見ていました。

      このたびゆっくりと見ていたら、驚きの事実が!!!
      見ているうちにタイトルの「木の実」の写真だけじゃなく、今までにメディアにあるライブラリの写真がどんどん現れるのです。プリントスクリーンでキャプチャしたどこかの「設定」の画面から、ヘッダー写真まで。

      どういうことでしょうねえ。

      • もう一度見てきました。普通に見るだけではメディアまでは入り込みません。写真の上にある 投稿日時などの文字列の中の「木の実」というリンクなどをクリックすると、混乱が始まるみたいです。
        今日、仲間の方にも指摘されました。

          • Firefox、クローム、IEで試しましたが、皆同じでした。ただ矢印をクリックだけですと問題ないのですが、左上にある「写真の名前」をクリックして見続けると、どうもメディアのリンク先になってしまうみたい。ギャラリーの一覧から外れてしまいます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です