いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon
ilmio2013_bigscreen.jpg

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

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

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

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

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

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

ilmio2013_bigscreen.jpg大解像度(1,800px~)
ilmio2013_middlescreen.jpg中解像度(980px~1,800px)
ilmio2013_smallscreen.jpg小解像度(~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について色々なことを学べたので、良かったかなと感じています^^

当ブログが気になったら…是非RSSにご登録ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です