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>© 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