初めてホームページを作る方へ

### 1. **基本的なHTMLのテンプレート**
基本的なHTML文書の構造です。これはWebページを作成する際の出発点として使えます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本的なHTMLテンプレート</title>
</head>
<body>
    <header>
        <h1>ウェブページのタイトル</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">アバウト</a></li>
                <li><a href="#contact">コンタクト</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>ホームセクション</h2>
            <p>こちらはホームセクションのコンテンツです。</p>
        </section>

        <section id="about">
            <h2>アバウトセクション</h2>
            <p>こちらはアバウトセクションのコンテンツです。</p>
        </section>

        <section id="contact">
            <h2>コンタクトセクション</h2>
            <p>こちらはコンタクトセクションのコンテンツです。</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 あなたの会社名</p>
    </footer>
</body>
</html>
```

### 2. **フォームの基本的な構造**
ユーザー入力を受け付けるためのフォームのコードです。

```html
<form action="/submit" method="POST">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required><br><br>

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

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

### 3. **画像の埋め込み**
Webページに画像を埋め込むためのコードです。

```html
<img src="example.jpg" alt="サンプル画像" width="600" height="400">
```

### 4. **リストの作成**
順序付きリストと順序なしリストの例です。

```html
<h2>順序付きリスト</h2>
<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

<h2>順序なしリスト</h2>
<ul>
    <li>アイテムA</li>
    <li>アイテムB</li>
    <li>アイテムC</li>
</ul>
```

### 5. **リンクの作成**
外部サイトや他のページへのリンクを作成するコードです。

```html
<a href="https://www.example.com" target="_blank">外部リンク</a>
<a href="#about">アバウトセクションにジャンプ</a>
```

### 6. **テーブルの作成**
データを表形式で表示するためのテーブルの例です。

```html
<table border="1">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>国</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>佐藤太郎</td>
            <td>30</td>
            <td>日本</td>
        </tr>
        <tr>
            <td>ジョン・ドウ</td>
            <td>25</td>
            <td>アメリカ</td>
        </tr>
    </tbody>
</table>
```

### 7. **埋め込む動画（YouTube）**
YouTubeの動画をWebページに埋め込むためのコードです。

```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
実際に存在しないYoutubeのURLです。
```

### 8. **音声ファイルの埋め込み**
Webページに音声ファイルを埋め込むためのコードです。

```html
<audio controls>
    <source src="audiofile.mp3" type="audio/mp3">
    お使いのブラウザは音声をサポートしていません。
</audio>
```

### 9. **モーダルウィンドウ（ポップアップ）**
ボタンをクリックするとモーダルウィンドウ（ポップアップ）が表示されるコードです。

```html
<button id="openModal">モーダルを開く</button>

<div id="modal" style="display:none;">
    <div>
        <h2>モーダルウィンドウ</h2>
        <p>ここにコンテンツが入ります。</p>
        <button id="closeModal">閉じる</button>
    </div>
</div>

<script>
    document.getElementById('openModal').onclick = function() {
        document.getElementById('modal').style.display = 'block';
    };
    document.getElementById('closeModal').onclick = function() {
        document.getElementById('modal').style.display = 'none';
    };
</script>
```

### 10. **画像のギャラリー（Lightbox風）**
画像をクリックすると拡大して表示するギャラリーの基本例です。

```html
<div class="gallery">
    <a href="image1_large.jpg">
        <img src="image1_thumb.jpg" alt="サムネイル1">
    </a>
    <a href="image2_large.jpg">
        <img src="image2_thumb.jpg" alt="サムネイル2">
    </a>
    <a href="image3_large.jpg">
        <img src="image3_thumb.jpg" alt="サムネイル3">
    </a>
</div>
```

質問があったらどうぞコメント欄へ書いてください。(全部答えられるわけでわございません)m(__)m