- Map /* --- 地図の基本レイアウト --- */ .leaflet-wrap { position: relative; width: 100%; max-width: 100%; margin-bottom: 10px; z-index: 1; } #map { width: 100%; height: 600px; background: #f0f0f0; border: 1px solid #ccc; }</p> <p>/* --- マップ外下部のフィルター（アコーディオン） --- */ .map-filter-container { margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; overflow: hidden; } .filter-header { background: #f9f9f9; padding: 12px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } .filter-header:hover { background: #f0f0f0; } .filter-header h4 { margin: 0; font-size: 15px; color: #333; } .filter-toggle-icon::after { content: '▼'; font-size: 12px; color: #777; } .filter-header.is-open .filter-toggle-icon::after { content: '▲'; }</p> <p>.filter-content { display: none; /* 初期は閉じる */ padding: 15px; } .menu_rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .menu_row { display: flex; align-items: center; gap: 8px; font-size: 14px; } .menu_row input { cursor: pointer; width: 16px; height: 16px; } .menu_row label { cursor: pointer; user-select: none; }</p> <p>/* マーカーラベル（ツールチップ）のスタイル */ .leaflet-tooltip-own { background: rgba(255, 255, 255, 0.9); border: 1px solid #333; border-radius: 4px; padding: 1px 4px; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }</p> <p>/* ポップアップ内のカテゴリラベル用スタイル */ .popup-cat-label { display: inline-block; background: #e1f5fe; color: #0288d1; border: 1px solid #b3e5fc; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-bottom: 10px; } 🔍Display Filter
- Container Boss Gesso
- GO! GO! Squid Surfing
- Shine Sprite in the big cage
- The Secret of Rico Tower
- The Return of Boss Gesso
- Red Coins in the Waterway
- Shadow Mario Again
- Yoshi The Great Fruit Campaign
- Secret
- Top
Map /* --- 地図の基本レイアウト --- */ .leaflet-wrap { position: relative; width: 100%; max-width: 100%; margin-bottom: 10px; z-index: 1; } #map { width: 100%; height: 600px; background: #f0f0f0; border: 1px solid #ccc; }</p> <p>/* --- マップ外下部のフィルター（アコーディオン） --- */ .map-filter-container { margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; overflow: hidden; } .filter-header { background: #f9f9f9; padding: 12px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } .filter-header:hover { background: #f0f0f0; } .filter-header h4 { margin: 0; font-size: 15px; color: #333; } .filter-toggle-icon::after { content: '▼'; font-size: 12px; color: #777; } .filter-header.is-open .filter-toggle-icon::after { content: '▲'; }</p> <p>.filter-content { display: none; /* 初期は閉じる */ padding: 15px; } .menu_rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .menu_row { display: flex; align-items: center; gap: 8px; font-size: 14px; } .menu_row input { cursor: pointer; width: 16px; height: 16px; } .menu_row label { cursor: pointer; user-select: none; }</p> <p>/* マーカーラベル（ツールチップ）のスタイル */ .leaflet-tooltip-own { background: rgba(255, 255, 255, 0.9); border: 1px solid #333; border-radius: 4px; padding: 1px 4px; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }</p> <p>/* ポップアップ内のカテゴリラベル用スタイル */ .popup-cat-label { display: inline-block; background: #e1f5fe; color: #0288d1; border: 1px solid #b3e5fc; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-bottom: 10px; } 🔍Display Filter
Comments