HTMLの閉じるボタン

HTML 閉じるボタン: Web ページにエレガントな閉じるボタンを追加する方法

Web デザインでは、閉じるボタンは訪問者に利便性を提供し、閲覧を完了するのに役立つ一般的な要素です。後でページまたはアプリケーションにアクセスします。この記事では、HTML と CSS を使用してエレガントな閉じるボタンを作成する方法と、JavaScript を使用してそれを Web ページの閉じるイベントに関連付ける方法を説明します。

ステップ 1: HTML 要素の作成

HTML 閉じるボタンを作成する最初のステップは、HTML 要素を作成することです。ボタン要素を使用し、カスタム スタイルを追加して、閉じるボタンのように見せます。たとえば、基本的な HTML コードを使用できます。

<button class="close-btn">关闭</button>

これにより、ボタン上のテキストが「閉じる」という単純なボタンが作成されます。

ステップ 2: CSS スタイルを追加する

次に、ボタンを美しくするためにカスタム CSS スタイルを追加します。 CSS の box-shadow プロパティを使用して立体感を与え、border-radius プロパティを使用して丸い角を作成できます。次の CSS コードを使用できます:

.close-btn {
  background-color: #444;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

これにより、3 ピクセルの丸い角とシャドウ効果を持つ閉じるボタンが作成されます。

ステップ 3: JavaScript イベントの追加

最後に、閉じるボタンをページの閉じるイベントに関連付ける必要があります。 JavaScript を使用してこのタスクを実行できます。ユーザーが閉じるボタンをクリックすると、window.close() 関数を使用して、現在開いているウィンドウまたはタブを閉じることができます。例:

document.querySelector('.close-btn').addEventListener('click', function() {
  window.close();
});

このコードを Web ページの JavaScript ファイルに追加するだけです。これで、ユーザーが閉じるボタンをクリックすると、Web ページが自動的に閉じます。

概要

この記事では、HTML、CSS、JavaScript を使用してエレガントな閉じるボタンを作成しました。このボタンはさまざまな Web ページやアプリケーションで機能し、訪問者がページを簡単に終了できるようにします。 Web デザインが進歩するにつれて、閉じるボタンはますます一般的になり、デザイナーはさまざまなスタイルやテクニックを使用して独自の優れた閉じるボタンを作成できます。

以上がHTMLの閉じるボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。