レスポンシブデザインとは？
レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチデバイスに対応したWebサイトを制作できます。
マルチデバイス対応にする必要性
この数年でスマートフォンからのネット利用者数、接続時間ともにものすごい勢いで増加しています。それに比べPCからの利用者は減少しています。国内の主要サイトもスマホからの利用者数の方がPCからの利用者より多くなっています。これは大手のサイトに限った事ではありません。このような状況を考えると、スマホがファーストスクリーンという事が現実的に起こってきます。特にB to C向けのサイトに関してはマルチデバイス対応が必須です。
Googleが推奨するスマートフォンに最適化されたサイト構築
現在、Googleはマルチデバイス対応を強く推奨していて、対応したサイトの掲載順位を全世界的に引き上げています。（ただし、タブレットやパソコンからの検索には影響しません。）
Googleがマルチデバイス対応されていると認めたサイトには検索画面に「スマホ対応」のラベルが表示されます。
Google ウェブマスター向け公式ブログ [JA]: ウェブをさらにモバイル フレンドリーにするための取り組み
という事はGoogleが求めるスマートフォンに最適化されたサイト構築の方法をしっかりと理解する必要があります。
Googleのモバイルフレンドリーテストというサービスを使って、そのサイトがGoogleが求める方法で作られているか確認する事が出来ます。
Googleが推奨するマルチデバイス対応の詳しい内容
レスポンシブWebデザイン（RWD）の制作
レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。
レスポンシブ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のポートレート／ランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。
今回のブレイクポイントは
ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。
CSSメディアクエリーの書き方
今回は１つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。
@media (max-width:959px){
}
モダンブラウザーでは上記のように「@ media」のみでも動きますが、古いブラウザーにも対応させるには下記のような記述が必要です。
@media screen and (max-width:959px){
}
@media screen and (max-width:767px){
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブデザイン基礎4</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1{
margin: 0;
padding: 0;
}
.container{
width: 960px;
margin: 0 auto;
}
header{
width: 100%;
height: 200px;
background-color: darkorange;
margin-bottom: 20px;
}
.main{
width: 100%;
height: 400px;
background-color: aquamarine;
margin-bottom: 20px;
}
.wrapper{
overflow: hidden;
}
.box{
width: 225px;
height: 225px;
background-color: bisque;
float: left;
margin-right: 20px;
}
.box:last-child{
margin-right: 0;
}
.box:nth-child(even){
background-color:cadetblue;
}
/*959px以下*/
@media(max-width:959px){
.container{
width: 470px;
}
.box:nth-child(2){
margin-right: 0;
}
.box:nth-child(-n+2){
margin-bottom: 20px;
}
}
/*469px以下*/
@media(max-width:469px){
.container{
width: 225px;
}
.box{
margin: 0 0 20px 0;
}
}
</style>
</head>
<body>
<div class="container">
<header></header>
<div class="main"></div>
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div><!--/.wrapper-->
</div><!--/.container-->
</body>
</html>
コメント