2年くらい前の記事になりますが「jQueryでFloatしたボックスを整列させる「jQuery Masonry」」と題して、
CSSでFloatを使って回り込みさせたブロック要素に対して、
要素の高さ(Height)がバラバラだったとしてもレイアウトが崩れないように
整理・調節してくれるjQueryプラグイン「jQuery Masonry」を紹介しました。

今やこういったグリッドレイアウトはPCサイトの見せ方だけに留まらず、
同時にスマートフォン用のサイト設計をする際にも、
とても効果的な組み方になってきています。

そんな「jQuery Masonry」を使ってグリッドレイアウトを実現している
Webサイトを集めたエントリー「25 Powerful Examples of Masonry jQuery Web Design」が
色々と参考になりそうだったので紹介してみます。

25 Powerful Examples of Masonry jQuery Web Design


25 Powerful Examples of Masonry jQuery Web Design

通常のWebサイトとして、全体のコンテンツをまとめているものから
ギャラリー的コンテンツやポートフォリオのようなものなどまで様々。

いくつか挙げてみると、、、

Chromeography: chrome badges, emblems, logos on cars, cameras, appliances


Chromeography: chrome badges, emblems, logos on cars, cameras, appliances

Rather Splendid


Rather Splendid

Inspire Well


Inspire Well

どのサイトも、ブラウザのウィンドウサイズを伸ばしたり縮めたり変えることで、
そのサイズにあったバランスで、ボックス要素がレイアウトされています。

PCサイトを「jQuery Masonry」を使ってグリッドレイアウト化しておけば
そのままスマートフォンサイトとして最適なサイズで表示させることも出来るので
全体の構成方法など、いろいろ覚えておくと、この先活用できるかと思っています。

念のため「jQuery Masonry」を再度紹介。。。

jQuery Masonry


jQuery Masonry

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQuery Masonryを使ってグリッドレイアウトを実現しているWebサイト集「25 Powerful Examples of Masonry jQuery Web Design」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner