設定ボタンのHTML

はじめに

Web アプリケーションを開発する場合、多くの場合、ユーザーが必要に応じてアプリケーションの設定を変更できるように、設定パネルをユーザーに表示する必要があります。設定パネルには通常、テーマの変更、音量の調整など、いくつかのオプションが含まれています。この記事では、HTMLとCSSを使用して基本的な設定ボタンを作成する方法を説明します。

HTML マークアップ

まず、HTML でボタンを作成し、そのスタイルを「ボタンを設定」に設定する必要があります。 HTMLコードの「button」要素を使用してボタンを作成できます。

設定

CSS スタイル

次に、ボタン要素に CSS スタイルを追加する必要があります。外観は一般的な設定ボタンと一致します。 CSS クラス セレクターを使用して、ボタン要素にスタイルを追加できます。

.settings-button {
背景色: #ffffff;
ボーダー: なし;
ボーダー半径: 50%;
box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.25);
カラー: #484848;
カーソル: ポインタ;
フォント サイズ: 24px;
高さ: 60px;
幅: 60px;
位置: 固定;
下: 20px;
右: 20px;
}

上記の CSS スタイルでは、次のプロパティと値を使用しました:

background - color: #ffffff; - ボタンの背景色を白に設定します。

border: none; - 境界線を削除します。

border-radius: 50%; - ボタンの境界線の半径を 50% に設定し、円形にします。

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); - ボタンをより立体的に見せるためにボックス シャドウを追加します。

color: #484848; - ボタンのテキストの色をグレーに設定します。

cursor: pointer; - 手の形状を指すようにカーソルを設定します。

font-size: 24px; - フォント サイズを 24 ピクセルに設定します。

height: 60px; - ボタンの高さを 60 ピクセルに設定します。

width: 60px; - ボタンの幅を 60 ピクセルに設定します。

position:fixed; - ボタンの配置方法を「固定」に設定します。

bottom: 20px; - ボタンの下端をビューポートの下部から 20 ピクセルに設定します。

right: 20px; - ボタンの右端をビューポートの右側から 20 ピクセルに設定します。

JavaScript 関数

次に、ユーザーがボタンをクリックしたときに設定パネルを表示するために、JavaScript を使用してイベント ハンドラーを追加する必要があります。この要件を達成するには、次のコードを使用できます。

const settingsButton = document.querySelector(".settings-button");
const settingsPanel = document.querySelector(".settings-panel");

settingsButton.addEventListener(" click", () => {
settingsPanel.classList.toggle("open");
});

コードでは、まず DOM で設定ボタンを探し、パネル要素を設定します。次に、設定ボタンのクリック イベント ハンドラーを追加します。イベント ハンドラーでは、「オープン」クラスを設定パネルに適用して、ユーザーのビューに表示されるようにします。ユーザーが設定ボタンを再度クリックすると、「close」クラスを適用して設定パネルを非表示にします。

結論

HTML、CSS、JavaScript を使用して、ユーザーにアプリケーション設定を変更する方法を提供するシンプルな設定ボタンを作成しました。このボタンは、アプリケーションや Web サイトに合わせてカスタム CSS を使用してサイズ変更したり色を変更したりできます。このようなボタンを使用すると、ユーザーは自分のニーズや好みに合わせてアプリの設定を簡単に変更できます。

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