レスポンシブサイトの基本設定！？メディアクエリでブレイクポイントを作って簡単スマホ対応！

久しぶりにWEBデザインの記事。
WEBデザイン関連で書き溜めていた記事が長文になってしまったので、結局一つ一つわけて書くことにしました。笑


今日は今ではすっかり当たり前となった、レスポンシブWEBデザインに関してです。
（なんだか今更ですけど・・・＾＾；）

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

ウェブページデザインの手法の一。スマートホン、タブレット型端末、パソコンなど複数の端末に対し、単一のURL（HTML）で対応するもの。ブラウザの幅で端末を判断し、表示を切り替える。レスポンシブデザイン。RWD。
引用：responsive web design（レスポンシブウェブデザイン）の意味 - goo国語辞書

一つのhtmlだけで各デバイスサイズに対応させる

従来、スマートフォン用にhtmlを作成し、基本的にPCサイトにアクセスしてきたスマホユーザーをスマートフォン用のサイトに飛ばす、もしくはリンクで切り替える、というのが主流でした。
しかし、レスポンシブWEBデザインでは、PC用・スマホ用にhtmlを用意するのではなく、一つのhtmlをcssで制御して、PCにもスマホにも対応させて表示を調整する手法を使います。

スマホ対応の背景

私がWEBデザインをはじめたのは2014年なのですが、その頃にはまだ出始めくらいでした…。
私は就活で採用サイトは基本的にPCでしか閲覧できず、リクナビはかろうじてアプリがあったけどマイナビはPC表示でしか見れず苦労した覚えがあります。
見たかった会社のサイトが全てフラッシュでできていて、iPhoneでは閲覧できなかったり。
お客さんのサイトでも殆どがスマホ対応しておらず、2015年頃には上層部にも「要スマホ対応」という認識が生まれたのか、リニューアルやスマホ対応化のお仕事が増えて、いつしかこんなに当たり前に…。


今じゃスマホ対応されていないサイトのほうが珍しいですよね。
むしろ、モバイルファーストで、スマホ前提で作られているサイトばかりのような気もします。
LPなんかは良い例ですね。完全にスマホ用のサイトばかりです。

簡単な見分け方

このサイトレスポンシブかしら、なんて思ったときに、私はブラウザウィンドウのサイズを横に縮めてみます。
そうすると、ある一定のウィンドウの大きさで見栄えが変わることがあります。
それは恐らくCSSで、ある表示サイズのときにはこのスタイルにする、という指示が出されているのだと思います＾＾
ぜひいろんなサイトで試してみてください。
PCとスマホでこんな表示に変えているのかと勉強になります。

ブレイクポイントとは

先程「簡単な見分け方」で「ある一定のウィンドウの大きさで見栄えが変わる」としたのですが、これがいわゆる「ブレイクポイント」とされています。
例えばPC／タブレット／スマホで大体の横幅が決まっていますよね。
それを起点（ブレイクポイント）として、CSSの表示を変えるのです。


それを可能にするのが、CSSの『メディアクエリ』です。

メディアクエリとは

メディアクエリとは、Webページの見栄えを記述するCSSのバージョン3で追加された仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能。
「表示サイズの幅がこれ以上ならこのスタイルを適用」「画面が横長ならこのスタイルを適用」というように、一つのスタイルシートで複数の画面環境に対応することができる。
引用：メディアクエリとは - IT用語辞典

こちらでわかりやすく解説されてますね！


レスポンシブでよく使われるのはこの「表示サイズの幅がこれ以上ならこのスタイルを適用」というメディアクエリです。

メディアクエリの使い方

こんな感じで、CSS内に記述します！

@media screen and (max-width: 320px) {}

詳しい使い方は以下でご紹介しますね。

レスポンシブデザインに挑戦する

基本的にPCを基準に作っていき、スマホだけ表示を変えたい部分にだけスマホ＆タブレット用のCSSを対応させていきます。


（PCファーストのほうが検証しやすいからそうしているだけで、モバイルファーストで作っても良いと思いますが…今回はいつものやり方でご紹介させてください！）

@media screenでブレイクポイントを作ろう

私は基本として１つのブレイクポイントを作っておいています。

基本のブレイクポイント

基本のブレイクポイントは、768px。
だいたいタブレット以下のサイズを補っている感じですね。
これ一つをブレイクポイントとするだけで、大体のデバイスサイズを補えます。


この前に、PC用のCSSを書いていきます。
PC用で書いていった中で、スマホ用に変えたい部分だけ、mediascreenの中にコードを書いていけば良いのです。


つまりこんな感じです▼

/*PC用の表示（769px以上の画面の場合）*/
.ex{
    width:100%;
    font-size:18px;
    padding:20px;
    border:1px solid #ccc;
    background-color:#eee;
 }
@media screen and (max-width: 768px) {
　/*この中に768px以下のデバイスで表示を変えたい部分のCSSを記入していく。*/
　.ex{
    width:50%;
    font-size:16px;
    padding:5px;
  }
}

わかりますでしょうか・・・。
例えば、PCの時にはフォントサイズは18pxで表示させているけど、タブレット＆スマホの時には少し小さく16pxで表示させたい。
など、上記ではそんな指示を出しています。


しかし、borderとbackground-colorに関してはPC用の方しか書いていませんね。
これは、タブレット＆スマホの時でも同様の表示で構わないからです。


つまり、タブレット＆スマホの時に変えたい部分だけ、@mediascreenの中に書いていけばOK。

CSSの書き方は管理のし易いやり方で

今まではスマホ用のCSSを作って、このブレイクポイントに当てはまるCSSを一気に書いていたのですが・・・
前に上司が私の代わりにコーディングをしてくれたときに、CSSの各セクションごとにブレイクポイントを書いていて、管理がしやすそうだったので、それからはずっとこのやり方です。


スマホ・PCでcssファイルをわけるよりも、例えばabout.css・shop.cssでファイルをわけて、この中にPCとスマホどちらの記述もしていたほうが管理がしやすいなと感じたのです。

２つめのブレイクポイント

ところどころで、iPhone7、iPhone6もしくはiPhone5以下のデバイスをフォローしていきます。

@media screen and (max-width: 480px) {
　この中に480px以下のデバイスで表示を変えたい部分のCSSを記入していく。
}

私はだいたいでいっか！と480pxにしちゃっています。（おい〜）
が、iPhone5以下の表示だけ変えたい場合のブレイクポイントは「320px」でも良いですね。

まとめ

１つのHTMLだけでどのデバイスにも合わせて作るとなるともちろん難しいことも出てきますが、作業としては基本的にメディアクエリで設定したブレイクポイントに合わせてスタイルを作っていくだけなので、要領としては特別なことはなくできてしまいます！
レスポンシブ前提でサイトをデザインしていくのもコツを掴んでくると楽しいです！
ぜひお試しくださいね。