当サイトをスマホで見るとかなり悲惨な感じだったので、CSSとHTMLをちょっとだけ調整してみた。私はCSSが苦手で、当サイトのCSSをいじるのは、おそらく数年ぶりである。

「レスポンシブWebデザイン」とか、CSS3の「メディアクエリ（Media Queries）」とか、以前からたびたび聞いてはいたのだが、自分で書いたことはなかった（「レスポンシブWebデザイン」や「メディアクエリ」については、末尾の「関連」を参照）。

メディアクエリ、ちゃんと自分で書いてみると、じつにおもしろい。当サイトはもともと、１カラムのみの単純なレイアウトなので、メディアクエリを使っても、それほど面白みはない。しかし、１カラムのみのレイアウトであっても、ウィンドウ幅に応じてスタイルを切り替えられるのは、やはりすごく便利だ。

いまのところやっているのは、ウィンドウ幅に応じて、カラムの幅をどうするかを変える、ということだけだ。次のような３パターンで指定している。

１）ウィンドウ幅が480px以下のとき、カラム幅は85%
２）ウィンドウ幅が481px以上、800px以下のとき、カラム幅は75%
３）ウィンドウ幅が801px以上のとき、カラム幅は600px固定

これに加えて、１）のウィンドウ幅が480px以下のときは、タイトル画像を「モジログ」だけにして、「旧「Zopeジャンキー日記」」というのを出さないようにした（PCで見ている人は、ウィンドウ幅をじょじょに小さくしていくと、その画像が途中で消えるはず）。

まだ知識もないので、ひとまずこれくらいなのだが、これでも一応「レスポンシブWebデザイン」だろう。小さな一歩だが、私にとっては意義深い一歩である。

こんなダイナミックなスタイル指定を、いまはJavaScriptを使わなくても、CSSだけでかんたんにできるようになったのだ。CSS3のメディアクエリ、すばらしい。


関連：
ASCII.jp - レスポンシブWebデザインとは（2012年06月04日）
http://ascii.jp/elem/000/000/697/697463/
ASCII.jp - メディアクエリーの設定とグリッドデザインの導入（2012年07月09日）
http://ascii.jp/elem/000/000/700/700139/