今更ですが、レスポンシブ Web デザイン(Responsive Web Design)

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

タイトルの『今更』というのは、レスポンシブ Web デザインに最近まで手を付けなかった自分自身に対する教訓の意味を込めていますので、何も『レスポンシブ Web デザインがダメだ。』とか『レスポンシブ Web デザインは一時期の流行りで、もう過去のモノだ。』というような意味ではないです。
反対に、これからもっと活用されるべきだと思っておりますし、最近ではレスポンシブ Web デザインのことを取り上げたブログ記事なども多く見受けられますので、皆さんも同じように感じているのではないでしょか。
最初にレスポンシブ Web デザインが紹介されたのは、2010年5月25日の

だと思いますので、もうすでに2年前の記事です。
ということを考えると、Media Queries をちょっと試しただけで、今までレスポンシブ Web デザインのことをあまり考えていなかった自分が情けない… 😥

実は、5月の GW 後半にポッカリと時間ができたので、このサイトにこっそりとレスポンシブ Web デザインを取り入れました。
で、その時に思ったことを記事に書きかけていたのですが、レスポンシブ Web デザインを詳しく解説されている記事がありますので、そちらをご覧いただく方がいいかも 🙂

それと本日『レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法』という書籍が、MdN(インプレス)から発売されたようです。
この本を読めば、色々な疑問や制作方法が一気に解決するかも知れませんね。

ということで、詳しい制作方法などは上記のサイトや書籍をご覧頂くとして、ここでは当サイトにレスポンシブ Web デザインを取り入れた時に感じたことをいくつか書いてみたいと思います。
周知の事実だと言われそうですが…

その前にちょっといいわけを… 🙄
このサイトは元々、『レスポンシブ Web デザインを考慮してデザインしていない。』ということと『スマートフォン用には jQuery Mobile で制作したテーマに切り替えている。(WordPress のプラグインで切り替え)』というのが前提にあります。
で、まず思ったことは、

リキッドレイアウト(可変グリッド、Fluid or Liquid)と何が違うの?

いつだったか、『今までもリキッドレイアウトというのがあるから、レスポンシブ Web デザインが新しいとは思わない。』という意見をお聞きしたことがあります。
確かに、リキッドレイアウトもユーザーがブラウザのサイズを変更しても『レイアウトが問題になる』ことはないだろうし、『隠れて見えなくなる(横スクロールバーがでる)』ことがないという意味ではレスポンシブ Web デザインと同じなのかも知れない。
しかし、リキッドレイアウトの場合はその名通り『流動的』なので、デザインのオブジェクト(カラム等)をコントロールすることが難しい。
例えば、スマートフォンで見た場合にスマートフォンに適したレイアウトになるのだろうか?
どのようなブラウザのサイズでも隠れずに表示すればいいというだけなら、レスポンシブ Web デザインはいらない。
でも、そうではないと思う。
レスポンシブ Web デザインの場合は、Media Queries を使うことによって、それぞれのデバイス(厳密にはスクリーンサイズ)に適したレイアウトを意図的に表示させることが、個人的には重要だと思う。
このあたりのことは、上記の A List Apart: Articles: Responsive Web Design を読むと『example design』と『our updated page』による比較をしているので、私の書いていることも間違ってはいないと思う。

例えば、下記サイトはブレイクポイントが640px のひとつだけですが、それ以下になった時に大きくレイアウト・デザインが変わります。
基本的にはリキッドレイアウトでレイアウトを変化させて、640px 以下になるとスマートフォン(タブレット)用のデザインへと意図的に変更しています。
リキッドレイアウトだけでは、このようなサイトを実現することはできないと思います。

それにしても A List Apart のサイトは、Solid レイアウト(固定幅レイアウト、Fixed-Width レイアウト)なんですね。
他にもレスポンシブ Web デザインとの比較として Elastic レイアウトというのもありますが、今回は省略。

レスポンシブ Web デザインって基本はリキッドレイアウトじゃないとダメなの?

上記の A List Apart のサンプルの our updated pageカネボウ化粧品を見ていると、基本はリキッドレイアウトで作られています。

このサイトもご存知の方は多いと思いますが、やはりリキッドレイアウト + レスポンシブ Web デザインです。
レスポンシブという意味を考えると、リキッドレイアウトがベースにあった方が、様々なウインドウサイズ(スクリーンサイズ)に細かく対応できるのかも知れない。
しかし、本来のレスポンシブ Web デザインの解釈とは違うのかも知れませんが、敢て、スクリーンサイズではなく各デバイズに対応させることを目的にすると、リキッドレイアウトである必要はないのではと考えたりするわけです。
どこからか『そんなの間違ってる!』、『そんな考え方は邪道だよ。』という声も聞こえてきそうですが、この件については色々な意見を聞いて見たいと思ったりしています。

何故、このようなことを思ったのかというと、こちらもレスポンシブ Web デザインを取り入れたサイトとして有名だと思いますが、下記サイトを見た時なんですよね。

css ファイルをすべて読んだわけではないですが、おそらくリキッドレイアウトではないと思います。
ブレイクポイントまではリキッドレイアウトのようなレイアウトの変化はなく、ブレイクポイントごとにスパッとレイアウトが切り替わります。
このサイトを見た時に、『なるほど、このような割り切り方もあるのか。』と思ったんですよね。
確かに、今では様々なスクリーンサイズのデバイスが登場していますので、ブレイクポイントの設定が難しいかも知れませんが、上記サイトはとてもよく考えられていると思います。

というわけで、当サイトはレスポンシブ Web デザインを考慮したデザインをしていませんので、リキッドレイアウトではない Food Sense | Plant-Based Eating At Its Best と同様の方法でレスポンシブ Web デザインを取り入れることにしました。

Web Designer Wall – Design Trends and Tutorials のことを書きましたので、その中でレスポンシブ Web デザインについて書いている記事を紹介。

WordPress でサイト構築してるけど、画像のサイズはどうしたらいいの?

これに関しては今回のレスポンシブ Web デザインを取り入れた時ではなく、1年前に jQuery Mobile でスマートフォンサイトを作った時に思ったことです。
WordPress は、画像を挿入すると width と height が入ります。
幅は、max-width: 100%; で対処できるのですが、高さを合わせる方法がわからない。
そこで、『jQuery Mobile を使っているんだから jQuery で処理すればいいじゃん。』ということで、
[javascript]
jQuery(function(){
$(‘.hogehoge img’).removeAttr(‘width’);
$(‘.hogehoge img’).removeAttr(‘height’);
});
[/javascript]
というように、スクリプトで幅と高さを消したのですが、その後

という記事を見つけました。
この方法だと、functions.php に記述すればいいので、WordPress の場合はこちらの方がいいかも知れませんね。

あと、少し前に WordPress のテーマである Toolbox の style.css を見ていると
[css]
.wp-caption {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
[/css]
という記述を発見し、『高さは auto を指定すればいいのかぁ。』と試してみたら、縦横比はそのままで縮小された画像が表示されました。
ただ、最近まで気づかなかったのですが IE でやや問題が…
このサイトは、IE6、IE7を無視しているのでそれらはかまわないのですが、IE8の表示がおかしい。
IE9は問題なく縦横比が固定で縮小されるのですが、IE8は高さが元のサイズのままです。
同じく WordPress のテーマで、レスポンシブ Web デザインに対応している Twenty Eleven の style.css を見てみると
[css]
img.size-large {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
[/css]
となっています。
最初からこちらを見ていればよかったですね 😀
ということで、IE8は
[css]
img {
width: auto;
}
[/css]
を記述しないと高さが縮小されません。

まとめると
[css]
img {
max-width:100%;
height: auto;
width: auto\9;
}
[/css]
というような記述になるのではと思います。

あと、まだドラフトなので今後どうなるかわかりませんが、画像(img)に関しては

と、いうのが提案されたようです。

というわけで、今回は jQuery を使った方法ではなく、スタイルシートの記述で画像サイズを変化させることにしました。

これで画像サイズの関しては OK なのかな…
と、思っていたら今度は iframe がおかしい。
まぁ、css に何も記述していないので当然といえば当然ですよね。
もう一度 Twenty Eleven の style.css を見ると
[css]
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
[/css]
とあるので、そのまま記述して iframe の含まれるページを見てみると、当然幅は縮小されているけど高さは元のままです。
画像と同じように height: auto; を記述してみると、今度は極端に高さが低く(短く)なりました。
それで、Twenty Eleven でも高さの指定はしてないのかも知れませんね。
う〜ん、iframe の高さはどうしようもないのかなぁ…
どなたか、iframe の縦横比を変えずに縮小する方法をご存知の方がおられましたら教えてください。

でも、iframe の場合は、iframe 内に表示するデータの幅や高さというのは変えられないですよね。
ということは、iframe のスクロールバーを非表示にしていると、場合によっては iframe 内のデータが隠れてしまうこともあるということか。
とりあえず、画像は縦横比を変えずに縮小できたので、iframe のことは今後の課題ということで…

これで、基本的な疑問は何となくですが納得しましたので、実際の制作へ…

と、思ったのですが、長くなってきたのとちょっと文章を書くのが疲れてきたので、続きは次回 こちらの『というわけで、レスポンシブ Web デザインを取り入れてみた…』 をどうぞ 😉

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

posted with amazlet at 12.05.25
こもりまさあき
エムディエヌコーポレーション
売り上げランキング : 1721
Amazon.co.jp で詳細を見る

スポンサーリンク

[quads id=2]

[quads id=2]

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。