ウソみたいに簡単! Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
Post on:2022年7月6日
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。
以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。
TailwindCSS Masonry Layout
by Luca Spezzano
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力的であるため、記事やプロダクトなどの一覧にも使用されています。
Masonryレイアウトで重要なことは、画像を高品質で非常に美しくすることです。
また、このレイアウトは画像が自動的にレスポンシブ対応になるため、デベロッパーやデザイナーにも高く評価されています。個々の画像サイズを調整する必要はなく、レイアウトが画像の異なるサイズに自動的に適応します。
MasonryレイアウトをCSSで実装できるのか
CSSにはMasonryレイアウトを実装できるプロパティの値(masonry
)はありますが、残念ながらブラウザにサポートされていません。
参考: masonryのサポート状況
Masonryのライブラリ
CSSだけでMasonryレイアウトを実装するのは簡単ではないため、デベロッパーはJavaScriptを使用するか、外部ライブラリを使用する必要がありました。
参考: シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
参考: Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
しかしCSSの進化とともに、このMasonryレイアウトをCSSだけで実装する例がネット上に増えてきました。この記事では、Tailwind CSSの基本機能を使用して実装する方法を解説します。
Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
Tailwind CSS(最近よく使用されているCSSフレームワークの一つ)だけで実装されたMasonryレイアウトのデモはあまり見かけないと思います。
まずは、デモをご覧ください。
Masonryレイアウトを実装する基本的なスタイルで、簡単にコピペで利用できます。画像はUnsplashからランダムに使用しています。
See the Pen
TailwindCSS Masonry Layout Blog by Luca (@93lucasp)
on CodePen.
MasonryレイアウトをTailwind CSSで実装するコードは、下記の通りです。
1 2 3 4 5 6 7 8 9 10 |
<div class="columns-2 md:columns-3 lg:columns-4"> <img class="mb-4" src="https://source.unsplash.com/random/1"> <img class="mb-4" src="https://source.unsplash.com/random/2"> <img class="mb-4" src="https://source.unsplash.com/random/3"> <img class="mb-4" src="https://source.unsplash.com/random/4"> <img class="mb-4" src="https://source.unsplash.com/random/5"> <img class="mb-4" src="https://source.unsplash.com/random/6"> <img class="mb-4" src="https://source.unsplash.com/random/7"> .... </div> |
Masonryレイアウトに必要なのは、4種類のセレクタだけ。
1つ目は、ラッパーにさまざまなスクリーンサイズ用にカラム数を定義します。デフォルトで2カラム、768pxで3カラム、1024pxで4カラムになります。
1 |
<div class="columns-2 md:columns-3 lg:columns-4"> |
2つ目は、各画像に.mb-4
で下マージンを与えます。
1 |
<img class="mb-4" src="https://source.unsplash.com/random/1"> |
たった4つのセレクタでMasonryレイアウトを実装できます、すごいですね。
Masonryの基本的なレイアウトとブログ投稿のレイアウトも用意しました。
See the Pen
TailwindCSS Masonry Layout Basic by Luca (@93lucasp)
on CodePen.
ブログ投稿のデモでは、タイトルと著者とタグも表示されます。
See the Pen
TailwindCSS Masonry Layout Blog by Luca (@93lucasp)
on CodePen.
終わりに
レイアウトやエフェクトは外部ライブラリやJavaScriptを使用して「時間を無駄」にするのではなく、CSSで簡単に実装できるのではと考える必要があります。
sponsors