なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!!
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」!
昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読!5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する!これは本当にすごい!!
まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。
少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。
さらに狭めてみると、右のサイドバーが完全に無くなった。
さらに狭めると今度は左のサイドバーが消えた。
ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。
これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さんも是非下記リンクをブラウザで開いてウィンドウの伸縮をしながら要素の感動的な動きを楽しむべし!!
NHKスタジオパーク
Animating with CSS Transitions · jQuery Masonry
これを使って何かページ作ってみたいね!今後、レスポンシブ・デザインのウェブページを実装する機会がある人は、試してみてはいかがだろうか!
![nhk_studio_park1.png NHKスタジオパーク](https://gori.me/wp-content/uploads/2012/10/nhk_studio_park1.png)
![nhk_studio_park2.png NHKスタジオパーク](https://gori.me/wp-content/uploads/2012/10/nhk_studio_park2.png)
![nhk_studio_park3.png NHKスタジオパーク](https://gori.me/wp-content/uploads/2012/10/nhk_studio_park3.png)
![nhk_studio_park4.png NHKスタジオパーク](https://gori.me/wp-content/uploads/2012/10/nhk_studio_park4.png)
![nhk_studio_park5.png NHKスタジオパーク](https://gori.me/wp-content/uploads/2012/10/nhk_studio_park5.png)
これスゴイとか言ってる人達は、もしかして Firefox の WebDeveloper 機能拡張の「Resize」メニューの「View Responsive Layouts」とか見たら鼻血とか出しちゃうんだろうか?