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

レスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのものです。

例えば、全体要素の幅を固定したサイトを作成した場合、それより画面幅が狭くなると、コンテンツの一部が隠れてしまいます。
ここにレスポンシブデザインを適用することで、画面のサイズに合わせて最適なレイアウトを組めるようになります。

メディアクエリの利用

メディアクエリ（Media Queries）とは

メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。

利用方法

viewportの設定

レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定しましょう。
viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。

index.html

<head><metaname="viewport"content="width=device-width, initial-scale=1.0"><head>

記述方法

メディアクエリは、@media (条件) { .... }という様に記述します。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。

style.css

@media(max-width:1000px){/* 画面幅が1000px以下のときに適用するCSSを記載する */}

メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できます。min-widthはその反対となります。

max-width: ◯◯px（またはmin-width: ◯◯px）のようにメディアクエリの条件を指定するとき、◯◯pxの部分をブレイクポイントと呼びます。
今回はスマートフォンの画面幅は670px以下、タブレットの画面幅は670px ~ 1000pxと想定して、ブレイクポイントを設定しましょう。

style.css

/* タブレット */@media(max-width:1000px){h1{color:blue;}}/* スマホ */@media(max-width:670px){h1{color:green;}}

レイアウト崩れの回避

要素のwidthが25%などの割合で指定されている場合、左右のpaddingなどがあると要素の幅の合計が100%を超えてしまい、レイアウトが崩れてしまうことがあります。
このようなレイアウト崩れは、box-sizing: border-box;を用いることで防ぐことができます。

`box-sizing: border-box;`

box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになります。そのため、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます。
※ただし、marginはborder-boxでの合計値に含まれないので注意

box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されています。
*はすべての要素に対してCSSを適用したい場合に用います。
border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなります。

style.css