HTMLでボタンのスタイルを設定する方法


  1. インラインスタイル: ボタンに直接スタイルを適用する方法です。以下の例では、ボタンの背景色を赤に設定しています。
<button style="background-color: red;">ボタン</button>
  1. CSSクラス: CSSクラスを使用してボタンにスタイルを適用する方法です。まず、CSSでクラスを定義します。
<style>
  .red-button {
    background-color: red;
  }
</style>

次に、ボタンにそのクラスを適用します。

<button class="red-button">ボタン</button>
  1. CSSの外部ファイル: CSSを外部ファイルに分離して管理する方法もあります。まず、新しいCSSファイル(例:styles.css)を作成し、スタイルを定義します。
.red-button {
  background-color: red;
}

次に、HTMLファイルでそのCSSファイルを読み込みます。

<link rel="stylesheet" href="styles.css">

最後に、ボタンにクラスを適用します。

<button class="red-button">ボタン</button>

これらはいくつかの基本的なボタンスタイルの例です。他にもさまざまなスタイルオプションがあります。必要に応じて、背景色、テキストスタイル、ホバーエフェクトなどをカスタマイズすることができます。