レスポンシブ・Webデザインとは
レスポンシブWebデザインとは、どんな大きさの画面でも見やすく、使いやすいWebサイトにするために必要なもので、デバイスの画面サイズに依存しないwebサイトを構築する手法です。
レスポンシブデザインを採用すると、PC用サイトとモバイル用サイトを別々に作る必要がありません。
レスポンシブデザインの作り方
では、レスポンシブデザインの作り方について手順を説明していきますが、手順は大きく分けて以下の5つになります。
① 通常のCSSとは別にレスポンシブ用のCSSを作成する
② HTMLに「meta viewport」タグを入れる
③ HTMLに「Link」タグを追加して、作成したレスポンシブ用のCSSのファイルを指定する
④ レスポンシブ用のCSSに各デバイス用のメディアクエリを指定する
⑤ レスポンシブ用のCSSには変更したいクラスのスタイルだけを記述
⑥ レスポンシブデザインをチェックする
①通常のCSSとは別にレスポンシブ用のCSSを作成する
通常サイズのスタイルが指定されているCSSとは別に、レスポンシブデザインを記述するための専用のCSSを作成しましょう。
名前は任意で決められますが、何のCSSなのか分かりやすいように「smartStyle.css」など分かりやすい名前にすると良いです。
※メディアクエリのサイズ指定が複数ある場合、レスポンシブデザイン用のCSSにまとめて記述で構いません。
②HTMLに「meta viewport(メタ ビューポート)」タグを入れる
レスポンシブデザインでスマホ対応する為には、HTMLソースのheadタグ内に、meta要素のname属性値の一つである「viewport」と呼ばれるmetaタグを記述します。
下部ではcontentの中にいくつかの属性を指定していますが、ここに属性を記述することによって、いくつかの挙動を指定することが出来ます。
これ以外にも属性はありますので、自分でも調べてより知識をつけましょう。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
それでは使用している属性と、よく使われる属性について説明していきます。
・「width=device-width」横幅の指定
訪問してきたデバイスの横幅を取得するという意味です。
アクセスしたデバイスの横幅がサイトの横幅になるように表示されます。
ですので、この時点ではまだ表示自体は変わりません。
その他に数値を指定することも出来ますが、特に理由がない限り ” width=device-width ” で良いです。
・「initial-scale=1.0」倍率
カンマ区切りで表示の倍率を指定することが出来ます。
こちらも特に理由がない限り ” 1.0 ” の指定で良いです。
また「initial-scale」は初期のズーム倍率を意味し、最小倍率(minimum-scale)と最大倍率(maximum-scale)を指定することが出来ます。
これらは特に記述しなければいけないものではないので、多くのサイトが ” initial-scale=1.0 ” の記述を採用しているようです。
・ズームの許可
ユーザーに表示されているページをズームすることを許可するのかどうかを指定することも出来ます。
許可するのであれば「user-scalable=yes」と記述し、許可しない場合は「user-scalable=no」と記述します。
この部分はサイトによって異なると思いますので、ユーザーにとってどちらが便利なのか考慮した上で判断しましょう。
③HTMLに「Link」タグを追加して、作成したレスポンシブ用のCSSのファイルを指定する
HTMLの「head」タグ内の「link」に適応させたいファイルの指定をしないと、スタイルが反映されませんので、ここも忘れずに追加しましょう。
④各デバイス用のCSS(メディアクエリ)を使用する
メディアクエリと呼ばれる記述によって、PC用やスマホ用、必要であればタブレット用のCSSを用意し、横幅ごとに見せ方を変えていきます。
この横幅は任意で決めることが出来ます。
今回は、よく使われるサイズの指定を紹介します。
※サイズ指定が大きい順に記述すると見やすく綺麗ですので、誰が見ても見やすいコードを心掛けて記述しましょう。
・PC用のCSS
ウィンドウ幅が767px以上の場合に適用
@media screen and (min-width: 767px) {
}
・タブレット用のCSS
ウィンドウ幅が最大767pxまでの場合に適用
@media screen and (max-width: 767px) {
}
・スマホ用のCSS
ウィンドウ幅が最大479pxまでの場合に適用
@media screen and (max-width: 479px) {
}
⑤レスポンシブ用のCSSには変更したいクラスのスタイルだけを記述
メディアクエリの {} 内には、全てのクラスのスタイルを記述する必要はありません。
変更したいクラスのスタイルだけを記述していきます。
また、「通常のCSS→レスポンシブデザインのCSS」の順でスタイルが反映され、複数のメディアクエリの指定がある場合は、「ウィンドウ幅が767px→ウィンドウ幅が479px」の順に反映されます。
ですので、通常のCSSで指定してあるスタイルはウィンドウ幅767pxに記述する必要はないですし、通常のCSSスタイルとウィンドウ幅767pxで指定してあるスタイルはウィンドウ幅479pxで記述する必要もありません。
あくまでそれぞれ変更したい部分だけ、スタイルの指定を記述します。
そして、レスポンシブデザインでよく使われる便利なCSSについて紹介します。
下記以外にも便利なCSSはあると思いますので、自分で考えて作成してみて、色んな方法を見つけておきましょう。
・コンテンツの非表示
PC用ページを上手くスマホ対応に出来ないコンテンツが出た場合、非表示にするという方法もあります。
.contents {
display: none; /* この値を指定された要素はブラウザ上で非表示 */
}
・floatを解除
PC用のスタイルをスマホにも適用されてしまっている場合、横並びでデザインしたfloatを解除する必要があります。
.contents {
float: none; /* 要素の浮動化の解除 */
}
・画像やコンテンツの横幅を調整
スマホで閲覧し、横スクロールが出ている場合、画像やコンテンツがはみ出ないように横幅を可変に対応する調整が必要です。
/* 画像の横幅を調整 */
img {
max-width: 100%; /* 横幅の最大値を親要素の幅に合わせる */
height: auto; /* 縦幅を親要素の幅に合わせる */
}
/* コンテンツの横幅を調整 */
.contents {
max-width: 1000px; /* 要素がこれ以上は大きくならない幅の指定 */
width: 100%; /* 横幅を親要素の幅に合わせる */
margin-left: auto; /* ボックス外側の左の余白を親要素の幅に合わせる */
margin-right: auto; /* ボックス外側の右の余白を親要素の幅に合わせる */
}
⑥レスポンシブデザインをチェックする
ブラウザに表示して、ブラウザ自体を縮小・拡大でも確認はできますが、ブラウザの開発ツール(デベロッパーツール)の方が見やすいです。
Windows、ブラウザが違う場合もそんなに操作やボタンの位置など変わらないと思うので、以下手順を参考にして開発ツールでレスポンシブデザインをチェックしましょう。
【パソコン：mac ブラウザ：グーグルクローム の場合】
右上の「…」を選択
その他のツールを選択
デベロッパーツールを選択
左右に動かして縮小・拡大で確認
