こんにちは、タクローです。
スマートフォンやタブレット端末などがこれだけ普及し、ウェブ制作者にとって当然のように求められるレスポンシブデザイン。
そんなレスポンシブデザインで使われるビューポート、メディアクエリについて、今回は解説していきます。
ウェブ制作の初心者の方や勉強中の方に参考にしていただけると幸いです。
目次
ビューポートを設定する
ウェブサイトをレスポンシブデザインで制作する時、理解しておかなければならない「ビューポート」。
そんな「ビューポート」について解説していきます。
制作しているウェブサイトが、スマートフォンやタブレット端末などで見られることを前提としている場合、以下のようなmetaタグが必要になります。
<meta name="viewport" content="width=device-width, initial-scale=1">
レスポンシブデザインを設計していく場合、このmetaタグをheadタグの中に記述しておきましょう。
こうすることで、画面サイズが異なるさまざまな端末に適したウェブサイト表示が可能になります。
つまりこの「viewport」とは、ウェブサイトの表示領域のことで、レスポンシブサイトで必要な表示を制御してくれるとても重要なタグのことです。
先に記したタグをコピーして、headタグの中に張り付けておけば特に問題はありませんが、content属性について簡単に説明しておきます。
width
ビューポートの横幅のことで、ピクセル単位で指定します。
初期値は「960px（ピクセル）」です。
指定できる範囲は、200pxから10,000pxですが、表示するデバイスの幅に合わせる「device-width」と指定することもできます。
さまざまなデバイス幅に対応するため、一般的に「device-width」と指定することが多いようです。
先ほどの例で、「width=device-width」と指定したのはそのような理由からです。
height
ビューポートの縦幅のことで、こちらも横幅と同じように指定することができます。
初期値（何も指定しない場合）は横幅とのアスペクト比で得られた値です。
指定できる範囲は、200pxから10,000pxですが、表示するデバイスの幅に合わせる「device-heitht」と指定することもできます。
先ほどの例で、widthを「divice-width」と指定したため、特に指定していません。
initial-scale
ウェブサイトが表示された時の初期倍率を指定することができます。
初期値は自動的に「1」となります。
先ほどの例で、「initial-scale=1」となっていますが、省略してしまっても構いません。
ただ、Windows PhoneのIEは、この「initial-scale」に対応されていないとのこと。
そのような理由で、「initial-scale=1」と念のため明示しておいた方がいいようです。
minimum-scale
最小縮小倍率を指定することができます。
「0」から「10」までの範囲で指定することができます。
初期値は自動的に「0.25」となります。
maximum-scale
最大拡大倍率を指定することができます。
「0」から「10」までの範囲で指定することができます。
初期値は自動的に「1.6」となります。
user-scalable
ウェブサイトを閲覧しているユーザーがズームすることができるかどうか指定することができます。
「yes」か「no」、または「1」か「0」の値で指定します。
初期値は自動的に「yes」、つまり「ズーム可」となります。
ビューポートの実際
ビューポートのcontent属性についても解説してきました。
content属性のいろいろな値を考慮しても、実際のところ、やはり下のような書き方が一番無難なようです。
<meta name="viewport" content="width=device-width, initial-scale=1">
一般的であり、問題なくレスポンシブに対応できる書き方と言っていいでしょう。
しかし、ウェブサイトの特性によっては、表示結果が適切でない場合もあると思います。
そんな場合は、CSSで解決できることもあると思いますが、ビューポートのcontent属性を書き換えてみると解決の糸口になるかもしれません。
メディアクエリの使用
メディアクエリとは、端末の種類や特性に応じて、ウェブサイトやウェブアプリの表示を変えることができるCSS3になってから登場したCSSの仕様のことです。
例えば、様々なディスプレイサイズの媒体があると思いますが、小さいサイズ、大きいサイズ、各サイズそれ相応のウェブサイトの見せ方ってあると思います。
メディアクエリを使えば、そのディスプレイのサイズに応じて、CSSによるデザインの切り替えが可能になるのです。
その切り替える条件、切り替えるボーダーラインを「ブレークポイント」と呼びます。
つまり、メディアクエリとは端末の種類や特性、ディスプレイサイズに応じて「ブレークポイント」を設定することです。
メディアクエリでは「ブレークポイント」を「メディアタイプ」と「メディア特性」で設定することができます。
メディアクエリの書き方については、後回しにして、「メディアタイプ」と「メディア特性」について、簡単に解説してまいります。
メディアタイプについて
メディアクエリで使用する端末のカテゴリを「メディアタイプ」と言います。
メディアタイプには下記のようなものがあります。
| all | 一般的な媒体すべて |
|---|---|
| screen | ディスプレイ（PC、タブレット、スマートフォン） | プリンタ |
| speech | 音声出力機器 |
| projection | プロジェクター |
| tv | テレビ |
このメディアタイプは省略することもできますが、省略した場合は「all」が自動的に適用されます。
メディア特性について
メディアクエリではブレークポイントの条件として、メディアタイプに加えて、さらにメディア特性を指定することができます。
さまざまなメディア特性がある中で、今回は「max-width」と「min-width」だけを使って解説していきたいと思います。
「max-width」と「min-width」だけを理解していれば、ある程度のことはできてしまうからです。
メディア特性について、詳細についてはまた別の記事で解説していきたいと思います。
「max-width」は「最大幅」、「min-width」は「最小幅」という意味になります。
どうやって使うかは、以降、解説していきます。
メディアクエリの書き方
メディアクエリはCSSファイルの中に書いていきます。
具体的な書き方は以下のとおりです。
{
（そのメディアで適用されるCSSをここに記述）
}
例えば、以下のようなCSSがあったとします。
p {
text-align: center;
}
@media screen and (min-width: 480px) {
p {
color: red;
}
}
@media screen and (min-width: 768px) {
p {
color: black;
}
}
まず、最初の文字中央揃え（text-align:center;）についてですが、こちらはブレークポイントに関係なく、すべてのサイズで適用されるCSSとなります。
次の文字色が赤で指定されたpタグについてです。
ブレークポイントは「メディアタイプ」が「screen」、そして「メディア特性」が「min-width: 480px」と指定されています。
つまり、ディスプレイ（PC、タブレット、スマートフォン）媒体で、ディスプレイ幅が480pxからはpタグの文字色を赤にするという意味になります。
最後の文字色が黒で指定されたpタグについてです。
ブレークポイントは「メディアタイプ」が「screen」、そして「メディア特性」が「min-width:768px」と指定されています。
こちらの場合は、ディスプレイ（PC、タブレット、スマートフォン）媒体で、ディスプレイ幅が768pxからはpタグの文字色を黒にするという意味になります。
この例では、ディスプレイ幅480pxと768pxをブレークポイントして、デザインを切り替えることができるというわけです。
メディアクエリを使えば、ディスプレイ幅に応じて、柔軟なデザインの切り替えができます。
このようにして、レスポンシブデザインを実現しているのです。
先ほどの例では、特定のCSSファイル中でスタイルを切り分けていましたが、ファイル自体をディスプレイ幅に応じて使い分けることもできます。
CSSを外部ファイルに記述する場合、linkタグでCSSファイルを参照しますが、ちょっと書き方を変えるだけで、CSSファイルの使い分けができるようになります。
下の例をご覧ください。
ディスプレイ（PC、タブレット、スマートフォン）媒体で、ディスプレイ幅が480pxからはファイル「XX1.css」を使う。
また、ディスプレイ（PC、タブレット、スマートフォン）媒体で、ディスプレイ幅が768pxからはファイル「XX2.css」を使う。
こんな感じで簡単にCSSファイルの使い分けができるようになります。
これをいつものようにheadタグの中に記述しましょう。
まとめ
今回の記事で解説したのは、ウェブサイト制作の初心者の方、あるいは勉強されている方が最低限知っておかなければならない基本的な内容です。
とは言っても、一般的なウェブサイトを制作するには十分な内容です。
それ以上の内容については、必要に応じて、調べてみるといいと思います。
やはり一番重要なことは「基本」だと思いますし、基本に忠実であることが、スキルアップにつながっていくと考えております。
お互い、さらなるスキルアップ目指して、頑張ってまいりましょう。
最後までお付き合いいただき、ありがとうございました。