閉じるボタンでお知らせバーを閉じる方法
閉じるボタンでお知らせバーを閉じる方法を紹介します。このサンプルでは、ページを開くとブラウザの画面上部へ横幅いっぱいのお知らせバーが表示され、右側に配置した「閉じる」ボタンをクリックすると非表示になります。HTMLとCSSでお知らせバーを作成し、JavaScriptで閉じる操作を追加します。
Webサイトの重要なお知らせ、メンテナンス情報、サービスに関する案内、キャンペーン情報など、利用者へ目立つ形で情報を伝えながら、確認後は閉じられるようにしたい場面に利用できます。「×」だけを配置する方法とは異なり、「閉じる」という文字をボタンに表示するため、利用者が操作内容を判断しやすいお知らせバーを作成できます。
HTMLではお知らせの文章や閉じるボタンの文字を変更でき、CSSでは背景色、文字色、文字サイズ、余白、影、ボタンの色や位置などを調整できます。JavaScriptでは閉じるボタンのクリックを検知し、お知らせバーを非表示にします。横幅は画面いっぱいに広がる構成で、スマートフォン・タブレット・PCでも利用できるサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
お知らせバー右側の「閉じる」ボタンをクリックすると、お知らせバーが非表示になることを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>閉じるボタンでお知らせバーを閉じる</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- サンプル全体 -->
<div class="close-button-notice-bar_wrap">
<!-- タイトル -->
<div class="close-button-notice-bar_title">
画面上部のお知らせバー
</div>
<!-- 説明文 -->
<p class="close-button-notice-bar_text">
「閉じる」ボタンをクリックすると、お知らせバーを閉じられます。
</p>
</div>
<!-- 画面上部へ固定表示するお知らせバー -->
<div
class="close-button-notice-bar_notice"
data-close-button-notice-bar="">
重要なお知らせを表示しています
<!-- お知らせバーを閉じるボタン -->
<button
type="button"
class="close-button-notice-bar_close"
data-close-button-notice-button="">
閉じる
</button>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは画面上部のお知らせバーと「閉じる」ボタンを作成し、CSSでは固定位置や色、余白、影、ボタンのデザインを設定します。JavaScriptでは「閉じる」ボタンのクリックを検知し、お知らせバーを非表示にします。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはお知らせバーとサンプルエリアを構成するファイルです。「重要なお知らせを表示しています」の文章や「閉じる」のボタン文字を変更できます。
style.cssはお知らせバーと閉じるボタンのデザインを設定するファイルです。お知らせバーの背景色、文字色、余白、文字サイズ、影のほか、閉じるボタンの位置、余白、枠線、角丸、文字サイズなどを変更できます。
script.jsはお知らせバーを閉じる処理を行うファイルです。「閉じる」ボタンがクリックされると、お知らせバーへis-hiddenクラスを追加して非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成です。ページを開くと画面上部へお知らせバーが固定表示され、右側の「閉じる」ボタンをクリックすると非表示になります。ページを再読み込みすると、お知らせバーが再び表示されます。
カスタマイズできる内容
index.htmlでは、お知らせ内容や閉じるボタンに表示する文章を変更できます。style.cssでは、お知らせバーの背景色、文字色、文字サイズ、余白、影のほか、閉じるボタンの枠線、角丸、文字サイズ、位置などを変更できます。用途に合わせて「閉じる」を「確認済み」など別の文章へ変更することもできます。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:14px 90px 14px 20px;
お知らせバーの内側余白です。上下の14pxでバーの高さ、右側の90pxで閉じるボタンを配置する空間、左側の20pxで画面端との間隔を調整できます。
font-size:16px;
お知らせバーの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
box-shadow:0 8px 20px rgba(0,0,0,.15);
お知らせバーの影です。8pxや20pxを大きくすると影の位置や広がりが大きくなり、小さくすると控えめになります。
right:12px;
閉じるボタンを右端から配置する距離です。値を大きくすると左方向へ移動し、小さくすると右端へ近づきます。
padding:6px 10px;
閉じるボタンの内側余白です。上下の6pxを大きくするとボタンが高くなり、左右の10pxを大きくすると横に広がります。
border:1px solid rgba(255,255,255,.7);
閉じるボタンの枠線です。1pxを大きくすると枠線が太くなります。
border-radius:6px;
閉じるボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:14px;
閉じるボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのお知らせバーに指定したwidth:100%によって画面の横幅いっぱいに表示されます。また、640px以下ではお知らせバーをpadding:12px 82px 12px 16px;とfont-size:14px;へ変更し、閉じるボタンもright:8px;、padding:5px 8px;、font-size:13px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント