PR

クリックアラートボックス作成サンプル

2024.07.15

X（旧Twitter）自力でBOT化できたらいいなーからPythonを初めて、今更ながらHTML、CSS、JavaScript勉強始めました（笑）

下記のようにクリックするとアラートボックスが表示されるコードです。

各種コードがまだよくわかってないので、勉強がてらに全て記載しています。

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウェブページの例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 15px 32px;
            font-size: 16px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            margin-top: 20px;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <button id="myButton">クリックしてください</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('ボタンがクリックされました！');
        });
    </script>
</body>
</html>

詳細説明

<!DOCTYPE html>

  • 役割: HTML5のドキュメントタイプ宣言。ブラウザに対して、ページがHTML5で書かれていることを伝えます。

<html lang="ja">

  • 役割: HTML文書のルート要素。lang="ja"属性は、文書の言語が日本語であることを示します。

<head>

  • 役割: メタデータ（データに関するデータ）を含むセクション。タイトルや文字エンコーディング、スタイルシートのリンクなどが含まれます。
<meta charset="UTF-8">
  • 役割: 文字エンコーディングをUTF-8に設定します。これにより、特殊文字や多言語テキストが正しく表示されます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 役割: ビューポートの設定。ページの幅をデバイスの幅に合わせ、ズームレベルを1に設定します。これにより、レスポンシブデザイン（画面サイズに応じてレイアウトが変わるデザイン）がサポートされます。
<title>ウェブページの例</title>
  • 役割: ウェブページのタイトル。ブラウザのタブや検索エンジンの結果に表示されます。
<style> ... </style>
  • 役割: 内部スタイルシート。ここに書かれたCSSは、このHTMLページに適用されます。

<body>

  • 役割: ウェブページの主要なコンテンツを含むセクション。

<h1>こんにちは、世界！</h1>

  • 役割: 見出し要素。ここでは一番大きな見出し（レベル1）を定義しています。

<button id="myButton">クリックしてください</button>

  • 役割: ボタン要素。id="myButton"属性により、このボタンをJavaScriptから参照できます。

<script> ... </script>

  • 役割: JavaScriptコードを含むセクション。ここに書かれたスクリプトは、このHTMLページに対して実行されます。

CSS部分（内部スタイルシート）

body { ... }

  • 役割: ページ全体のスタイルを定義します。
body {
    font-family: Arial, sans-serif; /* フォントをArialに設定、Arialがない場合はsans-serifを使用 */
    background-color: #f0f0f0; /* 背景色を淡い灰色に設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    padding: 50px; /* ページ全体に50ピクセルの内側余白を追加 */
}

h1 { ... }

  • 役割: h1要素のスタイルを定義します。
h1 {
    color: #333; /* テキスト色を濃い灰色に設定 */
}

button { ... }

  • 役割: ボタン要素のスタイルを定義します。
button {
    background-color: #4CAF50; /* 背景色を緑に設定 */
    color: white; /* テキスト色を白に設定 */
    padding: 15px 32px; /* ボタン内のテキストの周囲に内側余白を追加 */
    font-size: 16px; /* フォントサイズを16ピクセルに設定 */
    border: none; /* ボーダーを削除 */
    border-radius: 12px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインター（手の形）に設定 */
    margin-top: 20px; /* ボタンの上部に20ピクセルの外側余白を追加 */
}

button:hover { ... }

  • 役割: ボタンにマウスが乗ったときのスタイルを定義します。
button:hover {
    background-color: #45a049; /* ホバー時の背景色を少し濃い緑に変更 */
}

JavaScript部分

document.getElementById('myButton').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

詳細説明

document.getElementById('myButton')

  • 役割: idがmyButtonの要素を取得します。ここでは、HTML内のボタン要素を指します。

.addEventListener('click', function() { ... });

  • 役割: 指定したイベント（ここではclick）が発生したときに実行する関数（イベントハンドラー）を追加します。

function() { alert('ボタンがクリックされました！'); }

  • 役割: イベントハンドラー。この関数は、ボタンがクリックされたときに実行されます。ここでは、アラートボックスを表示します。

まとめ

  1. HTML:
  • ウェブページの構造と内容を定義。
  • 見出しやボタンなどの要素を配置。
  1. CSS:
  • ページのデザインを定義。
  • フォント、色、余白などのスタイルを設定。
  1. JavaScript:
  • ページに動きを追加。
  • ユーザーの操作に応じて動作を実行。

この三つの技術を組み合わせることで、機能的で見た目が整ったウェブページを作成することができます。何かに活用してみてください。

こちらではWordPressを使わずにHTML、CSS、JavaScriptで作ったブラウザゲームを公開しています。（現時点ではシンプルすぎなページです。学びながら整えていきます。）

タイトルとURLをコピーしました