皆様こんにちは。とろあ( @tohroa )です。

一周年を迎えてから10日も経ってしまいましたが、PC用のブログテーマを更新しました！

無い知恵を絞って、新しいことにも挑戦してみているので、気にしてみてもらえると楽しんで頂けるかも知れません。

PC用レスポンシブデザイン？

今回、PC用のブログテーマについてレスポンシブ的な配置に挑戦しています。

本来のレスポンシブwebデザインとは、ちょっと考え方が違うかも知れませんが、ご覧頂いているPCの解像度によって配置が変わるように仕掛けを施してみました。

大解像度(1,800px～)

中解像度(980px～1,800px)

小解像度(～980px)

どうしてレスポンシブにしたのか？

最初は「jQueryを使って何か新しい仕掛けが出来ないかな？」という思いがありました。

ちょうどその頃 MacBook Pro に興味があり、MacBook Pro の画面解像度について調べていると、最大で 2,880px x 1,800px となることを知り、更に、僕が自宅で使用しているWindows PCの画面解像度は 1,920px x 1,080pxでした。

MacBook Proの場合、Retinaに最適化して使用する場合、フル解像度で使用されるかはともかく…

「解像度によって配置を変えてみよう」と思いつき、挑戦してみることにしました。

境界線が1,800pxとなったのは、各要素のサイズを検討していった結果です。

ちょっと気を使ったのが、980pxでの配置替えをCSSのmediaクエリで行い、1,800pxでの配置替えをjQuery(JavaScript)で行うようにしています。

1,800px以上での表示は、jQueryを多様しているので、JavaScript無効時に表示が変にならないようにしたつもりです。

ウィンドウサイズを変えるたびに表示が変わってしまうのが、かえって見づらくなる恐れなどもあるかも知れませんが…

やってみようと思ったことを採用して、ダメだったら修正して行こうと思っています。

今回、表示切り替えを採用するに当たっても、HTML/CSS/jQueryについて色々なことを学べたので、良かったかなと感じています^^