CSSでレスポンシブ対応させるにはCSSでレスポンシブ対応させるには2015.02.22CSSレスポンシブここ数年でWebサイトを制作するにあたってほぼ必須になっているのがレスポンシブWebデザインというものになります。これはブラウザのサイズによってサイトのデザインを変える手法のことをいうのですが、この手法はスマートフォンの普及と共に出てきたようなもので、スマートフォンやタブレット端末でサイトを見た人がストレスなく見れるようになるものです。ちなみに自分のこのサイトもレスポンシブWebデザインを採用していたりします!レスポンシブWebデザインの利点としてはサイトのURLを変えずにデザインを変えることができるというものがあります。これをすることによってサイトのURLがPC用・スマートフォン用で別々なサイトよりURLが1つでもレスポンシブでデザインを変えれるのでSEO的にかなり有利というものがあり、そういった面でもオススメなものとなります!それでは実際にどうやってレスポンシブWebデザインを使うかというと、メディアクエリというものを使います!書き方としてはHTMLソースに記述する方法CSSで指定する方法がありますが、今回はCSSで指定する方法を紹介したいと思います。6が発売されたことでスマートフォンの画面サイズが667pxになったので、今回は画面サイズが667pxのスマートフォン用のCSSを紹介します。ここに667px用のCSSを記述}になります。and(max-width:~px)がメディアクエリというものになります。記述することで、カッコ内に記述したCSSがその指定した画面サイズに対応し、レスポンシブ対応してくれるという。ここで重要になってくることがあります!メディアクエリをCSSに記述し、ローカル上でブラウザで確認してもちゃんとブラウザサイズによってレイアウトが変わってくれる。よし、実際にサーバーにアップしてみよう!と思ってサーバーにアップしてスマートフォンでサイトを確認してみると...あれ、スマートフォンで見てもPC用のレイアウトで表示されてしまう...なんてことがあります。実はこれ、HTMLソースの方に以下の記述をしないとそれぞれの媒体で確認した時にレイアウトを変更してくれないという落とし穴があったりします。