HTML でクリック可能なボタンを作成する

はじめに

HTML の<button>要素は、特定のアクションを実行するために使用できる Web ページ上のボタンを作成するために使用されます。このチュートリアルでは、HTML を使用してボタンを作成する方法を学びます。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 86%です。学習者から 100% の好評価を得ています。

HTML ファイルを作成する

index.htmlという名前の HTML ファイルを作成します。このファイルでは、基本的な HTML 構造を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body></body>
</html>

ボタンを作成する

ボタンを作成するには、HTML の<button>要素を使用します。ボタン要素の開始タグと終了タグの間に、テキスト、画像、またはマルチメディアコンテンツを追加できます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button>Click Me!</button>
  </body>
</html>

onclick 属性を追加する

ボタン要素にonclick属性を追加することで、ボタンがクリックされたときに JavaScript 関数を実行することができます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

CSS スタイリングを追加する

必要に応じて CSS を使用してボタンをスタイリングできます。ここでは、ボタンのテキスト色、背景色、およびパディングを変更するための基本的な CSS を追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
    <style>
      button {
        background-color: #4caf50; /* 緑色 */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

まとめ

このチュートリアルでは、HTML を使ってボタンを作成する方法を学びました。また、ボタン要素に JavaScript 関数を追加し、ボタンに CSS スタイリングを適用する方法も学びました。ボタン要素をマスターすることで、Web ページでアクションを実行するためのボタンを簡単に作成できます。