第２回 NHKスタジオパーク

第２回はNHKスタジオパークのサイトです。

NHKスタジオパーク

http://www.nhk.or.jp/studiopark/

www.nhk.or.jp

まずは

パソコンサイズの全体像から

・1200px以上

シンプルなグリッドレイアウトとなっている。

背景は灰色。

白いボックスが綺麗に敷き詰められている。

ナビゲーションは左上、

中央の写真はjQueryのFlexSliderがプラグインで使われている。

レスポンシブルの話では、画面のサイズに合わせて５段階に変化する。

・1200px以上

・1000px以上

・821px以上

・541px以上

・540px以下

レイアウトが変わるときのアニメーションがかわいい。

こちらはメイソンリーのプラグインが使われている。

・1000px以上

一番右の列が小さい方のボックスになる。

・821px以上

さらに小さくなる。

・541px以上

ここでナビゲーションのボックスが上部に移動

もっと小さくなる。

・540px以下

スマホサイズ。

このサイトのお気に入りのポイントは何よりも、

横幅でレイアウトが切り替わるときのボックスの動きがかわいい！

という一言に尽きる。

そしてソースがとてもきれいで美しい。

無駄がなくとてもよく洗練されている。

しかし、今の自分の実力では解読がよくわからないのでもっと勉強していきたい。