スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

レスポンシブwebデザインでスマホもPCも表示させよう

ウェブサイトをスマホ用とPC用をそれぞれ用意することなく一つのサイトで対応した表示で見れるレスポンシブwebデザイン。
ブラウザの横幅によって、CSSで一列、二列、三列を振り分けています。

こちらが参考なるお勧めサイトです。
http://adobe-html5.jp/
サンプルソースもあり、わかりやすいです。このサイト自体がレスポンシブになっていて、ブラウザの横幅を変えていくと表示が変わって見えて確かめられます。
デバイスごとにサイト作るよりも少ない工程で汎用性をもたせてサイト制作が出来てとても良いと思います。
最近のスマホは小さい画面にもかかわらず解像度が上がってきてるので、機種によっては二列になって映ってしまったり調整が必要になるかもしれません。