Webサイトを制作する上で避けては通れない重要なポイントの一つであるレスポンシブデザインとは何か正確に理解しているでしょうか。
今回はそんなレスポンシブデザインについて、その意味やレスポンシブデザインをWebサイトに反映させる作り方、コードの書き方まで、徹底に解説していきます。
Contents
1：レスポンシブデザインとはデバイス毎のデザインのことを指す
まず、レスポンシブデザインとは別にレスポンシブWebデザインとも呼ばれ、様々なデバイス毎のデザインのことを指します。
普段、Webサイトを使用しているとき、パソコンの画面とスマートフォンの画面が少し違うことに気付いたことはありませんか。
あれはデバイスが変わることでデザインが勝手に変わっているのではなく、それ用にコードを記述することによって、それぞれのデバイスに最適な画面に変移しています。
レスポンシブデザインは少しHTMLのheadタグ内に追記することがありますが、主にデザインのコードを記述しているCSSを変更することで、それぞれのデバイス毎のデザインを指定することが出来ます。
ここからはその具体的な方法を解説していきます。
2：HTMLファイルのheadタグ内に『meta viewportタグ』を追記する
レスポンシブデザインを使用するためにはHTMLファイルのheadタグ内に『meta viewportタグ』を追記する必要があります。
具体的には下記のコードを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>今回は
今回はこちらの記事で紹介したコードに『<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>』を追記しました。
基本的にレスポンシブデザインを指定するためにはデバイス毎でデザインを変更するため、CSSファイルに追記することがほとんどですが、一部HTMLファイルにも追記しなければなりません。
それが『meta viewportタグ』でheadタグ内に記述します。meta viewportタグはデバイス毎にデザインを切り替えるというようにイメージすると分かりやすいでしょう。
細かく言及すると少し違う部分もありますが、レスポンシブデザインを初めて学ぶ際には追記したコードをそのままコピペすることをおススメします。
それでは次からCSSファイルに追記していきます。
3：『ブレイクポイント』を決めてCSSファイルに追記する
ここからはデザインを変更するためにCSSファイルに追記していきます。
その際、必ず覚えておかなくてはいけない言葉として、『ブレイクポイント』があります。
レスポンシブデザインがそれぞれのデバイス毎のデザインを指すことは説明しましたが、それを切り替えるタイミングが指定されていなければ、デバイス毎のデザインを用意したとしてもそれぞれのデバイス毎に最適なデザインを表示させることが出来ません。
そのため、ブレイクポイントと言われる、『この範囲のデザインはこれ！』という目印が必要になっていきます。
今回はそのブレイクポイントの書き方を『デスクトップ版』、『パソコン版』、『タブレット版』、『スマートフォン版』の4種類に分けて解説していきます。
3－1：デスクトップ版
まずはデスクトップ版から解説していきます。
下記のコードを見てください。
@media screen and (min-width: 1201px) {
/*デスクトップ版のコードを書く場所*/
/*画面幅は1200px以上*/
}ここからそれぞれのデバイス毎にブレイクポイントを指定していきますが、その中でも共通の記述である『@media』の部分は『メディアクエリ』と言われ、その後に記述されたコードの種類や幅でのみ反映されるデザインを表示させるコードになります。
今回は全て『@media screen』と記述されています。これは画面幅を意味し、この後に記述される画面幅でのみ以下のコードを反映させたいときに使用します。
レスポンシブデザインを使用する際、メディアクエリについて正確に理解していなくても大丈夫ですが、レスポンシブデザインが
『@media screen and (画面幅)』
の形で記述するということだけ理解しておきましょう。
レスポンシブデザインを使用する際のコードの形を理解したところで、画面幅を示す、『min-width: 1201px』の部分を解説していきましょう。
まず、『min-width』は『○○以上』という意味で使用されます。今回であれば、『min-width: 1201px』ですので、『1201px以上』という意味で使用されます。
これに先述した『@media screen』の意味を合わせると、『min-width: 1201px』は『1201px以上の画面幅で反映される』ということが理解できると思います。このようにしてデスクトップのレスポンシブデザインを指定していきます。
今回使用した『1201px』という値は私が設定したデスクトップのブレイクポイント、つまりはデスクトップの最小幅であることを表しています。
この数字はデバイスが新しく登場した時やレスポンシブデザインを使う人によって少しずつ違っているものになります。
ブレイクポイントの値については最初は今回紹介した値を指定し、不具合が生じた場合は少しずつ、変えてみることをおススメします。
それでは続いてパソコン版のコードを紹介していきます。
3－2：パソコン版
次にパソコン版を解説していきます。下記のコードを見てください。
@media screen and (min-width: 961px) and (max-width: 1200px) {
/*パソコン版のコードを書く場所*/
/*画面幅は961px以上かつ1200px以下*/
}先述したように『@media screen』の部分はそのまま記述されています。デスクトップ版と違う箇所として、画面幅の指定が変わっています。
デスクトップ版が『min-width: 1201px』となっているのに対し、パソコン版は『min-width: 961px』と『max-width: 1200px』が記述されています。
『min-width: 961px』はデスクトップ版と値が違うだけですので、意味としては『961px以上』というようになります。
『max-width』は『min-width』と対照的に、『○○以下』という意味で使用されます。つまり、『max-width: 1200px』とは『1200px以下』という意味で使用されることになります。
パソコン版ではデスクトップ版と違い、『min-width: 961px』で表される『961px以上』に加え、『max-width: 1200px』で表される『1200px以下』という2つの条件が合わさった時に反映されるようにするためのコードを記述することになります。
整理すると、パソコン版のレスポンシブデザインのコードである『@media screen and (min-width: 961px) and (max-width: 1200px)』は『961px以上、1200px以下の範囲の画面幅で反映される』ということになります。
続いて、タブレット版のコードについて紹介していきます。
3－3：タブレット版
次にタブレット版を解説していきます。下記のコードを見てください。
@media screen and (min-width: 601px) and (max-width: 960px) {
/*タブレット版のコードを書く場所*/
/*画面幅は601px以上かつ960px以下*/
}タブレット版のコードはパソコン版のコードと構成は全く同じで、違いはその値だけになります。
まず、パソコン版が『min-width: 961px』となっているのに対し、タブレット版は『min-width: 601px』と記述されています。
『min-width: 601px』はパソコン版と値が違うだけですので、意味としては『601px以上』というようになります。
次にパソコン版が『max-width: 1200px』となっているのに対し、タブレット版は『max-width: 960px』とが記述されています。
『max-width: 960px』もパソコン版と値が違うだけですので、意味としては『960px以下』というようになります。
これらを合わせると、タブレット版のコードである『@media screen and (min-width: 601px) and (max-width: 960px)』は『601px以上、961px以下の範囲の画面幅で反映される』ということになります。
最後にスマートフォン版のコードについて紹介していきます。
3－4：スマートフォン版
最後にスマートフォン版を解説していきます。下記のコードを見てください。
@media screen and (max-width: 600px) {
/*スマートフォン版のコードを書く場所*/
/*画面幅は600px以下*/
}スマートフォン版はパソコン版やタブレット版のように2つの条件が組み合わさったものではなく、デスクトップ版のように1つの条件で反映されるコードとなります。そのため、今回はデスクトップ版と比較して解説していきます。
デスクトップ版では『min-width: 1201px』と記述されている部分が、スマートフォン版では『max-width: 600px』となっています。
『max-width』の意味はパソコン版やタブレット版で解説したように『○○以下』というように使用されるため、『@media screen and (max-width: 600px)』は『600px以下の画面幅で反映される』ということになります。
ここまではそれぞれのデバイス毎のデザインの記述をする際、必要な範囲を決めるコードを紹介していきました。次からはそれを実際に使用する際に必要な考え方について解説していきます。
4：パソコンパソコンファースト、モバイルファーストを意識して書き方を使い分ける
これまで紹介した記述方法はそのデバイスに対応するレスポンシブデザインを新たに用意するときに使用する書き方ですが、これまでのように新たに追記したデザインではなく、元にあったコードのデザインがあることを忘れてはいませんか。
この書き方を学んだ後は忘れてしまいがちにはなりますが、元のデザインのコードがあった上で新たにレスポンシブデザインを追加します。
そのため、その元のコードをどのデバイス向けのコードにするのかを決めて記述しなければいけません。
その際、必要となる意識がその制作しているサイトが『パソコンファースト』なのか『モバイルファースト』なのかということです。
それぞれの言葉の意味としてはどちらをそのサイトを利用するユーザーが多いかということを考えてみれば分かりやすいでしょう。
パソコンで観る人が多いとされているサイトならば、『パソコンファースト』、スマートフォンなどで観る人が多いとされているサイトならば、『モバイルファースト』であると言えます。
この考えを踏まえた上で、元のコードは『パソコンファースト』のサイトであれば、パソコン用のコードを、『モバイルファースト』のサイトであれば、スマートフォン用のコードを記述して、それぞれにないデバイス毎のデザインを新たに追記するといった方法を取る必要があります。
このように制作しているサイトが『パソコンファースト』なのか『モバイルファースト』なのかを考えながらコードを記述して、レスポンシブデザインを用意していきましょう。
5：【コピペ用】レスポンシブデザインコード例
ここからはレスポンシブデザインの制作する上で必要な『パソコンファースト』と『モバイルファースト』のテンプレコード例を2つ紹介します。
最初は以下に示すコードを使用し、そこから制作するサイトに合わせてカスタマイズしながらレスポンシブデザインを制作してみてください。
5－1：パソコンファースト
@charset "UTF-8";
/*デスクトップ版のコードを書く場所*/
@media screen and (min-width: 961px) and (max-width: 1200px) {
/*パソコン版のコードを書く場所*/
}
@media screen and (min-width: 601px) and (max-width: 960px) {
/*タブレット版のコードを書く場所*/
}
@media screen and (max-width: 960px) {
/*スマートフォン版のコードを書く場所*/
}5－2：モバイルファースト
@charset "UTF-8";
/*スマートフォン版のコードを書く場所*/
@media screen and (min-width: 601px) and (max-width: 960px) {
/*タブレット版のコードを書く場所*/
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
/*パソコン版のコードを書く場所*/
}
@media screen and (min-width: 1201px) {
/*デスクトップ版のコードを書く場所*/
}ここで紹介した2つのテンプレコードをコピペして活用してみてください。
今回はレスポンシブデザインの意味や使い方、コードについて解説していました。
実際にレスポンシブデザインに対応したサイトを制作する際は最後の章で紹介したテンプレコードをコピペして使用してみてください。
その際、コードの意味が分からないことがあったらコードの解説を見直すという形で、この記事を活用してみてください。
