🌐 1. ドキュメントの基本構造
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
<meta charset="UTF-8">
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
<!DOCTYPE html>：HTML5を使う宣言
<html>：HTML文書全体を囲む
<head>：メタ情報（文字コード、タイトル、CSSなど）
<body>：実際にブラウザに表示されるコンテンツ
📝 2. テキスト関連
<h1>〜<h6> 見出し（数字が小さいほど重要）
<p> 段落
<br> 改行（空の要素）
<strong> 強調（太字）
<em> 強調（イタリック）
<span> インライン要素（装飾用など）
<hr> 区切り線（水平線）
📋3. リスト
<ul> 順序なしリスト（●など）
<ol> 順序付きリスト（1. 2. 3.）
<li> リスト項目
🔗 4. リンク & メディア
<a href=""> ハイパーリンク
<img src=""> 画像表示
<video> / <audio> 動画・音声の埋め込み
<iframe> 別ページの埋め込み（例：YouTube）
📦 5. レイアウト・構造
<div> ブロック要素のコンテナ（レイアウトに使う）
<section> セクション（意味的な区切り）
<article> 記事など独立した内容
<header> ページやセクションのヘッダー
<footer> フッター
<nav> ナビゲーションリンク
<main> メインコンテンツ
🧾 6. フォーム
<form> フォーム全体を囲む
<input> ユーザー入力欄（type属性で種類が変わる）
<textarea> 複数行の入力欄
<button> ボタン
<select> + <option> プルダウンメニュー
<label> 入力欄のラベル指定
🎨 7. テーブル（表）
タグ 説明
<table> 表全体
<tr> 表の行
<th> 表のヘッダーセル（太字、中央揃え）
<td> 表のデータセル
🧩 8. その他
<details> + <summary> 開閉可能な詳細表示
<code> コードの表示（等幅フォント）
<pre> 整形済みテキスト（スペース・改行保持）
<script> JavaScriptの埋め込み
<style> CSSの埋め込み
サンプル
✅ 1. テキスト表示（見出しと段落）
🧱 通常HTML
<h1>こんにちは！</h1>
<p>これは普通のHTMLです。</p>
🧩 Vue版（テンプレート内）
<template>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
title: 'こんにちは！',
message: 'これはVueで表示した段落です。'
};
}
}
</script>
✅ 2. ボタン + クリックイベント
🧱 通常HTML + JavaScript
<button onclick="alert('クリックされました')">クリック</button>
🧩 Vue版
コピーする
編集する
<template>
<button @click="showAlert">クリック</button>
</template>
<script>
export default {
methods: {
showAlert() {
alert('クリックされました');
}
}
}
</script>
✅ 3. フォーム入力 + バインディング
🧱 通常HTML + JavaScript
<input type="text" id="name" oninput="document.getElementById('output').textContent = this.value">
<p id="output"></p>
🧩 Vue版（双方向バインディング）
<template>
<input type="text" v-model="name">
<p>{{ name }}</p>
</template>
<script>
export default {
data() {
return {
name: ''
};
}
}
</script>
✅ 4. 配列からリストを表示
🧱 通常HTML（配列のループはJavaScriptで）
<ul id="list"></ul>
<script>
const fruits = ['りんご', 'バナナ', 'みかん'];
const ul = document.getElementById('list');
fruits.forEach(fruit => {
const li = document.createElement('li');
li.textContent = fruit;
ul.appendChild(li);
});
</script>
🧩 Vue版（v-for で簡単ループ）
<template>
<ul>
<li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['りんご', 'バナナ', 'みかん']
};
}
}
</script>
✅ 5. 条件表示（if文）
🧱 通常HTML + JavaScript
<p id="message" style="display: none;">条件が満たされました！</p>
<script>
const show = true;
if (show) {
document.getElementById('message').style.display = 'block';
}
</script>
🧩 Vue版（v-if）
<template>
<p v-if="show">条件が満たされました！</p>
</template>
<script>
export default {
data() {
return {
show: true
};
}
}
</script>