見出し画像

バナー画像に閉じるボタンを付ける

shinpei

WEBサイトにバナーを掲載したいけど、広告のように邪魔な人にはバナーを消せるようにする方法のメモ

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>バナー閉じるボタン</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="banner" class="banner"> <p>バナーの内容がここに入ります。</p> <button id="close-button">閉じる</button> </div> <script src="script.js"></script> </body> </html>

CSS

.banner { position: fixed; bottom: 0; width: 100%; background-color: #333 ; color: white; padding: 20px; text-align: center; z-index: 100; } #close -button { position: absolute; top: 8px; right: 8px; background-color: #ff5e5e ; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }

JavaScript

document.getElementById('close-button').addEventListener('click', function() { document.getElementById('banner').style.display = 'none'; });




この記事が気に入ったらサポートをしてみませんか？