1. 基本的なHTMLのテンプレート

基本的なHTML文書の構造です。これはWebページを作成する際の出発点として使えます。

<!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. フォームの基本的な構造

ユーザー入力を受け付けるためのフォームのコードです。

<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ページに画像を埋め込むためのコードです。

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

4. リストの作成

順序付きリストと順序なしリストの例です。

<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. リンクの作成

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

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

6. テーブルの作成

データを表形式で表示するためのテーブルの例です。

<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ページに埋め込むためのコードです。

<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ページに音声ファイルを埋め込むためのコードです。

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

9. モーダルウィンドウ（ポップアップ）

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

<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風）

画像をクリックすると拡大して表示するギャラリーの基本例です。

<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