もはや当たり前になってきたレスポンシブデザイン。
Google検索でもスマホ対応できていないサイトはSEO順位が下がる傾向にある…

ただ、レスポンシブってめっちゃ難しい!&めんどくさい…
レスポンシブという単語すら微妙だった私がどうにか試行錯誤したのでメモ程度にご紹介

そもそもレスポンシブデザイン・コーディングって?

「レスポンシブでコーディングお願いします」といわれても正直「はぁ?」でした(笑)
そういえば私、もともとJava開発とかをしていて電子カルテなんかの業務システムだったのでスマホ対応とか意識の外だったんですよね…

レスポンシブデザインというのは、1つのHTMLに対してPC用とスマホ用のCSSを作成して、デバイスによってCSSを切り替えること…だと私は思っています。
きっと、きちんとした説明はあるのだろうけど、超長い専門書とか寝るのでこのくらいでいいかと…

デザインの基本

レスポンシブを前提にサイトを作成する場合は、デザインから考えなくてはなりません。
ボックスレイアウトだとかなりコーディングしやすい!

コーディングしやすいことがすべてではないかもしれませんが、入門・初心者的にはコーディングしやすいものがいいですよね…
なので、ボックスレイアウトをお勧めします!

CSSを切替

HTMLに対してCSSを2つ作ります。PC版とスマホ版です。
スマホは各社横幅様々なので、なるべくwidthにピクセルを使うのは避けたほうがよいと思います。

CSSを作成したら、ヘッダーでファイルを呼び出します。

今まではこのようにCSSを指定していたと思います。

[html][/html]

レスポンシブデザインではこのように画面幅を見てCSSを切り替えます。

[html] [/html]

[media]の書き方がコツですね。このソースだと画面幅640pxでCSSを切り分けています。
スマホ・タブレット・PCでそれぞれ分ける場合はこの数字を書き換えればよいです。

ViewPortを設定

PC上では横幅を見てCSSを切り替えられていそう!
スマホで描画するとなぜかPC版のCSSしか読み込んでいない…
そんな時はViewPortを確認しましょう。

早速コーディングを始めますが、レスポンシブコーディングをするためにはViewPortの設定が欠かせません。
ViewPort?なんぞや? …はとりあえず置いておきましょう。

これもまたヘッダにこのように記載します。

[html][/html]

これでスマホで最適化した描画が行われます。

まとめると…

レスポンシブ対応するにあたって、おそらく一番大事なのはデザイン!
まちいろはデザイナーとコーダーが別の場合が多く、レスポンシブを考慮しないデザインが渡されると大変です…

まずはお客様と相談の上、レスポンシブにするのか、HTMLをスマホ用に分けるのかから検討しましょう。
レスポンシブで!という場合はデザイナー&コーダーが理解して進めることが、PJ成功のカギだと思います。