このサイトのデザインをレスポンシブっぽくしてみました。

レスポンシブなデザインとはなんぞや

レスポンシブウェブデザインは、最近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タグに追記します。