今更聞けない！レスポンシブデザインについて

近年のスマートフォンの普及から今はほとんどのWEBサイトが対応している「レスポンシブデザイン」。

今回はそのレスポンシブデザインの概念や、どうやってコーディングで実装されているかを初心者の方にもわかりやすくご紹介していきます。

これからコーディングについて勉強する方や、レスポンシブデザインについてしっかり理解しておきたいという方は是非、最後まで見ていってください！

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

レスポンシブデザインとは、スマートフォン・パソコンなどのどんなデバイスからでも見やすく、使いやすいページレイアウトにするためのデザインのことを指します。

WEBサイトにレスポンシブデザインを導入すると、同じ内容の情報をアクセスする側の端末の画面幅に応じたデザインに自動で切り替えられるため、デザイン崩れが起きません。

また、長期的なコンテンツの管理、運営がしやすいところもメリットと言えます。

デバイスの多様化

近年、ユーザーがインターネットのページにアクセスする端末はパソコン以外でもタブレット・スマートフォンなど、多様化が進んでいます。

スマートフォンが普及するにつれて、インターネットにアクセスするデバイスの中心はパソコンからスマートフォンに移行しました。

現在では、Webサイトへのアクセスの70%以上がスマートフォンからと言われています。

ブレイクポイントとは？

次に、レスポンシブデザインに欠かせないワードとも言える「ブレイクポイント」についてご紹介していきます。

ブレイクポイントとは、レスポンシブ対応のWEBサイトにおける画面幅を切り替える時のポイント(画面幅)のことを指します。

ブレイクポイントでデザインの切り替えを行うことで、各デバイスに適したWebサイトを実現します。

ブレイクポイントのサイズについて

ブレイクポイントはピクセルによって設定されており、そのピクセル数はWEBサイトによって様々です。

スマートフォンの画面幅、タブレットの画面幅、パソコンの画面幅に合わせてブレイクポイントが設定されています。

しかし、どのデバイスも画面幅は様々なので全ての機種に対応することはできません。

そのため、基本的にはいくつかの主要なポイントにあわせてブレイクポイントを設定することが多く、一般的には以下のブレイクポイントがよく使われています。

これらの切り替えポイントは一般的によく使われているだけで、ブレイクポイントに決まりはありません。

近年ではスマートフォンの画面幅が大きくなり、だんだんとタブレットの画面幅に近づいてきているので、WEBサイトもスマホのブレイクポイントを上記より大きく設定している場合が多くみられます。

メディアクエリとは？

メディアクエリとは、ブレイクポイントにあわせてスタイルを設定でき、切り替えができる機能のことです。

メディアクエリを使用すれば、1つのスタイルシートの中で多様な画面幅に適応したスタイルを記述することができるため、わざわざ別のスタイルシートを読み込む必要が無いので便利です。

それでは、次から実際にメディアクエリを使ったレスポンシブデザインの実装方法について詳しく解説していきます。

レスポンシブデザインの実装方法について

以下のコードは、メディアクエリを使用したレスポンシブデザインを実装するためのCSSコードの例になります。

メディアクエリは@mediaというタグを使い、以下のような記述方法で実装します。

@media screen and (max-width: 1024px){
      h2 {color: #3a3a3a;}
}
@media screen and (max-width: 768px){
      div {padding: 10px;}
}
@media screen and (max-width: 375px){
      p {font-size: 16px;}
}

ここでのmax-width:〜pxの意味としては、〜px以下の画面幅になるとその中に記述されたCSSが適用されるという意味となります。

逆にmin-width:〜pxの場合は〜px以上の画面幅になるとその中に記述されたCSSが適用されるという意味となります。

このメディアクエリを上手に使いこなせると、画面幅が大きくなっても小さくなってもデザインが崩れないようにすることができます。

まとめ

今回はレスポンシブデザインの概念や、レスポンシブに関する専門用語、実際にどうやってコーディングで実装されているかを初心者の方にもわかりやすくご紹介してきました。

いかがでしたでしょうか？

近年ではモバイルファーストと呼ばれるほどスマートフォンが普及しており、今ではパソコンよりも手軽にWEBサイトを見ることのできるデバイスとなりました。

そのため、コーディングを学ぶにあたってレスポンシブデザインの実装は必ず習得しておきたい知識の一つなので、しっかりと理解しておきましょう。

別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していますのでそちらもぜひチェックしてみてください！