ここ数年でWebサイトを制作するにあたってほぼ必須になっているのがレスポンシブWebデザインというものになります。これはブラウザのサイズによってサイトのデザインを変える手法のことをいうのですが、この手法はスマートフォンの普及と共に出てきたようなもので、スマートフォンやタブレット端末でサイトを見た人がストレスなく見れるようになるものです。ちなみに自分のこのサイトもレスポンシブWebデザインを採用していたりします！
レスポンシブWebデザインの利点としてはサイトのURLを変えずにデザインを変えることができるというものがあります。これをすることによってサイトのURLがPC用・スマートフォン用で別々なサイトよりURLが1つでもレスポンシブでデザインを変えれるのでSEO的にかなり有利というものがあり、そういった面でもオススメなものとなります！
それでは実際にどうやってレスポンシブWebデザインを使うかというと、メディアクエリというものを使います！書き方としては
- HTMLソースに記述する方法
- CSSで指定する方法
がありますが、今回はCSSで指定する方法を紹介したいと思います。
昨年iPhone 6が発売されたことでスマートフォンの画面サイズが667pxになったので、今回は画面サイズが667pxのスマートフォン用のCSSを紹介します。書き方としては
@media screen and(max-width:667px) {
ここに667px用のCSSを記述
}
になります。この
@media screen and(max-width:～px)
がメディアクエリというものになります。
こう記述することで、カッコ内に記述したCSSがその指定した画面サイズに対応し、レスポンシブ対応してくれるという。
が、ここで重要になってくることがあります！
メディアクエリをCSSに記述し、ローカル上でブラウザで確認してもちゃんとブラウザサイズによってレイアウトが変わってくれる。よし、実際にサーバーにアップしてみよう！と思ってサーバーにアップしてスマートフォンでサイトを確認してみると…あれ、スマートフォンで見てもPC用のレイアウトで表示されてしまう…なんてことがあります。実はこれ、HTMLソースの方に以下の記述をしないとそれぞれの媒体で確認した時にレイアウトを変更してくれないという落とし穴があったりします。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
これをHTMLソースのmetaタグのところに記述してあげないと、スマートフォンで見た時でもPC用レイアウトでサイトが表示されてしまうので、必ず上のソースを記述することを忘れないようにしましょう！
これをうまく使えば、例えばスマートフォンの縦向き用・横向き用でデザインを分けることだってできますし、デザインの幅がもっと広がるなぁ、と思ったりします(^-^)
