はじめに
これまで、Masonryレイアウト(画像を石やレンガを壁に敷き詰めるように配置するグリッドレイアウトのこと)の作成は、JavaScriptを使用したりCSSを工夫したりという方法がありましたが、TailwindCSSを使用して、とても簡単に作成できる、というものを見つけましたので、実際にやってみました。
昔と違って、スマホで縦に写真を撮ることが多い時代ですので、縦長・横長問わず、簡単に、しかもいい感じにしてくれるのは、とてもありがたいです。Masonryレイアウトを使用しているとWEBページが、いい感じにオシャレになると思います。
参考URL
設定たったの2カ所
(1) スクリーンサイズ用が変化したときのカラム数の定義（サンプル１では、columns-2 md:columns-3 lg:columns-4のところ）
(2) 各画像に下マージンの設定（サンプル1では、mb-4となっているところ）
サンプル
サンプル1
sample1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>sample1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<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" />
<img class="mb-4" src="https://source.unsplash.com/random/8" />
<img class="mb-4" src="https://source.unsplash.com/random/10" />
<img class="mb-4" src="https://source.unsplash.com/random/11" />
<img class="mb-4" src="https://source.unsplash.com/random/12" />
<img class="mb-4" src="https://source.unsplash.com/random/13" />
<img class="mb-4" src="https://source.unsplash.com/random/14" />
<img class="mb-4" src="https://source.unsplash.com/random/15" />
<img class="mb-4" src="https://source.unsplash.com/random/16" />
<img class="mb-4" src="https://source.unsplash.com/random/17" />
<img class="mb-4" src="https://source.unsplash.com/random/18" />
<img class="mb-4" src="https://source.unsplash.com/random/19" />
<img class="mb-4" src="https://source.unsplash.com/random/20" />
</div>
</body>
</html>
サンプル2
自分が持っている写真で試してみる。あわせて参考URLを見ながら、タイトルやタグなどをいれてみる。写真の上のいい感じのところに、タイトルやタグなどが表示される(簡単)
sample2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>sample2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="columns-1 md:columns-3 lg:columns-4">
<div class="relative mb-4">
<img class="w-full rounded-md" src="img2/001.JPG">
<div class="test__body absolute inset-0 p-8 text-white flex flex-col">
<div class="relative">
<a class="test__link absolute inset-0" target="_blank" href="/"></a>
<h1 class="test__title text-3xl font-bold mb-3">Title post</h1>
<p class="test__author font-sm font-light">Author</p>
</div>
<div class="mt-auto">
<span class="test__tag bg-white bg-opacity-60 py-1 px-4 rounded-md text-black">#tag</span>
</div>
</div>
</div>
<div class="relative mb-4">
<img class="w-full rounded-md" src="img2/002.JPG">
<div class="test__body absolute inset-0 p-8 text-white flex flex-col">
<div class="relative">
<a class="test__link absolute inset-0" target="_blank" href="/"></a>
<h1 class="test__title text-3xl font-bold mb-3">Title post</h1>
<p class="test__author font-sm font-light">Author</p>
</div>
<div class="mt-auto">
<span class="test__tag bg-white bg-opacity-60 py-1 px-4 rounded-md text-black">#tag</span>
</div>
</div>
</div>
<!-- 以下、省略 -->
</div>
</body>
</html>
サンプル3
以下の投稿で、bootstrapのimage-overlaysを使用していましたが、サンプル2を参考にTailwindCSSで置き換えてみる。先に使用していたBootstrap(V5)でもそれほど難しくないですが、より簡単で速いです。
まとめ
- TailwindCSSのみでMasonryレイアウトを作成する方法を知りましたので、試してみました。
- CSSフレームワークに便利すぎて頼りっきりです。
- ブログやウェブページを写真を使用してオシャレに見せたいときは、検討の価値があると思います。
参考URL