いまどきのWebサイトでよく見かける、タイルやカードを使ったレイアウト。ボタンをクリックするとアニメーションしながらタイルやカードの絞り込みができるコードの紹介です。専用のjQueryプラグインもありますが、CSS3とjQueryでも簡単に作れるようです。 先日、絞り込みと並び替え(フィルタリングとソート)表示によく使われるjQueryプラグイン、MixItUpの記事を書きました。今回は、jQueryとCSSアニメーションを使って、シンプルに絞り込みができるコンポーネントを構築する方法について説明します。 それではさっそく始めましょう! HTMLの設定 最初にHTMLの設定です。次のコードを見てください。 <div class="cta filter"> <a class="all active" data-filter="all" href="#" role="button">Show