レスポンシブデザインに必要不可欠なブレイクポイントとメディアクエリとは？

皆様こんにちは。澤田です。皆さんはブレイクポイントというものをご存知でしょうか？テニスの試合で使う単語のブレークポイントではないですよ！ブレイクポイント(またはブレークポイント)は、レスポンシブWebデザインにおいて重要な役割を持っています。 レスポンシブWebサイトを実現するにあたって、多くのサイトがブレイクポイントとメディアクエリによる画面幅の変更を行っています。今日は自分への覚え書きの意味もこめて、ブレイクポイントについてお話しします。最近増加しているレスポンシブWebデザインにはこういう技術が使われているんだよ〜ということが紹介していきたいと思います。 （Webサイト作成にあたっての構造をあまり知らない方を対象にしています。初歩的な内容ですので開発やコーディング経験をお持ちの方には物足りないかと思います。）

そもそもブレイクポイントはWebサイトにどう使われているのか？

ブレイクポイントは、デバイスの画面幅・解像度に合わせたサイトデザインの表示に重要な役割を持っています。

ごく普通にインターネットを使用している人はまずやらないと思いますが、レスポンシブ Webサイトはウィンドウの角をつかんで画面サイズを変更すると、どこかで「かくっ」と画面のレイアウトが切り替わる位置があります。その切り替わる瞬間の画面サイズにブレイクポイントは設定されています。ブレイクポイントが設定されていることで、画面幅の違う様々なデバイスに適したサイトデザインが実現でき、レスポンシブWebサイトとなります。（解像度よりもイメージしやすいかと思いますので、画面幅という言い方を使用させていただきます。）

ちなみに、Chromeの場合、Developerツールのトグルを利用して複数デバイスでのプレビューを見ることができます。

ブレイクポイントとは

レスポンシブWebサイトにおけるブレイクポイントとは、画面幅に合わせてCSSを切り替える時に使用する、切り替えポイントのことです。メディアクエリと併用し、ブレイクポイントでデザインが可変するポイントを設定することで、各デバイスに適したWebサイトを実現します。

ブレイクポイントはpixelによって設定されており、設定されるpixle数はWebサイトによって様々です。スマートフォンの幅、タブレットの幅、パソコンの幅に合わせてブレイクポイントが設定されています。どのデバイスも画面幅は様々なので、全ての機種に対応することができません。そのため、いくつかの主要なポイントにあわせて設定されることが多く、320px-480px,758px,1024pxのブレイクポイントが一般的に使われやすいです。これらの切り替えポイントは一般的に多く使われているだけで、ブレイクポイントに決まりはありません。最近はスマートフォンの画面幅が大きくなっていてタブレットに近づいてきているので、スマホのブレイクポイントを上記より大きく設定しているWebサイトも多くあります。

スマホなら320px〜480px、タブレットなら768px〜1023px（タブレット横）、そしてPCは1024px〜といったポイント設定が多いようです。

メディアクエリとは

メディアクエリは、ブレイクポイントにあわせてスタイルを設定することができる技術です。メディアクエリを使用することで、1つのスタイルシートの中で様々な画面幅に適応したスタイルを記述することができ、別のスタイルシートを読み込み必要がなくなります。

メディアクエリを使用することで、画面幅ごとにスタイルを切り替えることができます。 メディアクエリは、CSS2からあったmediaタイプを発展させたものだそうです。では、実際スタイルシートではどのような記述をするのかというと、下記のようになります。

@media screen and (max-width: 1024px){
     p{sample: sample;}
}
@media screen and (max-width: 850px){
      p{sample: sample;}
}
@media screen and (max-width: 559px){
      p{sample: sample;}
}

とあるページにおいて、指定したpx数の画面幅のとき変更する属性の挙動を指定する場合を想定しています。 この時指定する順番ですが、モバイルファーストといってPCの画面サイズからではなくスマートフォンを先に考え設定するやり方が一般的と言われています。 それぞれブレイクポイントとなるpx数を設定し、max-width:1024pxなら1024px以下の場合にスタイルが適応され、max-width:850pxなら850px以下に適応される…といった具合に画面幅に合わせたデザインを実現することができます。

まとめ

Web業界流れや機器の流通・発達によって、増加しているレスポンシブWebサイト。レスポンシブWebサイトにも、細かな構造と工夫がなされています。レスポンシブサイトを作成する仕組みの理解に少しでも繋がりましたでしょうか。 私はまだまだ勉強中の身なので、書きながら覚えようとしているところで、まだまだ理解できていないところが多くあります。また、私自身勉強中なため浅く触る程度の記事になってしまいましたが、同じく勉強中の方、これからレスポンシブWebデザインの制作をお考えの方のお力添えくらいになれれば幸いです。