また、パソコン用のディスプレイでも、大きなものから小さなものまで様々な製品が販売されています。そのため、ウェブサイトの閲覧に使われる画面サイズも、極端に広いものから極端に狭いものまで、様々な場合があります。
そのような状況では、どれくらいの画面サイズを想定してウェブページをデザインすれば良いのかが決めにくくなります。
従来は、「パソコン向けサイト」とは別に「モバイル向けサイト」を作ることで解決できていました。しかし、今では、モバイル端末だからといって画面が狭いとは限りませんし、パソコンだからといって、画面サイズの範囲が一定以内に収まっているとは限りません。
そこで登場した考えかたが「レスポンシブデザイン」です。
レスポンシブデザインとは、閲覧者の画面サイズに応じて、適用するスタイルシートを変化させる仕組みのことです。閲覧者の端末の種類は問わず、画面サイズだけを基準にしてデザイン（適用するスタイルシート）を選択します。
環境に応じて変化するのはスタイルシートだけなので、端末の種類ごとにウェブサイトを分けたりはしません。単一のウェブサイトで、様々な画面サイズに対応させます。
例えば、SONYのウェブサイトでレスポンシブデザインが採用されています。以下のページを見てみてください。
上記のウェブサイトでは、ブラウザのウインドウを画面いっぱいに広げてみた場合と、ものすごく狭くしてみた場合とで、自動的に各所のデザインが変化することが分かります。
例えば、ウインドウの横幅を650px未満にした場合と、それ以上にした場合とで比較してみてください。
広い画面で閲覧すると、大きなバナー画像と共に、製品一覧が縦横に配置されたり、「タブ」が横方向に広がって表示されます。
狭い画面で閲覧すると、バナー画像が小さくなると共に、製品一覧が縦方向のみに配置されたり、「タブ」が「プルダウンメニュー」に変化したりします。
このように、「端末の種類」ではなく「閲覧者の画面サイズ」によってレイアウトを変更させ、単一のウェブサイトであらゆる機器に対応させるデザインが、レスポンシブデザインです。スクリプトは一切使わずに、スタイルシートだけで実現できるため、とても手軽です。
これからウェブサイトを作るなら、ぜひ、レスポンシブデザインを採用してみてください。
CSS3で追加された新しい仕様である「Media Queries」を利用するだけで実現できます。
例えば、以下のようにCSSソースを記述すると、
というように、適用するスタイルを分けられます。
<style type=”text/css”>
@media screen and (min-width: 640px) {
/* 表示領域が640px以上の場合に適用するスタイル */
p { color: red; }
}
@media screen and (max-width: 639px) {
/* 表示領域が639px未満の場合に適用するスタイル */
p { color: blue; }
}
</style>このように、「@media」という記述を使うことで、「そのスタイルを適用するための条件」を指定できます。
その条件を満たす環境でのみ、カッコ内のスタイルが有効になります。この仕組みを使えば、「閲覧者の画面サイズ」に応じた適切なデザインを提供できます。
「@」記号を使った特殊な書きかたではありますが、その中に含められるCSSは、普段記述しているCSSと同じです。
上記のCSSソースでは、同一のCSSソース内に条件を記述しました。
しかし、もし、画面サイズに応じてCSSファイル自体を分離しておきたいなら、以下のように（CSSファイルを読み込む）HTMLを記述することもできます。
<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width: 640px)”> <link rel=”stylesheet” href=”thin.css” media=”screen and (max-width: 639px)”>
上記のようにHTMLを記述した場合は、
というように、CSSファイル自体を分けて管理できます。
例えば、以下のようなHTMLソースを使ってバナー画像を表示している場合を考えます。
<div> <img src=”banner.jpg” alt=”バナー画像”> </div>
このとき、CSSソースを以下のように記述しておくと、画像サイズは常に描画領域の幅（＝ウインドウの幅）に合わせて自動調整されます。
div.bannerbox img { width: 100%; }しかし、この方法だと、下限も上限もなく画像サイズが変化してしまいます。
もし画像の中に文字を描き込んでいる場合には、文字が大きくなりすぎたり、小さくなりすぎたりすることもあります。
その結果、見やすさが低下したり、バランスが悪く感じられたりすることもあるでしょう。そこで解決に使えるのが、「レスポンシブデザイン」の書きかたです。
レスポンシブデザインでは、閲覧者の画面サイズに応じて適用するスタイルシートを分けます。それを利用して、閲覧者の画面サイズに応じて、表示する画像そのものを切り替えれば良いのです。
例えば、以下のようにします。
まず
の2種類を用意しておきます。
1は、主に（PC利用者が）広い画面で閲覧する場合のことを考えて作ります。
小さな文字を細かく描き込んでおいても問題ありません。
2は、主に（スマートフォンなど）狭い画面で閲覧する場合のことを考えて作ります。
描き込む文字はできるだけ少なく、文字サイズを大きくしておきます。
この場合のHTMLの書きかたはいくつかありますが、ここでは以下のように書いておきます（class名は、後からCSSで装飾するために付加しています）。
<p> <img src=”big.jpg” alt=”大きめの画像”> <img src=”mini.jpg” alt=”小さめの画像”> </p>
<h3 class="co_ttl_leftborder">3. CSSを記述する</h3>
レスポンシブデザインを実現する書きかたを使って、以下のように記述します。
p.headbanner img { width: 100%; } /* 画像を横幅いっぱいに表示 */
@media screen and (min-width: 480px) {
/* 表示領域が480px以上の場合 */
p.headbanner img.miniimage { display: none; } /* miniを非表示 */
p.headbanner img.bigimage { display: block; } /* bigを表示 */
}
@media screen and (max-width: 479px) {
/* 表示領域が480px未満の場合 */
p.headbanner img.miniimage { display: block; } /* miniを表示 */
p.headbanner img.bigimage { display: none; } /* bigを非表示 */
}上記のように記述しておくと、以下のような条件で表示が分かれます。
さらに、先ほどのCSSソースの1行目で、画像横幅を表示領域の幅にぴったり合わせるよう指定していますから、上記1・2のどちらの場合でも、閲覧者の描画領域のサイズにぴったり合うよう画像の横幅が自動調整されて表示されます。
このようにすると、アクセス者の使う画面サイズが大きくても小さくても、極端に見えにくくなることはなく、うまく表示できるようになるでしょう。
なお、レスポンシブデザインを実現するために必要な「Media Queries」の書きかたは、Internet Explorerの場合は、IE9以降でないと使えません。
IE8でも「Media Queries」を使えるようにするには、HTMLのhead要素内に以下3行を追記してください。
<!–[if lt IE 9]> <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <!–>
さて、これまでご紹介してきたように、レスポンシブデザインを活用すると、単一のウェブページで様々な閲覧環境に対応できるようになります。
ぜひ、ご活用ください。
ご注意ください
カテゴリーから探す
タグから探す