WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

ご参考までに。。。

コメントを残す

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