先日公開したアンテナサイト「ソフ速」。アクセス解析を見てみると、どうやらスマホユーザーが半数を超えてる。これはまずい、レスポンシブな感じにしないと...。
ということで昨日2-3時間ほどかけてどうにかしました。
想像よりも簡単でした(そう思うのはひとえにドットインストールのおかげなんですが)。ちょっとだけ書くと、レスポンシブデザインの肝はたぶんこの記述です。
@media all and (min-width: 480px) { /*タブレットのとき*/ } @media all and (min-width: 768px) { /*PCのとき*/ }
メディアクエリーって呼ぶらしいですね。
「どのメディア(ウェブなのか印刷なのか)でのレイアウト?」
「解像度はいくつ?」
ってところを設定するというものです。
このメディアクエリーのおかげで「PCのときはこう、タブレットのときはこう」といった具合にCSSを上書きできるみたいです(レッスンではスマホのレイアウトをデフォルトとしてタブレット、PC、という順に上書きしています)。
ソフ速の方はひとまずスマホ対応できたので良い気分ですが、レスポンシブデザインてどうやらそれだけじゃないみたいなので、少しずつ勉強してサイトに反映できたらなと思っています。