レスポンシブ対応サイトのコーディングについて個人的にまとめておきます。
基本的に必要なことは以下の２つです
- ①htmlでviewportの設定
- ②cssでmedia queryの設定
viewportの設定
各htmlのheadタグ内に
<head>
...
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
の記述をします。これはviewportの画面幅と初期拡大率を設定するものです。上記のように記述すると
-
width=device-widthで画面幅を各デバイス -
initial-scale=1.0で初期拡大率を100%に設定したもの
に設定されます。複雑に見えますがレスポンシブサイトを作る場合基本的には
上記のタグをそのまま挿入すれば良いです。
media queryの設定
メディアクエリは画面の幅などの条件に対応して
コンテンツ描画が行えるようにするCSSの機能です。
記載方法は下記の通り
@media screen and (max-width: 480px) {
/* ここに480px以下の場合だけ適用させたいCSSを記載します */
}
この機能を利用すると
例えば”画面サイズが480px以下の時だけカッコ内のCSSを適用する”のようなことことができます。
この機能を利用して
「画面サイズが480px以上のCSS(PC用CSS)」を画面サイズが480px以下で適用されるCSS(SP用CSS)で上書きする」のがレスポンシブサイト作成の基本となります。
例 (divのwidth960pxを、画面幅480px以下の時に書き換えるCSS)
div {
width: 960px;
}
@media screen and (max-width: 480px) {
div {
width: 100%;
}
}
【TIP】SP用CSSでwidthは固定pxではなく％を利用する
例えばviewportを設定した状態で
以下のCSSを適用するとdivのwidthがiphone(375px)以上の値になってしまうため画面内にdivが収まらなくなくなってしまう。
だからといって
@media screen and (max-width: 480px)で divを375pxにするわけにはいかない。
その場合375pxのスマホでは思い通りに見ることができるが、スマホには色々なサイズが存在するので
他の画面サイズのスマホでサイトを見た際に思い通りの表示とならない。
ダメな例
div {
width: 960px;
}
@media screen and (max-width: 480px) {
div {
width: 375px;
}
}
なので、widthを%で上書きするのが一般的です。
これだと、色々なスマホサイズに対応できます。
％で設定した例
div {
width: 960px;
}
@media screen and (max-width: 480px) {
div {
width: 100%;
}
}
【TIP】PCサイトでは表示させたいがSPサイトでは消したいもの
色々な方法があると思いますが、以下のようにCSSを記載し対応します。
このCSSを記載すれば、例えば「PCサイトでは表示させたいがSPサイトでは消したい要素」には
class="pc"をつけるだけで実現することができます。
display
/* 画面サイズが480px以上の時 */
.pc {
/* class="pc"が付いたものを表示する */
display: block;
}
.sp {
/* class="sp"が付いたものを非表示にする */
display: none;
}
@media screen and (max-width: 480px) {
/* 画面サイズが480px以 以下の時 */
.pc {
/* class="pc"が付いたものを非表示にする */
display: none;
}
.sp {
/* class="sp"が付いたものを表示する */
display: block;
}
}