レスポンシブデザイン基礎

レスポンシブデザインとは？

レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチデバイスに対応したWebサイトを制作できます。

マルチデバイス対応にする必要性

この数年でスマートフォンからのネット利用者数、接続時間ともにものすごい勢いで増加しています。それに比べPCからの利用者は減少しています。国内の主要サイトもスマホからの利用者数の方がPCからの利用者より多くなっています。これは大手のサイトに限った事ではありません。このような状況を考えると、スマホがファーストスクリーンという事が現実的に起こってきます。特にB to C向けのサイトに関してはマルチデバイス対応が必須です。

Googleが推奨するスマートフォンに最適化されたサイト構築

現在、Googleはマルチデバイス対応を強く推奨していて、対応したサイトの掲載順位を全世界的に引き上げています。（ただし、タブレットやパソコンからの検索には影響しません。）
Googleがマルチデバイス対応されていると認めたサイトには検索画面に「スマホ対応」のラベルが表示されます。

Google ウェブマスター向け公式ブログ [JA] : ウェブをさらにモバイルフレンドリーにするための取り組み

という事はGoogleが求めるスマートフォンに最適化されたサイト構築の方法をしっかりと理解する必要があります。
Googleのモバイルフレンドリーテストというサービスを使って、そのサイトがGoogleが求める方法で作られているか確認する事が出来ます。

Googleが推奨するマルチデバイス対応の詳しい内容

https://developers.google.com/search/mobile-sites/

レスポンシブWebデザイン（RWD）の制作

レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。

f:id:CHOCOtan:20220112095748p:plain

レスポンシブWebデザインは、主に「フルードグリッド（Fluid Grid）」「フルードイメージ（Fluid Image）」「メディアクエリー（Media Query）」の3つの技術的な要素で構成されます。

●フルードグリッド

　フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン（Fluid Design）」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。

●フルードイメージ

　フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター（Richard Rutter）氏によって提唱されました。

●メディアクエリー

　メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

●ブレイクポイント

　ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。

メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント（Break Point）」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。

ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap3ではブレイクポインが４つあり、
1200px以上がPC(大画面)用
1199px～992pxがPC用
991px～768pxがタブレット用
767px以下がスマホ用
に分かれていましたが、

バージョンアップしたBootstrap4ではブレイクポイントが５つあり、
1200px以上がPC(大画面)用
1199px～992pxがPC用
991px～768pxがタブレット用
767px～544pxがスマホ用
543px以下がスマホ（小さいサイズ）用
に分かれました。これによって例えばiPhone 5, 6のポートレート／ランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。

今回のブレイクポイントは

PCサイズ　960px以上
タブレットサイズ　768px～959px
スマートフォンサイズ　767px以下

ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。

CSSメディアクエリーの書き方

今回は１つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。

@media (max-width:959px){

}

media属性の指定

media属性とはデバイスごとの表示のコントロールです。
例えばmedia属性にscreenと指定すると、screen（一般的なコンピュータスクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトはすべて対象になります）時の表示をcssでコントロール出来ます。allにすると全てのデバイス時の表示をコントロール出来ます。またallを対象にする場合はmediaタイプの指定が省略可です。

reference.hyper-text.org

screenを対象にする場合

@media screen and (max-width:959px){

}

@media screen and (max-width:767px){ 


}

allを対象にする場合（allは省略）

@media  and (max-width:959px){


}

@media  and (max-width:767px){ 


}

またMedia Queries Level 4 （September 2017）からは横幅の指定に演算子が使用出来るようになりました。
まだ演算子の使い方に慣れていませんが、javascript等には演算子がたくさん出てくるので、少しづつ演算子も使って行きましょう。

A>B　　AよりもBの値が小さい
A=B　 AよりもBの値が同じか小さい
A<=B 　AよりもBの値が同じか大きい

</b　　aよりもbの値が大きい>

演算子を使った場合

@media  and (width < 960px){


}

@media  and (width <=  767px){ 


}

12月9日作業分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>max-widthとmin-widthの使い方</title>
<style>
html,body{
margin: 0;
padding: 0;
}
/* pcレイアウト */
body{
background-color: beige;
}
.container{
max-width: 960px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
background-color: #FFF;
}
header{
height: 300px;
background-color: cadetblue;
margin-bottom: 10px;
}
nav{
height: 50px;
background-color: coral;
margin-bottom: 10px;
}
.wrapper{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.main{
width: 600px;
height: 400px;
background-color: darkolivegreen;
}
.sub{
width: 330px;
height: 400px;
background-color: dimgrey;
}
footer{
height: 100px;
background-color: gold;
}

@media (max-width:959px){
/* bodyの幅が959px以下の時はここの指定が有効 */
.wrapper{
display: block;
}
.main{
width: 100%;
margin-bottom: 10px;
}
.sub{
width: 100%;
}
}
@media (max-width: 767px){
/* タブレットからスマホレイアウトの切り替わりポイント */
.main{
height: 600px;
}
.sub{
width: 50%;
height: 200px;
}
}
</style>
</head>
<body>
<div class="container">
<header></header>
<nav></nav>
<div class="wrapper">
<div class="main"></div>
<div class="sub"></div>
</div>
<footer></footer>
</div>
</body>
</html>

spファーストでの記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>spファーストでの指定</title>
<style>
html,body{
margin: 0;
padding: 0;
}

/* spレイアウト */
body{
background-color: beige;
}
.container{
max-width: 960px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
background-color: #FFF;
}
header{
height: 300px;
background-color: cadetblue;
margin-bottom: 10px;
}
nav{
height: 50px;
background-color: crimson;
margin-bottom: 10px;
}
.wrapper{
margin-bottom: 10px;
}
.main{
height: 600px;
background-color: darkkhaki;
margin-bottom: 10px;
}
.sub{
height: 200px;
background-color: darkorange;
}
footer{
height: 100px;
background-color: darksalmon;
}

@media (min-width:768px){
/* body幅が768px以上の場合 */
.main{
height: 400px;
}
.sub{
height: 400px;
}
}
@media (min-width:960px){
/* body幅が960px以上の場合 */

.wrapper{
display: flex;
justify-content: space-between;
}
.main{
width: 600px;
margin-bottom: 0;
}
.sub{
width: 330px;
}
}

</style>
</head>
<body>
<div class="container">
<header></header>
<nav></nav>
<div class="wrapper">
<div class="main"></div>
<div class="sub"></div>
</div>
<footer></footer>
</div>
</body>
</html>