以前のWEBは「PCで見る」というのが一般的で、それ以外の選択肢はありませんでしたが、最近ではスマートフォンやタブレットの普及で、PC以外の端末でWEBを見るということが今や一般的になりつつあります。
サイトの構築は、この端末を意識した「レスポンシブデザイン」で作ることが一般的な方法です、
レスポンシブデザインの最大のメリットは、PCサイト、スマートフォンサイトがすべて1つのHTMLソースで更新、管理できるという点にあります。
今回は、レスポンシブデザインとメディアクエリについてご紹介します。
目次
レスポンシブデザインとは？
レスポンシブWebデザインは、どんな大きさの画面でも見やすく、使いやすいWebサイトにするために必要なもので、1つのHTMLに紐付けて、CSSをデバイスごとに用意して表示を変えます。
レスポンシブデザインの最大のメリットは、Webサイト制作後の、Webコンテンツ運用のコストが低くすることができ、サイトの運用にリソースや予算を割けない中小企業にとっても強い味方です。
今は、WordPressなどでレスポンシブに対応したテンプレートも普及し、オープンソースで開発され、誰でも無償で使えるbootstrapなどのフレームワークが広く普及し、そのテンプレートをカスタマイズすることで簡単に扱うことができます。
レスポンシブデザインのメリットとデメリット
では、レスポンシブデザインにはどんなメリットとデメリットがあるのでしょうか。
レスポンシブデザインのメリット
管理が楽
HTMLが1つの為、サイトに載せる情報を修正や更新する時に作業が1回で済み、デバイスごとにHTMLがある場合、修正や更新の作業をHTMLの数だけしなくてはなりません。
シェアされやすい
URLが1つで済む為、サイトを見るユーザー間でシェアされやすくなります。
今は一般的ではありませんが、スマホ用のモバイルサイトとパソコン用のPCサイトがあった場合、見せたいユーザーのデバイスに合わせて異なるURLを送らなければなりません。
検索エンジンの上位に表示されやすい
スマホに対応したWEBサイトが検索結果の上位に表示されやすくなる「モバイルフレンドリー」や、スマホ用のページが順位の決め手になる「モバイルファーストインデックス」に対応します。
MFIとは、Googleが発表したモバイルファーストインデックス（Mobile First Index、MFI）とは、これまで検索エンジンがデスクトップサイトの内容をもとにインデックスしてコンテンツの質を評価していたのを一変させ、モバイルサイトを評価の主軸にしてインデックスするという方針です。
今は、SEO対策の標準的なものなので、キチンと整理して意識したサイト作りを行いましょう。
レスポンシブデザインのデメリット
スマホでの表示に時間がかかる
HTMLが1つなのでパソコンと同じデータをスマホにも読み込みます。
その為、スマホで表示しないデータも読み込まれ、表示完了するまで時間がかかってしまうので、HTMLの記述には注意が必要です。
工数がかかる
デバイスごとにデザインを制作し、それに合わせたコーディングが必要となるので、想定ユーザーのデバイスを仮定して構築する必要があります。
そのため場合によっては、サイトの制作工数がかかってしまう可能性があります。
メディアクエリとは？
レスポンシブデザインの基盤となるのは、「メディアクエリ」というCSS3から実装された技術です。
メディアクエリは、Webサイトにアクセスをしてきたデバイス(PC、スマートフォン、タブレット)のウィンドウのサイズによって、適用するCSSを切り替えるための機能です。
<link rel=”stylesheet” href=”css/style.css” media=”screen”>
<head>〜</head>に記述するこのコードの場合、通常のディスプレイに対して、”style.css”を適用します。
ですが、大きいディスプレイと小さいディスプレイで見え方を変えたいと思った場合、媒体までしか判断ができないのでCSSだけではどうする事もできませんでした。
媒体までしか判断できなかったメディアやタイプを拡張し、媒体の特性まで判断できるようにしたのが、このメディアクエリです。
メディアクエリの実装例
メディアクエリは、cssファイルそのものをデバイスの幅によって変更させたり、cssファイル内で読ませるスタイルを変更することが可能です。
- link要素として指定する場合
- スタイルシートに指定する場合
両者は似ているようですが、要はstyle.cssを振り分けるのか？それともcss内で読み込むスタイルを切り替えるのか？といった違いで、その場合メディアクエリの記述方法が若干異なり、基本的にデバイスの横幅を指定するだけで各種css・スタイルを適応させることが可能です。
link要素として指定する場合
この方法はhtmlのheadタグの中に記述する方法で、通常のスタイルシートの後に追加します。
この記述は、それぞれウィンドウのサイズがタブレット基準、スマートフォン基準に変わった際に、対応したスタイルシートを追加で読み込む仕組みになっています。
<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">
/**
中略
**/
</head>media=” ”のところを見てみると、screen の後ろに記述がありますが、これがメディアクエリです。
この記述例は「画面サイズが480pxまではstyle.cssを読み込む」という内容で、画面サイズ480pxまではstyle.cssに記述されているCSSが適用されます。
ここで指定されているmax-widthは、横幅がいくつの場合にタブレット端末、スマートフォン端末を判断するかという基準になります。
また、設定している値以上（今回の場合は横幅のサイズ）になった場合はCSSは適用されません。
指定した値まではスタイルがあたっても、その範囲外では一切CSSが当たらない場合があるので、メディアクエリは以下のように複数用意することが可能です。
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">/* 画面サイズ1024px以上はこのファイルはスタイルが適用される */上記コードのように、分岐点（例の場合はmax-widthやmin-widthの数値）細かく指定することで、複数のファイルをその条件の時に読み込ませるといった事が可能です。
この分岐点は「ブレイクポイント」と呼ばれています。
ブレイクポイントの数や条件をもう少し細かくする事も可能ですが、現状、様々な解像度の端末が市場に出ているため、ターゲットとする端末によって数値を試行錯誤する必要があります。
細かくするほどメンテナンス性が低下しますので、大きくわけてスマートフォン向け、タブレット向け、デスクトップ向けといった端末の種類で分けているサイトも多く見られます。
スタイルシートに指定する場合
メディアクエリは、1つのスタイルシート（CSSファイル）に直接記述することが可能です。
こちらは下記のように「@」を付けてメディアクエリを記述し、「{ }」の中に適宜適応させるスタイルを記述していきます。
/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
color:red;
}
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
p {}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
}この方法は、ひとつのcssファイルで管理することが可能で、サイトの規模を考慮して使い分けましょう。
この中に書いたスタイルに関しては、メディアクエリで指定したサイズのデバイスのみ適応となり、PCとスマホの中間でタブレットにも対応したいという場合は以下のように記述します。
@media screen and (min-width: 768px) {
/* ここにPC用スタイルを記述） */
}
@media only screen and (min-width: 767px) and (max-width: 1280px) {
/* （ここにタブレット用スタイルを記述） */
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
}
