HTMLについて - 初心者向けの基礎的な説明

２．HTMLの主なタグの種類

HTMLには以下のタグがあり、それぞれ異なる役割を持ちます。

基本的なHTMLの構造タグ（<!DOCTYPE html>、<html>、<head>、<body> など）
テキスト関連のタグ（<h1>～<h6>、<p>、<strong>、<em>、<br>、<hr>）
リスト関連のタグ（<ul>、<ol>、<li>）
表関連のタグ（<table>、<tr>、<th>、<td>）
フォーム関連のタグ（<form>、<input>、<textarea>、<button>）
画像・メディア関連のタグ（<img>、<audio>、<video>）

基本的なHTMLの構造タグ
<!DOCTYPE html> → HTMLのバージョンを指定
<html> → HTML文書のルート要素
<head> → メタ情報を含む
<title> → ページのタイトル
<body> → ページの本体部分
テキスト関連のタグ
<h1>～<h6> → 見出し（<h1>が最も大きい）
<p> → 段落
<br> → 改行
<hr> → 区切り線
<strong> → 重要な強調（太字）
<em> → 斜体（強調）
<span> → インラインテキストの装飾用
リスト関連のタグ
<ul> → 順不同リスト
<ol> → 順序付きリスト
<li> → リストの項目
表関連のタグ
<table> → 表の作成
<tr> → 行の作成
<th> → 見出しセル
<td> → データセル
フォーム関連のタグ
<form> → フォームの作成
<input> → ユーザー入力
<button> → ボタン
<textarea> → 複数行テキスト入力
<select> → ドロップダウンリスト
<option> → 選択肢
画像・メディア関連のタグ
<img> → 画像表示
<audio> → 音声ファイル再生
<video> → 動画ファイル再生
リンク・ナビゲーション関連のタグ
<a> → ハイパーリンク
<nav> → ナビゲーションのグループ化
セマンティックタグ（HTML5）
<header> → ヘッダー部分
<footer> → フッター部分
<section> → セクション分け
<article> → 記事
<aside> → サイドコンテンツ
<main> → メインコンテンツ
スクリプト・スタイル関連のタグ
<script> → JavaScriptを埋め込み
<style> → CSSを埋め込み
<link> → 外部CSSを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLタグのサンプル</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #cecece; margin: 20px; }
        header, footer { background: black; color: white; text-align: center; padding: 10px; }
        section { background: white; padding: 20px; margin: 10px 0; border-radius: 5px; }
        table { width: 100%; border-collapse: collapse; }
        table, th, td { border: 1px solid black; }
        th, td { padding: 8px; text-align: left; }
        ul { list-style-type: square; }
    </style>
</head>
<body>

    <!-- ヘッダー -->
    <header>
        <h1>HTMLタグのサンプルページ</h1>
    </header>

    <!-- ナビゲーション -->
    <p><strong>ナビゲーション</strong></p>
    <nav>
        <ul>
            <li><a href="#text">テキスト関連</a></li>
            <li><a href="#list">リスト</a></li>
            <li><a href="#table">表</a></li>
            <li><a href="#form">フォーム</a></li>
            <li><a href="#media">メディア</a></li>
        </ul>
    </nav>

    <!-- テキスト関連 -->
    <section id="text">
        <h2>テキスト関連のタグ</h2>
        <p>これは<strong>重要な</strong>テキストです。</p>
        <p>これは<em>強調された</em>テキストです。</p>
        <hr>
        <p>改行を<br>ここに入れます。</p>
    </section>

    <!-- リスト関連 -->
    <section id="list">
        <h2>リストのタグ</h2>
        <h3>順不同リスト（ul）</h3>
        <ul>
            <li>りんご</li>
            <li>バナナ</li>
            <li>オレンジ</li>
        </ul>

        <h3>順序付きリスト（ol）</h3>
        <ol>
            <li>HTMLを学ぶ</li>
            <li>CSSを学ぶ</li>
            <li>JavaScriptを学ぶ</li>
        </ol>
    </section>

    <!-- 表関連 -->
    <section id="table">
        <h2>表のタグ</h2>
        <table>
            <tr>
                <th>名前</th>
                <th>年齢</th>
            </tr>
            <tr>
                <td>太郎</td>
                <td>25</td>
            </tr>
            <tr>
                <td>花子</td>
                <td>22</td>
            </tr>
        </table>
    </section>

    <!-- フォーム関連 -->
    <section id="form">
        <h2>フォームのタグ</h2>
        <form action="#" method="post">
            <label for="name">名前:</label>
            <input type="text" id="name" name="name" placeholder="名前を入力"><br><br>

            <label for="message">メッセージ:</label>
            <textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>

            <button type="submit">送信</button>
        </form>
    </section>

    <!-- メディア関連 -->
    <section id="media">
        <h2>メディアのタグ</h2>
        <h3>画像</h3>
        <img src="../jpg/enjoyprogramming.jpg" alt="サンプル画像" width="20%" height="20%">
        <h3>音声</h3>
        <audio controls>
            <source src="sample.mp3" type="audio/mpeg">
            お使いのブラウザはオーディオ要素をサポートしていません。
        </audio>

        <h3>動画</h3>
        <video controls width="320">
            <source src="../jpg/prg_scratch_flower.mp4" type="video/mp4">
            お使いのブラウザはビデオ要素をサポートしていません。
        </video>
    </section>

    <!-- JavaScriptで動的に変更 -->
    <section>
        <h2>JavaScriptでの動作</h2>
        <p id="textChange">このテキストが変わります。</p>
        <button onclick="changeText()">変更する</button>
    </section>

    <script>
        function changeText() {
            document.getElementById("textChange").innerHTML = "テキストが変更されました！";
        }
    </script>

    <!-- フッター -->
    <footer>
        <p>© 2025 makalgo</p>
    </footer>

</body>
</html>

３．CSSを使用したデザインとJavaScriptでの動的変更

CSS（Cascading Style Sheets）はHTML要素のスタイルやレイアウトを制御し、JavaScriptはインタラクティブな機能を実現できます。

CSSでできること

CSS（Cascading Style Sheets）は、HTMLのデザインやレイアウトを調整するためのスタイルシート言語です。

テキストの装飾
フォントサイズや色の変更
文字間隔や行間の調整
影や太字、斜体の適用
レイアウトの変更
要素の位置を調整（左寄せ・中央揃え・右寄せ）
フレックスボックスやグリッドレイアウトで配置
マージンやパディングで余白を設定
背景やボーダーの設定
背景画像やグラデーションを設定
ボーダー（枠線）の色や太さを変更
角を丸くする（border-radius）
アニメーションやトランジション
マウスホバー時の変化
ゆっくり色や位置を変えるトランジション
回転や拡大・縮小のアニメーション

JavaScript（script）でできること

JavaScriptは、ウェブページに動的な動作を追加するためのプログラミング言語です。

HTML要素の操作
ボタンを押したときにテキストを変更
画像やスタイルを変更
イベント処理
マウスクリック、キーボード入力などに応じた動作
フォームの送信を制御
アニメーションの制御
画像やボタンを動かす
スクロール時にフェードイン・アウト
データの取得・処理
ユーザーの入力データを保存
外部APIからデータを取得（天気情報など）
クッキーやローカルストレージを使用したデータ保存
ユーザー情報の保持
ログイン状態の管理

以下、サンプルを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSとJavaScriptのサンプル</title>
    <style>
        /* CSSの例 */
        
        /* 背景とフォント */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
        }

        /* レイアウト調整 */
        .container {
            max-width: 600px;
            margin: 20px auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        /* ボタンのデザイン */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        /* アニメーション */
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px auto;
            transition: transform 0.5s;
        }

        .box:hover {
            transform: rotate(180deg);
        }

        /* メディアクエリ（レスポンシブ対応） */
        @media (max-width: 600px) {
            body {
                background-color: lightgray;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>CSSとJavaScriptのサンプル</h1>

        <!-- CSSでできること -->
        <h2>CSSの機能</h2>
        <p>背景色、フォント、レイアウト調整、ボタンのスタイル、アニメーションなどを設定できます。</p>
        <div class="box"></div>

        <!-- JavaScriptでできること -->
        <h2>JavaScriptの機能</h2>
        <p id="text">ボタンを押すとテキストが変わります。</p>
        <button class="btn" onclick="changeText()">テキストを変更</button>

        <h3>入力の取得と表示</h3>
        <input type="text" id="userInput" placeholder="何か入力してください">
        <button class="btn" onclick="displayInput()">表示</button>
        <p id="displayArea"></p>

        <h3>要素の追加・削除</h3>
        <button class="btn" onclick="addElement()">要素を追加</button>
        <button class="btn" onclick="removeElement()">要素を削除</button>
        <div id="elementContainer"></div>

        <h3>日時の表示</h3>
        <p id="time"></p>
        <button class="btn" onclick="showTime()">現在時刻を表示</button>
    </div>

    <script>
        // JavaScriptの例

        // 1. ボタンをクリックするとテキストを変更
        function changeText() {
            document.getElementById("text").innerText = "テキストが変更されました！";
        }

        // 2. ユーザーの入力を取得して表示
        function displayInput() {
            let input = document.getElementById("userInput").value;
            document.getElementById("displayArea").innerText = "入力されたテキスト: " + input;
        }

        // 3. 要素の追加と削除
        function addElement() {
            let newElement = document.createElement("p");
            newElement.innerText = "追加された要素";
            newElement.id = "addedElement";
            document.getElementById("elementContainer").appendChild(newElement);
        }

        function removeElement() {
            let element = document.getElementById("addedElement");
            if (element) {
                element.remove();
            }
        }

        // 4. 現在の日時を表示
        function showTime() {
            let now = new Date();
            document.getElementById("time").innerText = "現在時刻: " + now.toLocaleTimeString();
        }
    </script>

</body>
</html>

１．HTMLの基本構造

２．HTMLの主なタグの種類

３．CSSを使用したデザインとJavaScriptでの動的変更

CSSでできること

JavaScript（script）でできること

４．HTMLで作成したゲーム