１．レスポンシブデザインとは
レスポンシブデザイン とは、閲覧者の画面サイズまたはウェブブラウザに応じたウェブページが
閲覧できることを目指したウェブデザイン。
簡単に言うと見る人の画面サイズ(横幅)に応じて、見やすくデザインする。ということです。
２．レスポンシブの実装例
まず、以下のデモサイトでレスポンシブのサンプルを確認しましょう。
768, 1024pxあたりでタイトルと背景色が変わるのが分かると思います。
また、600pxあたりで画像が消えます。
レスポンシブの実装を行う際は、以下の３つの設定を行います。
- viewport
- メディアクエリ
- ブレークポイント
１）viewport（ビューポート）
viewportとは、「表示領域」です。
例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域が
viewportになります。
viewportの指定はhtml内のheadタグ内に書きます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewportを指定しないと、スマートフォンで表示した際に全体を表示できなかったり、文字が小さくなり見づらいサイトになってしまいます。
widthには320pxなどの固定値も指定できますが、device-widthを指定することで端末画面の幅に表示領域を合わせる設定になります。
initial-scaleは、初期ズーム倍率です。
２）ブレイクポイント
ブレイクポイントとはレスポンシブデザインの表示を切り替えるポイントのことで、
例えば以下のようにCSSを書きます。
min-width: 744px → 744px以上のCSS
max-width: 743px → 743px以下のCSS
３）Media Queries（メディアクエリ）
メディアクエリとは、CSSの仕様の一つで、表示画面環境に応じて適用するスタイルを切り替える機能。 一つのページで複数の異なる表示環境に対応するレスポンシブデザインを実現することができます。
以下のように記述します。
media メディアタイプ and (メディア特性){指定したいCSSの記述}
４）レスポンシブ実装例
ビューポート、ブレイクポイント、メディアクエリを踏まえ、以下の実装サンプルのhtmlファイルを作成し表示してみて下さい。背景色が横幅によって変化することが分かると思います。
実際には、スマホサイトでボタンの位置がPC版と異なったり色々なレスポンシブ対応をすることになります。
実装サンプル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
background-color: chartreuse;
}
@media screen and (max-width: 480px) {
div {
background-color: blueviolet;
}
}
@media screen and (min-width: 800px) {
div {
background-color: darksalmon;
}
}
</style>
</head>
<body>
<div>あいうえお</div>
</body>
</html>
３．リキッドレイアウト、フレキシブルレイアウト
１）リキッドレイアウトとは
画面サイズに応じて、要素が横幅100％相対的または可変的に調整されたデザインのこと。
２）フレキシブルレイアウトとは
PCで見たときだけ幅の固定をしたい場合などに使われるレイアウトで、最小幅と最大幅を指定します。最小幅と最大幅以外はリキッドレイアウトと同じです。
３）vw（Viewport Width）について
リキッドレイアウトでフォントサイズや要素サイズを指定する際に使用します。 基本的な考え方は％と同じなのですが、基準の取り方が異なります。
％は親要素に対する比率なのに対して、vwは画面の幅に対する比率となります。
例えば、幅360pxでフォントサイズが12pxでデザインされた場合、
12 / 360 * 100 ≒ 3.3vwと設定します。
420px横幅の端末で表示すると、420 * 3.3 ＝ 13.86pxで表示されます。
４）実装例
横幅360px基準でデザインされた場合にフォンサイズをｖｗで指定するサンプルです。
// フォントサイズのpx-vw変換
@function sp_px_vw($size) {
$viewport: 360; // スマホの基準幅
$mathVw: $size / $viewport * 100vw; // フォンサイズをvw単位に変換します。
@return round($mathVw * 1000) / 1000; // 端数処理
}
// 使用箇所
.classselector {
font-size: 8px;
@include sp {
font-size: sp_px_vw(8);
}
}
４．補足
１）iPhoneのSafeAreaについて
iPhoneX以降にSafeAreaという概念が出来ました。
グレーの部分がSafeAreaです。
iPhoneXを横向きにした場合、812pxからSafeAreaの幅が差し引かれることにより想定したブレ ークポイントを下回りPC表示が出来ない事象がありました。
iPhoneの仕様ということで対応しませんでした（逃げたともいう）が、対応しなければならない状況になった場合はSafeAreaを意識した実装をしなければなりません。
※viewport-fit=coverという設定を行い、padding等で調整するような対応は可能なようです。
２）CSSでレスポンシブ対応が難しいデザインの対応
PCとSPの切り替え時に、例えばボタンを左右並びを上下並びに変更するなどはCSSを使用し対応可能ですが、全く位置が変わる場合などで、どうしてもCSSで対応が難しい場合があります。その場合は、javascriptで対応します。
下記の例はjQueryで要素の位置を変更しています。
<script>
$(function () {
// 読込時とリサイズのイベント
$(window).on("load resize", function () {
// ブレイクポイント744px
if (window.matchMedia("(max-width: 744px)").matches) {
// SPサイズ時の要素位置変更処理
$(".check").insertAfter($(".left"));
} else {
// PCサイズ時の要素位置変更処理
$(".check").appendTo($(".right"));
}
});
});
</script>
３）ブラウザ毎の最小フォントサイズ
ブラウザによって最小のフォントサイズが10px程度になっています。（Chrome、Edge Chromium版）10px未満を指定しても反映されません。
最小フォントサイズを指定し、表示を縮小するような実装方法もあるようですが、基本的にPCの場合、10px以上でデザインしてもらうようお願いした方がよいと思います。