「フォルダ内の画像をサムネイル化してHTMLギャラリーを作る」仕組みに、タグでフィルタ表示を加えます。これは JavaScript を少し組み合わせると実現できます。
1. 基本の考え方
- 各画像に「タグ情報」を持たせる（例: 旅行, 家族, 食べ物）。
- HTMLの要素に
data-tags="旅行 家族"のようにタグを埋め込む。 - JavaScriptでボタンをクリックしたときに、該当タグを持つ要素だけを表示する。
2. サンプルHTML（タグ付きカード）
<div class="card" data-tags="旅行 家族">
<a href="images/trip1.jpg" target="_blank">
<img class="thumb" src="thumbs/trip1_thumb.jpg" alt="旅行1">
<div class="meta">旅行1</div>
</a>
</div>
<div class="card" data-tags="食べ物">
<a href="images/food1.jpg" target="_blank">
<img class="thumb" src="thumbs/food1_thumb.jpg" alt="食べ物1">
<div class="meta">食べ物1</div>
</a>
</div>
👉 data-tags 属性にスペース区切りでタグを入れるのがポイント。
3. フィルタ用ボタン
<div id="filters">
<button data-filter="all">すべて</button>
<button data-filter="旅行">旅行</button>
<button data-filter="家族">家族</button>
<button data-filter="食べ物">食べ物</button>
</div>
4. JavaScriptでフィルタ処理
<script>
document.querySelectorAll('#filters button').forEach(btn => {
btn.addEventListener('click', () => {
const filter = btn.getAttribute('data-filter');
document.querySelectorAll('.card').forEach(card => {
const tags = card.getAttribute('data-tags').split(" ");
if (filter === "all" || tags.includes(filter)) {
card.style.display = "";
} else {
card.style.display = "none";
}
});
});
});
</script>
👉 ボタンを押すと、該当タグを持つ .card だけが表示されます。
5. 実践的な拡張
- 複数タグ選択：チェックボックスにして「旅行 かつ 家族」などの条件に対応。
- 検索ボックス：入力した文字列でタグを部分一致検索。
- 自動タグ生成：EXIFのカメラ機種や撮影地をタグにして分類。
✅ まとめ
data-tags属性にタグを埋め込む- JavaScriptでタグを判定して表示/非表示を切り替える
- ボタンや検索UIを組み合わせれば柔軟なフィルタリングが可能
