「カテゴリーでさがす」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| (同じ利用者による、間の41版が非表示) | |||
| 1行目: | 1行目: | ||
<templatestyles src=" | <templatestyles src="カテゴリー一覧/styles.css" /> | ||
<html> | <html> | ||
< | <script> | ||
. | // ページ読み込み後に実行 | ||
document.addEventListener('DOMContentLoaded', function() { | |||
const grid = document.querySelector('.category-grid'); | |||
let currentExpandedPanel = null; | |||
.genre- | |||
// すべてのジャンルで探すボタンにクリックイベントを追加 | |||
const toggleButtons = document.querySelectorAll('.genre-toggle'); | |||
} | toggleButtons.forEach(button => { | ||
. | button.addEventListener('click', function(e) { | ||
e.preventDefault(); | |||
} | |||
.subgenres | const card = this.closest('.category-card'); | ||
const cardId = card.id; | |||
const wasOpen = card.classList.contains('is-open'); | |||
// 既存の展開パネルを削除 | |||
if (currentExpandedPanel) { | |||
currentExpandedPanel.remove(); | |||
. | currentExpandedPanel = null; | ||
} | |||
// すべてのカードを閉じる | |||
document.querySelectorAll('.category-card').forEach(c => { | |||
c.classList.remove('is-open'); | |||
}); | |||
} | |||
</ | // クリックしたカードがもともと閉じていた場合のみ開く | ||
if (!wasOpen) { | |||
card.classList.add('is-open'); | |||
// サブジャンルの内容を取得 | |||
const subgenresContent = card.querySelector('.subgenres').innerHTML; | |||
// カードの位置を取得して、同じ行の最後に展開パネルを挿入 | |||
const allCards = Array.from(grid.children).filter(el => el.classList.contains('category-card')); | |||
const cardIndex = allCards.indexOf(card); | |||
// グリッドの列数を計算（ウィンドウ幅に基づく） | |||
const gridStyle = window.getComputedStyle(grid); | |||
const gridTemplateColumns = gridStyle.gridTemplateColumns.split(' ').length; | |||
// 同じ行の最後のカードのインデックスを計算 | |||
const rowEndIndex = Math.floor(cardIndex / gridTemplateColumns) * gridTemplateColumns + gridTemplateColumns - 1; | |||
const insertAfterCard = allCards[Math.min(rowEndIndex, allCards.length - 1)]; | |||
// 展開パネルを作成 | |||
const expandedPanel = document.createElement('div'); | |||
expandedPanel.className = 'subgenres-expanded'; | |||
expandedPanel.innerHTML = subgenresContent; | |||
// 展開パネルを挿入 | |||
insertAfterCard.after(expandedPanel); | |||
currentExpandedPanel = expandedPanel; | |||
// アニメーション用に少し遅延 | |||
setTimeout(() => { | |||
expandedPanel.classList.add('is-visible'); | |||
}, 10); | |||
} | |||
}); | |||
}); | |||
// ウィンドウリサイズ時に展開パネルの位置を再計算 | |||
let resizeTimer; | |||
window.addEventListener('resize', function() { | |||
clearTimeout(resizeTimer); | |||
resizeTimer = setTimeout(function() { | |||
const openCard = document.querySelector('.category-card.is-open'); | |||
if (openCard) { | |||
// 再度開き直す | |||
openCard.querySelector('.genre-toggle').click(); | |||
openCard.querySelector('.genre-toggle').click(); | |||
} | |||
}, 250); | |||
}); | |||
}); | |||
</script> | |||
</html> | </html> | ||
川西の情報を、カテゴリーごとに整理しています。 | |||
気になるカテゴリーを選んでください。 | |||
- | <div class="category-grid"> | ||
<div class=" | <div class="category-card" id="food"> | ||
<h3 class=" | <h3 class="category-title">🍽️ 飲食店</h3> | ||
<div class="category-actions"> | |||
[[飲食店検索|すべてを見る {{飲食店件数取得|column=ジャンル|detail=}}件]] | |||
<html><a href="#food" class="genre-toggle">ジャンルで探す</a></html> | |||
</div> | |||
<div class="subgenres"> | |||
* [[居酒屋|居酒屋 {{飲食店件数取得|column=ジャンル|detail=居酒屋}}件]] | |||
* [[ダイニングバー・バル|ダイニングバー・バル {{飲食店件数取得|column=ジャンル|detail=ダイニングバー・バル}}件]] | |||
* [[創作料理|創作料理 {{飲食店件数取得|column=ジャンル|detail=創作料理}}件]] | |||
* [[和食|和食 {{飲食店件数取得|column=ジャンル|detail=和食}}件]] | |||
* [[洋食|洋食 {{飲食店件数取得|column=ジャンル|detail=洋食}}件]] | |||
* [[イタリアン・フレンチ|イタリアン・フレンチ {{飲食店件数取得|column=ジャンル|detail=イタリアン・フレンチ}}件]] | |||
* [[中華|中華 {{飲食店件数取得|column=ジャンル|detail=中華}}件]] | |||
* [[焼肉・ホルモン|焼肉・ホルモン {{飲食店件数取得|column=ジャンル|detail=焼肉・ホルモン}}件]] | |||
* [[韓国料理|韓国料理 {{飲食店件数取得|column=ジャンル|detail=韓国料理}}件]] | |||
* [[アジア・エスニック料理|アジア・エスニック料理 {{飲食店件数取得|column=ジャンル|detail=アジア・エスニック料理}}件]] | |||
* [[各国料理|各国料理 {{飲食店件数取得|column=ジャンル|detail=各国料理}}件]] | |||
* [[カラオケ・パーティ|カラオケ・パーティ {{飲食店件数取得|column=ジャンル|detail=カラオケ・パーティ}}件]] | |||
* [[バー・カクテル|バー・カクテル {{飲食店件数取得|column=ジャンル|detail=バー・カクテル}}件]] | |||
* [[ラーメン|ラーメン {{飲食店件数取得|column=ジャンル|detail=ラーメン}}件]] | |||
* [[お好み焼き・もんじゃ|お好み焼き・もんじゃ {{飲食店件数取得|column=ジャンル|detail=お好み焼き・もんじゃ}}件]] | |||
* [[カフェ・スイーツ|カフェ・スイーツ {{飲食店件数取得|column=ジャンル|detail=カフェ・スイーツ}}件]] | |||
* [[その他グルメ|その他グルメ {{飲食店件数取得|column=ジャンル|detail=その他グルメ}}件]] | |||
</div> | |||
</div> | |||
<div class=" | <div class="category-card disabled" id="beauty"> | ||
[[ | <h3 class="category-title">💅 美容・健康</h3> | ||
[[ | <div class="category-actions"> | ||
<html><a>すべてを見る</a></html> | |||
<html><a>ジャンルで探す</a></html> | |||
</div> | |||
<div class="subgenres"> | |||
* [[美容室一覧|美容室]] | |||
* [[理容室一覧|理容室]] | |||
* [[ネイル一覧|ネイル]] | |||
* [[エステ一覧|エステ]] | |||
* [[整体・整骨院一覧|整体・整骨院]] | |||
* [[マッサージ一覧|マッサージ]] | |||
* [[鍼灸一覧|鍼灸]] | |||
* [[フィットネス一覧|フィットネス]] | |||
* [[ヨガ・ピラティス一覧|ヨガ・ピラティス]] | |||
</div> | |||
</div> | </div> | ||
<div class="category-card" id="store"> | |||
<div class=" | <h3 class="category-title">🏪 小売・店舗</h3> | ||
<div class="category-actions"> | |||
[[小売・店舗検索|すべてを見る {{小売・店舗件数取得|column=ジャンル|detail=}}件]] | |||
<html><a href="#store" class="genre-toggle">ジャンルで探す</a></html> | |||
</div> | |||
* [[ | <div class="subgenres"> | ||
* [[ | * [[コンビニ|コンビニ {{小売・店舗件数取得|column=ジャンル|detail=コンビニ}}件]] | ||
* [[ | * [[スーパー|スーパー {{小売・店舗件数取得|column=ジャンル|detail=スーパー}}件]] | ||
* [[ | * [[衣料品店|衣料品店 {{小売・店舗件数取得|column=ジャンル|detail=衣料品店}}件]] | ||
* [[ | * [[リサイクル ショップ|リサイクル ショップ {{小売・店舗件数取得|column=ジャンル|detail=リサイクル ショップ}}件]] | ||
* [[ | * [[ドラッグストア|ドラッグストア {{小売・店舗件数取得|column=ジャンル|detail=ドラッグストア}}件]] | ||
* [[ | * [[化粧品店|化粧品店 {{小売・店舗件数取得|column=ジャンル|detail=化粧品店}}件]] | ||
* [[ | * [[花屋|花屋 {{小売・店舗件数取得|column=ジャンル|detail=花屋}}件]] | ||
* [[ | * [[雑貨店|雑貨店 {{小売・店舗件数取得|column=ジャンル|detail=雑貨店}}件]] | ||
* [[ | * [[中古車販売業者|中古車販売業者 {{小売・店舗件数取得|column=ジャンル|detail=中古車販売業者}}件]] | ||
* [[ | * [[インテリア用品店|インテリア用品店 {{小売・店舗件数取得|column=ジャンル|detail=インテリア用品店}}件]] | ||
* [[ | * [[ペットショップ|ペットショップ {{小売・店舗件数取得|column=ジャンル|detail=ペットショップ}}件]] | ||
* [[100 円ショップ|100 円ショップ {{小売・店舗件数取得|column=ジャンル|detail=100 円ショップ}}件]] | |||
このほかにも、 | |||
パチンコ店、カラオケ、ホームセンター、書店、靴店、家電量販店など、 | |||
川西市内のさまざまな小売・店舗情報を掲載しています。 | |||
</div> | </div> | ||
</div> | </div> | ||
---- | <div class="category-card" id="medical"> | ||
<h3 class="category-title">🏥 医療・介護</h3> | |||
<div class="category-actions"> | |||
[[医療・介護検索|すべてを見る {{医療・介護件数取得|column=ジャンル|detail=}}件]] | |||
<html><a href="#medical" class="genre-toggle">ジャンルで探す</a></html> | |||
</div> | |||
<div class="subgenres"> | |||
* [[病院・クリニック|病院・クリニック {{医療・介護件数取得|column=ジャンル|detail=病院・クリニック}}件]] | |||
* [[歯科|歯科 {{医療・介護件数取得|column=ジャンル|detail=歯科}}件]] | |||
* [[内科|内科 {{医療・介護件数取得|column=ジャンル|detail=内科}}件]] | |||
* [[介護施設|介護施設 {{医療・介護件数取得|column=ジャンル|detail=介護施設}}件]] | |||
* [[デイサービス|デイサービス {{医療・介護件数取得|column=ジャンル|detail=デイサービス}}件]] | |||
</div> | |||
</div> | |||
== | <div class="category-card disabled" id="school"> | ||
<h3 class="category-title">🏫 習い事・スクール</h3> | |||
<div class="category-actions"> | |||
<html><a>すべてを見る</a></html> | |||
<html><a>ジャンルで探す</a></html> | |||
</div> | |||
<div class="subgenres"> | |||
* [[学習塾一覧|学習塾]] | |||
* [[スイミングスクール一覧|スイミングスクール]] | |||
</div> | |||
</div> | |||
* [[ | <div class="category-card disabled" id="campary"> | ||
<h3 class="category-title">👥 団体・企業</h3> | |||
<div class="category-actions"> | |||
<html><a>すべてを見る</a></html> | |||
<html><a>ジャンルで探す</a></html> | |||
</div> | |||
<div class="subgenres"> | |||
* [[地元企業一覧|地元企業]] | |||
* [[NPO・一般社団法人一覧|NPO・一般社団法人]] | |||
* [[自治会・町内会一覧|自治会・町内会]] | |||
</div> | |||
</div> | |||
<div class="category-card disabled" id="person"> | |||
<div class=" | <h3 class="category-title">👤 人</h3> | ||
<div class="category-actions"> | |||
<html><a>すべてを見る</a></html> | |||
<html><a>ジャンルで探す</a></html> | |||
* [[ | </div> | ||
* [[ | <div class="subgenres"> | ||
* [[ | * [[店主一覧|店主]] | ||
* [[ | * [[経営者一覧|経営者]] | ||
* [[ | * [[クリエイター一覧|クリエイター]] | ||
* [[地域活動家一覧|地域活動家]] | |||
* [[職人一覧|職人]] | |||
</div> | |||
</div> | </div> | ||
--- | <div class="category-card disabled" id="spot"> | ||
<h3 class="category-title">🏢 施設・スポット</h3> | |||
<div class="category-actions"> | |||
<html><a>すべてを見る</a></html> | |||
<html><a>ジャンルで探す</a></html> | |||
</div> | |||
<div class="subgenres"> | |||
* [[公園一覧|公園]] | |||
* [[レンタルスペース一覧|レンタルスペース]] | |||
</div> | |||
</div> | |||
== | <div class="category-card disabled" id="job"> | ||
<h3 class="category-title">🖋️ 仕事</h3> | |||
<div class="category-actions"> | |||
<html><a>すべてを見る</a></html> | |||
<html><a>ジャンルで探す</a></html> | |||
<div class=" | |||
</div> | </div> | ||
<div class="subgenres"> | |||
* [[求人一覧|求人]] | |||
* [[アルバイト一覧|アルバイト]] | |||
* [[正社員募集一覧|正社員募集]] | |||
* [[業務委託・フリーランス一覧|業務委託・フリーランス]] | |||
* [[インターン一覧|インターン]] | |||
<div class=" | |||
* [[ | |||
* [[ | |||
* [[ | |||
* [[ | |||
* [[ | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
__目次非表示__ | |||
2026年2月24日 (火) 16:36時点における最新版
川西の情報を、カテゴリーごとに整理しています。 気になるカテゴリーを選んでください。
🍽️ 飲食店
🏪 小売・店舗
- コンビニ 38件
- スーパー 29件
- 衣料品店 25件
- リサイクル ショップ 21件
- ドラッグストア 20件
- 化粧品店 20件
- 花屋 20件
- 雑貨店 18件
- 中古車販売業者 16件
- インテリア用品店 13件
- ペットショップ 11件
- 100 円ショップ 11件
このほかにも、 パチンコ店、カラオケ、ホームセンター、書店、靴店、家電量販店など、 川西市内のさまざまな小売・店舗情報を掲載しています。