レスポンシブウェブデザイン

スマートフォンの誕生

スマートフォンやタブレットの登場により、パソコンモニター向けによる従来型のウェブサイトに加え、小さな画面でも見やすいように設計されたウェブサイトが必要になります。近年は、ワードプレスなどのCMSで作られたウェブサイトも増加傾向にあり、記事に共感できるSNSボタンの設置など一般的になりました。

レスポンシブウェブデザイン

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

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

振り分け”型スマートフォンサイト

スマートフォンで閲覧できるすべてのサイトがレスポンシブに対応しているのではありません。「振り分け型」を採用している公式サイトも多く存在しています。振り分け型スマートフォンサイトは、ユーザーエージェント（UA）で振り分けることで、多くのデバイスやスクリーンサイズに対応する方法です。JavaScriptやサーバーサイドでユーザーエージェント情報を読み出し、デバイスの種類に応じて用意した専用のWebページ（HTML）へ移動させる手法です。この振り分け型を採用しているサイトは、PC用とスマホ用とそれぞれに(HTML・CSS)個別に制作しておく必要があります。

モバイルフレンドリー

「あなたのウェブページはモバイルフレンドリーですか？」
https://search.google.com/test/mobile-friendly?hl=ja

meta viewport タグは、ページのサイズやスケーリングを、デバイスの幅に合わせてどう調整するかをブラウザに伝えます。meta viewport 要素を指定しない場合は、モバイルブラウザでもデフォルトとして、パソコン画面の幅（デバイスによって異なりますが通常はおよそ 980 ピクセル）でページがレンダリングされます。その後モバイルブラウザがフォントサイズを大きくし、画面に収まるようにコンテンツを縮小する、またはコンテンツの一部のみを表示する、といった調整を試みます。

ビューポートとは

見ているデバイスに合わせて、画面幅を調整する仕組みです。すべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグ(ビューポート)を追加します。<head></head>内に以下の一行を記述することで、ページ全体が対応します。

<meta name="viewport" content="width=device-width, initial-scale=1">

画面の大きさとブレイクポイント

ブレイクポイントとは
ブレイクポイントとは、CSSソース内で適用させるスタイルを区切るモバイルサイズのポイントを指します。たいていは画面の横幅サイズを使ってブレイクポイントが作られます。現在、モバイルの大きさは様々ですので、レスポンシブウェブデザインを採用する際には、ある画面サイズを境界にしてスタイルを分割したい場合が多くあります。そのサイズがブレイクポイントです。例えば「画面の横幅600px未満に適用するスタイル」と「画面の横幅600px以上に適用するスタイル」とを切り分ける場合は、ブレイクポイント600pxに切り分けます。ブレイクポイントは複数個を併用できますが、あまり多くのブレイクポイントを定めず、1-2サイズで切り分ける方が、コーディングしやすいと思います。当サイト(初級編)で練習しているブレイクポイントは、600px一箇所で練習しています。

@charset "utf-8";
/*デフォルトのスタイル(スマホ・PC共通)--*/
 

@media screen and (min-width : 600px)
{
/*最小幅 600px 以上のモニターのみのスタイル(PCモニター用)------*/

}　/*←---最後の閉じカッコを忘れないようにしましょう。----*/

ブレイクポイントのサイズは、様々ですが、一般に「タブレット」を、どう扱うかがポイントになってきます。ipadで検証すると、ヤフーは、タブレットで見るとパソコンモニターと同じレイアウトを保っています。768oxの大きさを、パソコンと同様に扱うか否かあるいは、特別なボックスのみを記述する方法もありでしょう。ブレイクポイントは、サイトによってもまちまちですのでデザインレイアウトが崩れないようかつユーザーが見づらくならないよう適切なサイズで切り分けることをお勧めします。

気をつけなければならないのは、デフォルトのスタイルの部分です。基本的に、全てのモバイルが、共通で扱うスタイルを一番上部に記述し、もっとも優先順位が「高」の部分になります。CSSは、上から順に読み込まれ、下に継承されていきます。デバイスレイアウトが異なる部分を、それぞれ後記述してスタイルを上書きする手順になります。上書きされない場合は、そのまま継承していくわけです。要素によるスタイルには優先順位があり、上書きできないケースもあるのでコーダー泣かせの原因になってきます。

@charset "utf-8";
　　/*------- デフォルトのスタイル -----*/
@media screen and (min-width : 480px){
　　/*------- 最小幅 480px以上 -----*/
}
@media screen and (min-width : 768px){
　　// 最小幅 768px 以上の指定
}
@media screen and (min-width : 1024px){
　　// 最小幅 1024px 以上の指定
}

最も、コーディングし易い方法は、「モバイルファースト」を中心に、デフォルトスタイルを記述する方法です。近年では、パソコンよりスマートフォンが優先になっていますから、スマホレイアウトをそのままパソコンモニターに採用することも可能です。まずは、スマートフォンレイアウトを完成させ、そこからパソコンレイアウトとの差異を、ブレイクポイント以下に記述するとスムーズに仕上げることができます。パソコン用のレイアウトを、先に完成してしまうと、あとからスマホ仕様に変更する作業が、非常に困難になります。

まずは、試してみよう。

背景チェンジ

モニターの横幅が、600px以上になったら、背景色が変わるような練習をしてみましょう。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/the-new-css-reset@1.7.2/css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>HOLLO!</h1>
<p>レスポンシブの練習です。</p>
</body>
</html>

@charset "utf-8";
/*wheat-----*/
body{background-color:#f5deb3}

@media screen and (min-width : 600px)
{
/*burlywood-----*/
body{background-color:#deb887}
}

レスポンシブウェブデザイン

スマートフォンの誕生