「カテゴリーでさがす」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 2行目: | 2行目: | ||
<html> | <html> | ||
<style> | <style> | ||
/* ======================================== | |||
ジャンルグリッド | |||
======================================== */ | |||
.genre-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |||
gap: 2rem; | |||
max-width: 1200px; | |||
margin: 3rem auto; | |||
padding: 0 2rem; | |||
} | |||
/* ======================================== | |||
ジャンルカード | |||
======================================== */ | |||
.genre-card { | .genre-card { | ||
background: #fff; | |||
border: 2px solid #000; | |||
border-radius: 10px; | |||
padding: 2rem; | |||
transition: all 0.3s ease; | |||
} | |||
.genre-card:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 8px 8px 0 #000; | |||
} | } | ||
/* ======================================== | |||
ジャンルタイトル | |||
======================================== */ | |||
.genre-title { | .genre-title { | ||
font-size: 1.8rem; | |||
font-weight: 700; | |||
margin-bottom: 1.5rem; | |||
padding-bottom: 1rem; | |||
border-bottom: 3px solid #000; | |||
} | } | ||
/* ======================================== | |||
ジャンルアクション（ボタンエリア） | |||
======================================== */ | |||
.genre-actions { | .genre-actions { | ||
display: flex; | |||
flex-direction: column; | |||
gap: 0.8rem; | |||
margin-bottom: 1rem; | |||
} | } | ||
.genre-actions a { | .genre-actions a { | ||
display: inline-block; | |||
padding: 0.8rem 1.5rem; | |||
background: #000; | |||
color: #fff; | |||
text-decoration: none; | |||
border-radius: 50px; | |||
font-weight: 600; | |||
text-align: center; | |||
transition: all 0.3s; | |||
} | |||
.genre-actions a:hover { | |||
background: #333; | |||
transform: scale(1.02); | |||
} | |||
/* 「ジャンルで探す」ボタンのスタイル */ | |||
.genre-actions a[href^="#"] { | |||
background: #fff; | |||
color: #000; | |||
border: 2px solid #000; | |||
cursor: pointer; | |||
position: relative; | |||
} | |||
.genre-actions a[href^="#"]::after { | |||
content: '▼'; | |||
margin-left: 0.5rem; | |||
font-size: 0.8rem; | |||
transition: transform 0.3s; | |||
} | |||
.genre-actions a[href^="#"]:hover { | |||
background: #f5f5f5; | |||
transform: scale(1.02); | |||
} | |||
/* アクティブ時（リスト表示時）の矢印を上向きに */ | |||
.genre-card.active .genre-actions a[href^="#"]::after { | |||
transform: rotate(180deg); | |||
} | } | ||
/* ======================================== | |||
サブジャンルリスト | |||
======================================== */ | |||
.subgenres { | .subgenres { | ||
max-height: 0; | |||
overflow: hidden; | |||
transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease; | |||
opacity: 0; | |||
margin-top: 0; | |||
} | |||
.genre-card.active .subgenres { | |||
max-height: 1000px; | |||
opacity: 1; | |||
margin-top: 1rem; | |||
} | } | ||
.subgenres ul { | .subgenres ul { | ||
list-style: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.subgenres li { | |||
margin-bottom: 0.5rem; | |||
} | |||
.subgenres a { | |||
display: block; | |||
padding: 0.8rem 1rem; | |||
background: #f9f9f9; | |||
color: #333; | |||
text-decoration: none; | |||
border-left: 3px solid transparent; | |||
transition: all 0.3s; | |||
border-radius: 5px; | |||
} | } | ||
: | .subgenres a:hover { | ||
background: #fff; | |||
border-left-color: #000; | |||
transform: translateX(5px); | |||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); | |||
} | |||
/* ======================================== | |||
レスポンシブ | |||
======================================== */ | |||
@media (max-width: 768px) { | |||
.genre-grid { | |||
grid-template-columns: 1fr; | |||
gap: 1.5rem; | |||
padding: 0 1rem; | |||
} | |||
.genre-card { | |||
padding: 1.5rem; | |||
} | |||
.genre-title { | |||
font-size: 1.5rem; | |||
} | |||
} | } | ||
</style> | </style> | ||
<script> | |||
document.querySelectorAll('.genre-actions a[href^="#"]').forEach(button => { | |||
button.addEventListener('click', (e) => { | |||
e.preventDefault(); | |||
const card = button.closest('.genre-card'); | |||
card.classList.toggle('active'); | |||
}); | |||
}); | |||
</script> | |||
</html> | </html> | ||
= ジャンルから探す = | = ジャンルから探す = | ||
2026年1月28日 (水) 19:30時点における版
ジャンルから探す
川西の情報を、ジャンルごとに整理しています。 気になるジャンルを選んでください。