フォントのフィルタリングボタンを改善

index.js

@@ -275,7 +275,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                 button.innerHTML = `
                     <input type="checkbox" class="btn-check" name="fontFilter" id="filter${tag}" value="${tag}">
                     <label class="btn btn-outline-primary" for="filter${tag}">
-                        ${displayName} <span class="tag-count">(${count})</span>
+                        ${displayName} <span class="tag-count" data-tag="${tag}">(${count})</span>
                     </label>
                 `;
                 langButtonGroup.appendChild(button);
@@ -301,7 +301,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                 button.innerHTML = `
                     <input type="checkbox" class="btn-check" name="fontFilter" id="filter${tag}" value="${tag}">
                     <label class="btn btn-outline-primary" for="filter${tag}">
-                        ${displayName} <span class="tag-count">(${count})</span>
+                        ${displayName} <span class="tag-count" data-tag="${tag}">(${count})</span>
                     </label>
                 `;
                 otherButtonGroup.appendChild(button);
@@ -312,6 +312,53 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     }
 
+    // 選択されたフィルターに基づいてタグカウントを更新
+    function updateTagCounts() {
+        const selectedFilters = Array.from(fontTagFilter.querySelectorAll('input[type="checkbox"]:checked'))
+            .map(checkbox => checkbox.value);
+
+        // 選択されたフィルターがない場合は、全体の数を表示し、すべてのボタンを表示
+        if (selectedFilters.length === 0) {
+            const totalCounts = getTagsWithCount();
+            totalCounts.forEach((count, tag) => {
+                const wrapper = document.querySelector(`#filter${tag}`).closest('.btn-check-wrapper');
+                wrapper.style.display = 'inline-block';
+                const countElement = document.querySelector(`.tag-count[data-tag="${tag}"]`);
+                if (countElement) {
+                    countElement.textContent = `(${count})`;
+                }
+            });
+            return;
+        }
+
+        // 各タグについて、現在の選択と組み合わせた場合の数を計算
+        const allTags = [...new Set(fontTags.flatMap(font => font.tags))];
+        allTags.forEach(tag => {
+            const countElement = document.querySelector(`.tag-count[data-tag="${tag}"]`);
+            const wrapper = document.querySelector(`#filter${tag}`).closest('.btn-check-wrapper');
+            
+            if (countElement && wrapper) {
+                // このタグが既に選択されている場合は、他の選択されたタグとの組み合わせ数を表示
+                const filtersToCheck = selectedFilters.includes(tag) 
+                    ? selectedFilters 
+                    : [...selectedFilters, tag];
+                
+                const count = fontTags.filter(font => 
+                    filtersToCheck.every(filter => font.tags.includes(filter))
+                ).length;
+
+                countElement.textContent = `(${count})`;
+
+                // カウントが0の場合、かつ現在選択されていないタグの場合は非表示
+                if (count === 0 && !selectedFilters.includes(tag)) {
+                    wrapper.style.display = 'none';
+                } else {
+                    wrapper.style.display = 'inline-block';
+                }
+            }
+        });
+    }
+
     // フォントオプションの初期化と絞り込み機能の実装
     function initializeFontOptions() {
         // 現在選択されているフォントを保持
@@ -353,6 +400,9 @@ document.addEventListener('DOMContentLoaded', async () => {
             fontSelect.appendChild(option);
         });
 
+        // タグカウントを更新
+        updateTagCounts();
+
         // 選択されたフォントを読み込む
         return loadGoogleFont(fontSelect.value);
     }

styles.css

@@ -128,8 +128,9 @@
 
 #fontTagFilter {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
 }
 
 #fontTagFilter .btn {
@@ -146,6 +147,7 @@
 
 .filter-group {
     margin-bottom: 1rem;
+    width: 100%;
 }
 
 .filter-group-label {