「飲食店検索」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 701行目: | 701行目: | ||
<a data-role="next-page" href="#">次へ →</a> | <a data-role="next-page" href="#">次へ →</a> | ||
</div> | </div> | ||
<style> | |||
.pagination { | |||
display: flex; | |||
justify-content: center; | |||
gap: 12px; | |||
margin: 24px 0; | |||
font-size: 14px; | |||
} | |||
.pagination a { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 14px; | |||
min-width: 90px; | |||
text-decoration: none; | |||
border: 1px solid #ccc; | |||
border-radius: 6px; | |||
background: #fff; | |||
color: #333; | |||
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; | |||
} | |||
/* hover */ | |||
.pagination a:hover { | |||
background: #f5f5f5; | |||
box-shadow: 0 1px 4px rgba(0,0,0,0.1); | |||
} | |||
/* 非活性 */ | |||
.pagination a.disabled { | |||
pointer-events: none; | |||
opacity: 0.4; | |||
background: #f0f0f0; | |||
color: #888; | |||
box-shadow: none; | |||
border-color: #ddd; | |||
} | |||
/* スマホ対応 */ | |||
@media (max-width: 600px) { | |||
.pagination { | |||
gap: 8px; | |||
} | |||
.pagination a { | |||
min-width: auto; | |||
padding: 10px 14px; | |||
font-size: 15px; | |||
} | |||
} | |||
</style> | |||
</html> | </html> | ||
__目次非表示__ | __目次非表示__ | ||