Pinterestから人気が出始めたカード型UIは、ここ1, 2年の間に日本でも多くのWebサイトで見かけるようになりました。BootstrapやMaterial Designにも採用されており、レスポンシブデザインとも非常に相性がよいUIコンポーネントです。 そんなカード型UIのレイアウトやデザイン、アニメーションを伴ったインタラクションの実装アイデアを紹介します。 各リンク先ではHTMLやCSS、使用していればJavaScriptも編集・ダウンロードできます。 Recipe Card インタラクションの一部をアニメーションにしてみました。他にも写真がズームしたり、タブ(機能は未)などが用意されており、省スペースに多くの情報を掲載することができます。
![レスポンシブと相性がいいカード型UIのレイアウトやデザインの実装アイデアのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/afd9990b346b6e35e47d5f656428cccbeeb16ea9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016060803-01.gif)