サイト制作
レスポンシブデザインの作りかた
更新日:2016/09/26
公開日:2013/06/20
レスポンシブデザインの概要とメリット
こんにちは。All About ホームページ作成ガイドの西村文宏です。
最近は、パソコン以外にもスマートフォンやタブレットなど、様々な画面サイズの機器が普及してきました。
また、パソコン用のディスプレイでも、大きなものから小さなものまで様々な製品が販売されています。そのため、ウェブサイトの閲覧に使われる画面サイズも、極端に広いものから極端に狭いものまで、様々な場合があります。
そのような状況では、どれくらいの画面サイズを想定してウェブページをデザインすれば良いのかが決めにくくなります。
従来は、「パソコン向けサイト」とは別に「モバイル向けサイト」を作ることで解決できていました。しかし、今では、モバイル端末だからといって画面が狭いとは限りませんし、パソコンだからといって、画面サイズの範囲が一定以内に収まっているとは限りません。
そこで登場した考えかたが「レスポンシブデザイン」です。
レスポンシブデザインとは、閲覧者の画面サイズに応じて、適用するスタイルシートを変化させる仕組みのことです。閲覧者の端末の種類は問わず、画面サイズだけを基準にしてデザイン(適用するスタイルシート)を選択します。
環境に応じて変化するのはスタイルシートだけなので、端末の種類ごとにウェブサイトを分けたりはしません。単一のウェブサイトで、様々な画面サイズに対応させます。
例えば、SONYのウェブサイトでレスポンシブデザインが採用されています。以下のページを見てみてください。
上記のウェブサイトでは、ブラウザのウインドウを画面いっぱいに広げてみた場合と、ものすごく狭くしてみた場合とで、自動的に各所のデザインが変化することが分かります。
例えば、ウインドウの横幅を650px未満にした場合と、それ以上にした場合とで比較してみてください。
広い画面で閲覧すると、大きなバナー画像と共に、製品一覧が縦横に配置されたり、「タブ」が横方向に広がって表示されます。
狭い画面で閲覧すると、バナー画像が小さくなると共に、製品一覧が縦方向のみに配置されたり、「タブ」が「プルダウンメニュー」に変化したりします。
このように、「端末の種類」ではなく「閲覧者の画面サイズ」によってレイアウトを変更させ、単一のウェブサイトであらゆる機器に対応させるデザインが、レスポンシブデザインです。スクリプトは一切使わずに、スタイルシートだけで実現できるため、とても手軽です。
これからウェブサイトを作るなら、ぜひ、レスポンシブデザインを採用してみてください。
レスポンシブデザインを作るためのスタイルシート(CSS)の書きかた
では、その「レスポンシブデザイン」を作るためのスタイルシート(CSS)の書きかたを簡単にご紹介いたします。
閲覧者の画面サイズに応じて「適用するスタイル」を分岐させるためには、特にスクリプトなどを使う必要はありません。
CSS3で追加された新しい仕様である「Media Queries」を利用するだけで実現できます。
例えば、以下のようにCSSソースを記述すると、
- 画面の横幅が640px以上なら、p要素の文字色は赤色で表示
- 画面の横幅が640px未満なら、p要素の文字色は青色で表示
というように、適用するスタイルを分けられます。
<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を記述した場合は、
- 画面の横幅が640px以上なら、wide.css ファイルのCSSを適用する
- 画面の横幅が640px未満なら、thin.css ファイルのCSSを適用する
というように、CSSファイル自体を分けて管理できます。
閲覧者の画面サイズに合わせて画像をうまく見せる方法
最後に、閲覧者の画面サイズがどんなサイズであっても、うまく画像の表示を自動調整させるための活用例をご紹介いたします。
ウェブページの最上部に表示するバナー画像などの「大きな画像」は、表示領域の横幅いっぱいにまで広げて掲載したい場合があります。
例えば、以下のようなHTMLソースを使ってバナー画像を表示している場合を考えます。
<div>
<img src=”banner.jpg” alt=”バナー画像”>
</div>
このとき、CSSソースを以下のように記述しておくと、画像サイズは常に描画領域の幅(=ウインドウの幅)に合わせて自動調整されます。
div.bannerbox img { width: 100%; }
しかし、この方法だと、下限も上限もなく画像サイズが変化してしまいます。
もし画像の中に文字を描き込んでいる場合には、文字が大きくなりすぎたり、小さくなりすぎたりすることもあります。
その結果、見やすさが低下したり、バランスが悪く感じられたりすることもあるでしょう。そこで解決に使えるのが、「レスポンシブデザイン」の書きかたです。
レスポンシブデザインでは、閲覧者の画面サイズに応じて適用するスタイルシートを分けます。それを利用して、閲覧者の画面サイズに応じて、表示する画像そのものを切り替えれば良いのです。
例えば、以下のようにします。
1. 画像を2種類作る
まず
- 大きく表示されることを前提にしたデザインの画像
- 小さく表示されることを前提にしたデザインの画像
の2種類を用意しておきます。
1は、主に(PC利用者が)広い画面で閲覧する場合のことを考えて作ります。
小さな文字を細かく描き込んでおいても問題ありません。
2は、主に(スマートフォンなど)狭い画面で閲覧する場合のことを考えて作ります。
描き込む文字はできるだけ少なく、文字サイズを大きくしておきます。
2. HTMLを記述する
この場合の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を非表示 */
}
上記のように記述しておくと、以下のような条件で表示が分かれます。
- 閲覧者の画面が広い(480px以上ある)場合
big.jpg(大きく表示されることを前提にデザインされた画像)が表示されます。
- 閲覧者の画面が狭い(479px以下の)場合
mini.jpg(小さく表示されることを前提にデザインされた画像)が表示されます。
さらに、先ほどのCSSソースの1行目で、画像横幅を表示領域の幅にぴったり合わせるよう指定していますから、上記1・2のどちらの場合でも、閲覧者の描画領域のサイズにぴったり合うよう画像の横幅が自動調整されて表示されます。
このようにすると、アクセス者の使う画面サイズが大きくても小さくても、極端に見えにくくなることはなく、うまく表示できるようになるでしょう。
備考(IE8以下でも利用したい場合)
なお、レスポンシブデザインを実現するために必要な「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>
<!–>
さて、これまでご紹介してきたように、レスポンシブデザインを活用すると、単一のウェブページで様々な閲覧環境に対応できるようになります。
ぜひ、ご活用ください。
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。
この著者の他の記事を読む