レスポンシブデザインなサイトの作り方

サイトにモバイル対応（スマートフォン・タブレット対策）をする時、一番手っ取り早いのがレスポンシブデザインにすることです。
レスポンシブデザインとは、サイトの骨組みであるHTMLソースを変えずに、スタイルシートによって表示方法を変え、スマートフォン・タブレットでも見やすいデザインで表示するという方法です。

スマートフォン・タブレットのシェアが急増している昨今、レスポンシブデザインで形成されているサイトも増えてきました。
この記事では、レスポンシブデザインのサイトの基本的な作り方を紹介します。

※以前、別の記事で「レスポンシブデザインを使用するメリットとデメリット」を書きましたので、そちらもご参考下さい。

レスポンシブデザインでサイトを作ろう

レスポンシブデザインでサイトを作ると、携帯用の別サイトを用意しなくてもスマートフォン・タブレットで表示時にサイトを見やすく表示することができます。
スマートフォン・タブレットのブラウザはレスポンシブデザインで表示するのに必要なCSSのメディアクエリに対応しているので、レスポンシブデザインに適したHTMLを準備し、スマートフォン・タブレット用のスタイルシートを用意すればレスポンシブデザインを適用することができます。

ホームページの基本的な仕組み

ホームページは、HTMLソースをブラウザで表示することで閲覧できるようになります。
ホームページの骨組みとなるのがHTMLソースです。

そして、HTMLソースをブラウザで表示した時のデザインの設定を行うのがスタイルシートです。
スタイルシートの設定により、画面の背景色・文字色・高さ・横幅・配置など、サイトのデザインが変更できます。
骨組みであるHTMLソースに対して、スタイルシートは衣装や装飾品のように考えればよいと思います。

ちなみに、閲覧・表示する以外の様々な機能（例えばウィンドウを閉じたり確認ダイアログを表示したり）を付けたい場合は、javascriptやjQueryを利用します。
javascriptやjQueryを利用すると、ホームページの閲覧にアニメーションなどの動きを持たせることもできます。
HTML・スタイルシートに対して、javascriptやjQueryは、武器その他道具のような装備品と考えてれば良いかもしれません。

レスポンシブデザインでは、同じHTMLをスタイルシートやjavascript・jQueryを変えて表示する、つまり、骨組みは変えずに衣装や装飾品・装備品の変更だけでスマートフォン・タブレットなどに対応します。

では、どのようなHTML・スタイルシートを用意すればよいのでしょうか。

レスポンシブデザインに適したHTMLソースの書き方

HTMLソースは、通常上記画像のようにエディタ上で編集します。
レスポンシブデザインに適したHTMLにすることを考えると、少なくとも下記のことを気をつけた方が良いでしょう。

METAタグにviewportを設定する
frameタグは使わない
外部スタイルシートを利用する
外部スタイルシートで利用するために適宜IDやクラスを設定する
tableタグを避けてdivタグを利用したレイアウトを行う

それぞれ詳しくは下記の通りです。

METAタグにviewportを設定する

レスポンシブデザインを採用するために、METAタグにviewportを設定します。
レスポンシブデザインで表示したいHTML画面のHEADタグ内に、下記のソースを記入してください。

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

上記のようにすると、ブラウザが端末の画面幅にあわせて表示領域を調整して表示してくれるようになります。

frameタグは使わない

FRAMEタグは、HTML5では廃止される予定です。
レスポンシブデザインでサイトを構成する場合は、FRAMEタグは利用しないで下さい。
FRAMEタグを使ったサイトのようなデザインにしたければ、スタイルシートの擬似フレームを利用しましょう。

外部スタイルシートを利用する

スタイルの設定は、HTML内には書き込まず、外部スタイルシートを利用するようにしましょう。
PC・スマホ・タブレットなど、全ての環境で利用するスタイルシート、スマホのみに利用するスタイルシートなどを分けて構成しておくと、スタイルシートをスムーズに切り替えることができます。

idやclassを設定する

HTMLタグには、id要素・class要素をつけることができます。
どちらもタグに名前を付与することに変わりはありませんが、

idは固有の名称であり、単独でしか使えない
classは共通の名称であり、複数設定することも可能

という違いがあります。

詳しくは、当サイト記事「HTMLタグの要素と属性」を参考にしてください。

tableタグを避けてdivタグを利用したレイアウトを行う

table（表）タグを多用すると、スマートフォンのような横幅の狭い画面では見難さが発生します。
tableタグは、画面全体のレイアウトでは利用せず、画面全体のレイアウトにはdivタグを利用しましょう。

レスポンシブデザインに適したCSS（スタイルシート）の書き方

レスポンシブデザインにサイトを適用させるために、スタイルシートを切り分けることを意識しましょう。

全体的に適用するスタイルシート
スマートフォン・タブレットのみ適用するスタイルシート

上記のように切り分けて設定すると、スタイルの切り替えが行いやすいです。

スマートフォン・タブレットのみにスタイルを適用させるには、主に下記の２つの方法があります。

メディアクエリを利用する
jQueryを利用する

上記のどちらを利用しても構いませんが、簡単なのはメディアクエリを利用する方法です。

メディアクエリを利用してスマートフォン・タブレットのみにスタイルシートを適用させる

メディアクエリとは、CSS3で利用できる機能です。
画面サイズに応じてスタイルシートを上書きすることができます。

/* デスクトップPCとスマホに適用するCSS */
body{background-color: #ccc; /* 背景灰色 */}

/* スマホ（画面横幅480px以下）だけに適用するCSS */
@media screen and ( max-width:480px )
{
    body{background-color: #000 ;/* 背景黒色 */}
}

スタイルシートに上記のように記載すると、480ピクセル以下の画面では背景色灰色の設定が上書きされて背景色黒で表示されます。

※メディアクエリは多くのスマートフォンブラウザで利用できますが、IE8などブラウザによってはメディアクエリを利用することができないものもあります。
　IE8でもメディアクエリを利用できるようにするには、jQueryを利用してください。
　I'll be NET｜レスポンシブなサイトをIE8に対応するために導入すべきjQueryいろいろ

▲ページ上部へ