このサイトのデザインをレスポンシブっぽくしてみました。
レスポンシブなデザインとはなんぞや
レスポンシブウェブデザインは、最近Webデザイン界隈で聞くバズワードです。
バズワードなのでそのものずばりの言葉で検索しても厳密な定義はなかなか見つかりませんが、乱暴に言ってしまうと「一枚のCSSでスマホ・タブレット・PCなどの多種多様なデバイスで崩れずに表示できるデザイン」のことであるようです。
厳密には、「デザイン」ですので、伝えたい意味があってこその見せ方だと思われます。よって、「どんなデバイスでも適切な意味を伝えることができるデザイン」がより正確でしょうか。僕はデザイナーではないのでこれ以上は言及できません。
とりあえず、非デザイナーで趣味サイトを運営する立場からすると、わざわざ複数デバイス用にCSSを用意することなく、複数デバイスでそれっぽく見せることができるので、お手軽ではあります。
今回は、レスポンシブウェブデザインのテクニックを借りて、このサイトのCSSを多種多様なデバイスで見ても崩れず、それなりに読みやすいということを比較的楽に達成することを目標にしました。
やったこと
metaタグを指定した
レスポンシブウェブデザインで検索すると、どこも以下のようなmetaタグを記述するように書いています。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
乱暴な表現だと「おまじない」なわけですが、これはスマホなどの端末にどのように見せるかを指定する記述のようです。
スマートフォンなどのブラウザでは見やすさのためにCSSでの1px=液晶の1画素では表示しません。 その時に、このviewportの値を見て、1pxをどのくらいの大きさで表示するかを決めます。
上の記述だと、幅をdevice-width(デバイスごとに持っている値で、例えばiPhoneだと320pxらしい)で、ページ表示時の倍率を等倍にし、それ以上の拡大を許さないということになるようです。この記述により、ページはiPhone上ではPCブラウザで幅を320pxにした時のように表示されるようになります。
とりあえず何も考えずにmetaタグに追記します。
思考停止 max-width:100%
とりあえず、元のスタイルで幅をpx指定していた箇所にmax-wifth:100%を与えました。 これにより、幅が小さくてもともとと指定していたサイズで表示できないときは自動的に現在の最大の幅に要素のサイズが変更されます。 これだけでも大体の要素はレスポンシブっぽくなります。
@mediaでサイドバー消したりヘッダが縮むようにしたり
@media規則を指定し、max-width:100%を指定するだけでは不十分なところを補ってやります。 このサイトでは、幅が狭い時にサイドバーを消したり、ロゴを小さいものに変更したりといったことを行なっています。
その他細かい調整
あとは、marginやpaddingを%指定にしてどのサイズでもそこそこの見栄えになるよう調整したりしました。
まとめ
ちゃんとしたデザインには全然及びませんが、そこまでコストを掛けずにモバイル端末でもそれなりに表示されるデザインに出来ました。 果たしてこれをレスポンシブウェブデザインと呼んでいいのか疑問ではありますが、個人サイトでモバイル端末対応するぶんには十分な措置であると思います。
気になる方はブラウザの幅を色々変えてみてください。