Pinterestで表示で一躍人気になったのがMasonryと言われる表示です。幅は固定しつつ、高さをずらして表示することで変化による印象付けを与えられます。女性向けのメディア、写真を多用するサイトで使われています。 多くがJavaScriptを使って表現するのですが、今回紹介するdrivewayはCSSだけで実現されています。

drivewayの使い方

デモの表示です。JavaScriptはオフになっています。

CSS3のアニメーションを使うことでフリップしたり、マウスフォーカスを実現しています。

drivewayが便利なのはJavaScriptがオフであっても利用できることです。もちろん、JavaScriptが自動的に行っていた部分は調整する必要があるかも知れません（画像の高さを予め割り当てるなど）。しかしdrivewayの方がデザイナーの方にとってはカスタマイズしやすく、使いやすいのではないでしょうか。

drivewayはCSS3製のオープンソース・ソフトウェア（MIT License）です。

driveway: pure CSS masonry layout aid jh3y/driveway: pure CSS masonry layouts