🏷️ 基本的な HTML 属性
class="クラス名"
要素に名前（クラス）を付けて、CSSでスタイルを適用したり、JavaScriptで操作したりするための属性です。同じクラス名を複数の要素に付けることができます。
💡 使い方： タグの中に class="名前" と書きます。複数のクラスは空白で区切ります。
<div class="box">ボックス</div>
<p class="text-red">赤い文字</p>
<button class="btn btn-primary">ボタン</button>
/* CSS でスタイル適用 */
.box {
background-color: lightblue;
padding: 20px;
}
.text-red {
color: red;
}
✅ 結果： CSSで指定したスタイルが適用されます
💡 ポイント： class名は自由に付けられますが、わかりやすい名前にしましょう（例：btn, container, card）
id="ID名"
要素に一意の識別名を付ける属性です。ページ内で同じIDは1つだけしか使えません。特定の要素を指定するときに使います。
💡 使い方： タグの中に id="名前" と書きます。CSSでは #ID名 で指定します。
<div id="header">ヘッダー</div>
<button id="submit-btn">送信</button>
<section id="about">私について</section>
/* CSS でスタイル適用 */
#header {
background-color: navy;
color: white;
}
#submit-btn {
background-color: green;
}
✅ 結果： 特定の要素だけにスタイルが適用されます
⚠️ 注意： 同じIDを複数の要素に使わないでください！
style="スタイル"
その要素だけに直接CSSスタイルを適用する属性です。簡単にスタイルを適用できますが、多用すると管理が大変になります。
💡 使い方： style="プロパティ: 値;" の形式で書きます。複数のスタイルはセミコロンで区切ります。
<p style="color: red;">赤い文字</p>
<div style="
background-color: lightblue;
padding: 20px;
border-radius: 10px;
font-size: 18px;
">
スタイル付きボックス
</div>
<h1 style="color: #4a90e2; text-align: center;">見出し</h1>
✅ 結果： 指定したスタイルがその要素だけに適用されます
💡 ベストプラクティス： 基本的には外部CSSファイルを使い、styleは一時的な調整にのみ使いましょう
href="URL"
リンク先のURLを指定する属性です。<a>タグと一緒に使います。
💡 使い方： <a href="リンク先">テキスト</a> の形式で書きます。
<!-- 外部サイトへのリンク -->
<a href="https://www.google.com">Googleへ</a>
<!-- 同じサイト内の別ページへのリンク -->
<a href="about.html">私について</a>
<!-- ページ内の特定の場所へのリンク -->
<a href="#section2">セクション2へジャンプ</a>
<!-- メールリンク -->
<a href="mailto:
[email protected]">メールを送る</a>
<!-- 電話リンク -->
<a href="tel:+81-90-1234-5678">電話をかける</a>
✅ 結果： クリックすると指定したURLに移動します
src="ファイルパス"
画像や外部ファイルの場所（パス）を指定する属性です。<img>、<script>、<iframe>などのタグで使います。
💡 使い方： ファイルの場所を正確に指定します。
<!-- 画像を表示 -->
<img src="cat.jpg" alt="猫の写真">
<!-- フォルダ内の画像 -->
<img src="images/logo.png" alt="ロゴ">
<!-- インターネット上の画像 -->
<img src="https://example.com/photo.jpg" alt="写真">
<!-- 外部JavaScriptファイル -->
<script src="script.js"></script>
<!-- YouTube動画の埋め込み -->
<iframe src="https://www.youtube.com/embed/動画ID"></iframe>
✅ 結果： 指定したファイルが読み込まれて表示されます
alt="説明文"
画像が表示できないときの代わりのテキストを指定します。視覚障害者のための読み上げソフトでも使われる重要な属性です。
💡 使い方： <img>タグに必ず付けましょう。画像の内容を説明する文章を書きます。
<img src="sunset.jpg" alt="海に沈む夕日">
<img src="dog.png" alt="公園で遊ぶ犬">
<img src="logo.png" alt="会社のロゴ">
<!-- 装飾的な画像の場合は空にする -->
<img src="decoration.png" alt="">
✅ 結果： 画像が読み込めないときに説明文が表示され、アクセシビリティも向上します
♿ アクセシビリティ： altテキストは目の不自由な方のためにも必須です！
target="_blank"
リンクを新しいタブで開くための属性です。<a>タグと一緒に使います。
💡 使い方： <a>タグに target="_blank" を追加します。セキュリティのため rel="noopener" も一緒に付けましょう。
<!-- 新しいタブで開く -->
<a href="https://www.google.com" target="_blank" rel="noopener">
Googleを新しいタブで開く
</a>
<!-- 同じタブで開く（デフォルト） -->
<a href="page.html">このタブで開く</a>
✅ 結果： リンクをクリックすると新しいタブで開きます
🔒 セキュリティ： target="_blank" を使う時は必ず rel="noopener" を付けてください！
placeholder="ヒント文字"
入力欄に薄く表示されるヒントテキストです。ユーザーが何を入力すべきか教えてくれます。
💡 使い方： <input>や<textarea>タグに付けます。
<input type="text" placeholder="名前を入力してください">
<input type="email" placeholder="
[email protected]">
<input type="password" placeholder="パスワード">
<textarea placeholder="ここにメッセージを入力..."></textarea>
✅ 結果： 入力欄に薄いグレーの文字でヒントが表示されます（入力すると消えます）
disabled
ボタンや入力欄を無効化（クリックや入力ができない状態）にする属性です。値は不要です。
💡 使い方： タグに disabled と書くだけです。
<button disabled>クリックできません</button>
<input type="text" value="編集不可" disabled>
<!-- JavaScriptで動的に無効化 -->
<button id="submitBtn">送信</button>
<script>
document.getElementById('submitBtn').disabled = true;
</script>
✅ 結果： グレーアウトされてクリックや入力ができなくなります
data-* 属性
独自のデータを要素に保存できる属性です。JavaScriptで値を取得して使うことができます。
💡 使い方： data-名前="値" の形式で自由に作れます。
<div data-user-id="12345" data-role="admin">ユーザー情報</div>
<button data-action="delete" data-id="100">削除</button>
<!-- JavaScriptで取得 -->
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId); // "12345"
console.log(div.dataset.role); // "admin"
</script>
✅ 結果： カスタムデータが保存され、JavaScriptから簡単にアクセスできます
📋 メタタグの属性（コード例に出てくる重要属性）
charset="UTF-8"
ページの文字コード（文字の種類）を指定する属性です。UTF-8は日本語を含む世界中の文字を表示できます。これがないと文字化けします。
💡 使い方： <meta charset="UTF-8"> の形で、<head>の最初の方に必ず書きます。
<head>
<meta charset="UTF-8">
<title>私のページ</title>
</head>
✅ 結果： 日本語や絵文字が正しく表示されます（文字化け防止）
⚠️ 重要： これがないと「譁�蟄怜喧縺�」のような文字化けが起こります！必ず書きましょう
name="viewport" content="width=device-width, initial-scale=1.0"
スマホやタブレットでページを正しく表示するための設定です。これがないとスマホで文字が小さく表示されます。
💡 使い方： <head>内に書きます。レスポンシブデザインに必須です。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スマホ対応ページ</title>
</head>
✅ 結果： スマホで見やすいサイズで表示されます
📱 解説： width=device-width（デバイスの幅に合わせる）、initial-scale=1.0（拡大率100%）という意味です
name="description" content="ページの説明"
Googleなどの検索結果に表示されるページの説明文を設定します。SEO（検索エンジン最適化）に重要です。
💡 使い方： content属性にページの内容を簡潔に説明する文章を書きます（120文字程度が目安）。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="初心者向けのHTML/CSS/JavaScript学習サイト。基礎から実践まで丁寧に解説します。">
<title>WebDev Master</title>
</head>
✅ 結果： Google検索結果でタイトルの下にこの説明文が表示されます
🔍 SEO効果： わかりやすい説明を書くと、検索結果のクリック率が上がります
lang="ja"
ページの言語を指定する属性です。検索エンジンや音声読み上げソフトがページの言語を理解するために使います。
💡 使い方： <html>タグに付けます。日本語なら"ja"、英語なら"en"です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本語のページ</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
<!-- 英語のページの場合 -->
<html lang="en">
✅ 結果： 検索エンジンが言語を正しく認識し、音声読み上げも正しい発音になります
🔗 リンクとファイル読み込みの属性
rel="stylesheet"
外部CSSファイルを読み込むための属性です。<link>タグと一緒に使います。
💡 使い方： href属性でCSSファイルの場所を指定し、rel="stylesheet" で「これはスタイルシートだよ」と伝えます。
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<!-- 同じフォルダのCSSファイル -->
<link rel="stylesheet" href="style.css">
<!-- フォルダ内のCSSファイル -->
<link rel="stylesheet" href="css/main.css">
<!-- 外部CDNのCSS -->
<link rel="stylesheet" href="https://cdn.example.com/style.css">
</head>
✅ 結果： CSSファイルが読み込まれて、ページにスタイルが適用されます
💡 ポイント： 複数のCSSファイルを読み込むこともできます（上から順番に適用されます）
rel="preconnect"
外部サイト（Google Fontsなど）への接続を事前に確立して、ページの読み込みを速くする属性です。
💡 使い方： 外部リソースを使う前に、<link rel="preconnect"> で接続を準備します。
<head>
<!-- Google Fontsの読み込みを高速化 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- フォント本体の読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
✅ 結果： フォントなどの外部リソースが速く読み込まれます
⚡ パフォーマンス： 特にGoogle Fontsを使うときは必ず付けましょう！
crossorigin
別のドメイン（外部サイト）からリソースを安全に読み込むための属性です。特にフォントやAPIで使います。
💡 使い方： 外部リソースを読み込むときに付けます。値は不要な場合も多いです。
<head>
<!-- Google Fontsの場合 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 外部の画像やスクリプト -->
<img src="https://example.com/image.jpg" crossorigin="anonymous">
<script src="https://cdn.example.com/script.js" crossorigin></script>
</head>
✅ 結果： 外部リソースが安全に読み込まれます
🔒 セキュリティ： CORSというセキュリティ機能に関連しています
📝 フォームとインタラクションの属性
type="..." （input要素）
入力欄の種類を指定する属性です。テキスト、メール、パスワード、数字など様々な種類があります。
💡 使い方： <input type="種類"> で入力フォームの種類を指定します。
<!-- テキスト入力 -->
<input type="text" placeholder="名前">
<!-- メールアドレス -->
<input type="email" placeholder="
[email protected]">
<!-- パスワード（伏せ字） -->
<input type="password" placeholder="パスワード">
<!-- 数字 -->
<input type="number" min="0" max="100">
<!-- 日付 -->
<input type="date">
<!-- チェックボックス -->
<input type="checkbox"> 同意する
<!-- ラジオボタン -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<!-- ファイル選択 -->
<input type="file">
<!-- 送信ボタン -->
<input type="submit" value="送信">
✅ 結果： 指定した種類の入力欄が表示されます（スマホでは適切なキーボードが出ます）
📱 スマホ対応： type="email" はメール用キーボード、type="number" は数字キーボードが出ます
type="..." （button要素）
ボタンの動作の種類を指定します。送信用、リセット用、通常のボタンの3種類があります。
💡 使い方： <button type="種類"> でボタンの動作を指定します。
<form>
<!-- 通常のボタン（デフォルト） -->
<button type="button" onclick="alert('クリック！')">
クリック
</button>
<!-- フォーム送信ボタン -->
<button type="submit">送信</button>
<!-- フォームリセットボタン -->
<button type="reset">クリア</button>
</form>
✅ 結果： button（何もしない）、submit（フォーム送信）、reset（フォームクリア）の動作になります
onclick="JavaScript コード"
要素がクリックされたときに実行するJavaScriptを直接書ける属性です。簡単な処理に便利です。
💡 使い方： onclick="実行したいコード" の形で書きます。
<!-- アラート表示 -->
<button onclick="alert('こんにちは！')">挨拶</button>
<!-- テキスト変更 -->
<p id="text">元のテキスト</p>
<button onclick="document.getElementById('text').textContent = '変更後のテキスト'">
変更
</button>
<!-- 関数を呼び出す -->
<button onclick="myFunction()">クリック</button>
<script>
function myFunction() {
alert('関数が実行されました！');
}
</script>
✅ 結果： クリックすると指定したJavaScriptが実行されます
💡 ベストプラクティス： 複雑な処理はJavaScriptファイルに書いて、addEventListener を使う方が管理しやすいです
value="値"
入力欄やボタンの初期値を設定する属性です。
💡 使い方： value属性で初期値を設定します。
<!-- 入力欄の初期値 -->
<input type="text" value="初期テキスト">
<!-- 編集不可の値 -->
<input type="text" value="編集不可" readonly>
<!-- ボタンのテキスト -->
<input type="submit" value="送信する">
<input type="button" value="クリック" onclick="alert('押されました')">
<!-- 隠しデータ -->
<input type="hidden" name="user_id" value="12345">
✅ 結果： 指定した値が入力欄に表示されます
name="名前"
フォーム送信時にデータの名前を指定する属性です。サーバーにデータを送るときに使います。
💡 使い方： 入力欄に name属性を付けると、その名前でデータが送信されます。
<form action="/submit" method="POST">
<input type="text" name="username" placeholder="ユーザー名">
<input type="email" name="email" placeholder="メール">
<input type="password" name="password" placeholder="パスワード">
<!-- ラジオボタンは同じname -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<button type="submit">送信</button>
</form>
<!-- 送信されるデータ -->
<!-- username=入力値&email=入力値&password=入力値&gender=male または female -->
✅ 結果： フォーム送信時に name="値" の形式でデータが送られます
🖼️ 画像とメディアの属性
width="幅" height="高さ"
画像やメディアのサイズを指定する属性です。ピクセル単位で指定します。
💡 使い方： width（幅）とheight（高さ）を数値で指定します。
<!-- 固定サイズの画像 -->
<img src="photo.jpg" alt="写真" width="300" height="200">
<!-- 幅だけ指定（高さは自動調整） -->
<img src="photo.jpg" alt="写真" width="500">
<!-- YouTube動画の埋め込み -->
<iframe
src="https://www.youtube.com/embed/動画ID"
width="560"
height="315"
frameborder="0"
></iframe>
✅ 結果： 指定したサイズで画像が表示されます
💡 レスポンシブ対応： CSSで max-width: 100% を指定すると、スマホでもはみ出さなくなります
loading="lazy"
画像の遅延読み込み（スクロールして見える位置に来たら読み込む）を有効にする属性です。ページの読み込みが速くなります。
💡 使い方： <img>タグに loading="lazy" を追加するだけです。
<!-- 遅延読み込み -->
<img src="photo1.jpg" alt="写真1" loading="lazy">
<img src="photo2.jpg" alt="写真2" loading="lazy">
<img src="photo3.jpg" alt="写真3" loading="lazy">
<!-- すぐに読み込む（デフォルト） -->
<img src="main-image.jpg" alt="メイン画像" loading="eager">
✅ 結果： スクロールして画像が見える位置に来たときに初めて読み込まれ、ページが速くなります
⚡ パフォーマンス： たくさん画像があるページでは必ず使いましょう！
📋 フォームの詳細属性（入力検証・制御）
action="送信先URL" method="送信方法"
フォームのデータをどこに、どのように送信するかを指定します。action は送信先、method は送信方法（GET または POST）です。
💡 使い方： <form> タグに action と method を指定します。
<!-- POSTで送信（推奨：パスワードなど） -->
<form action="/login" method="POST">
<input type="text" name="username" placeholder="ユーザー名">
<input type="password" name="password" placeholder="パスワード">
<button type="submit">ログイン</button>
</form>
<!-- GETで送信（検索など） -->
<form action="/search" method="GET">
<input type="text" name="q" placeholder="検索キーワード">
<button type="submit">検索</button>
</form>
<!-- URLが /search?q=入力値 になる -->
✅ 結果： フォーム送信時に指定したURLにデータが送られます
🔒 セキュリティ： パスワードなどの機密情報は必ずPOSTを使いましょう（GETはURLに表示されます）
required
入力必須にする属性です。空欄のままフォーム送信しようとするとエラーメッセージが出ます。
💡 使い方： 入力欄に required と書くだけです（値は不要）。
<form>
<!-- 必須項目 -->
<input type="text" name="name" placeholder="名前（必須）" required>
<input type="email" name="email" placeholder="メール（必須）" required>
<!-- 任意項目 -->
<input type="tel" name="phone" placeholder="電話番号（任意）">
<button type="submit">送信</button>
</form>
✅ 結果： 空欄のまま送信しようとすると「このフィールドを入力してください」とエラーが出ます
✨ 便利： JavaScriptを書かなくても入力チェックができます
readonly
入力欄を読み取り専用（編集不可）にします。値は表示されますが変更できません。
💡 使い方： 入力欄に readonly と書きます。
<!-- 編集不可の入力欄 -->
<input type="text" value="変更できません" readonly>
<!-- 例：ユーザーIDなど -->
<label>ユーザーID:</label>
<input type="text" value="USER12345" readonly>
<label>変更可能な項目:</label>
<input type="text" value="変更できます">
✅ 結果： 値は表示されますが、クリックしても編集できません（グレーアウトせず選択はできます）
💡 disabled との違い： readonly はフォーム送信時にデータが送られますが、disabled は送られません
maxlength="最大文字数" minlength="最小文字数"
入力できる文字数の上限・下限を設定します。
💡 使い方： 数値で最大・最小文字数を指定します。
<!-- 最大10文字 -->
<input type="text" maxlength="10" placeholder="10文字まで">
<!-- 最小8文字、最大20文字 -->
<input type="password" minlength="8" maxlength="20" placeholder="パスワード（8〜20文字）" required>
<!-- ツイート風（140文字まで） -->
<textarea maxlength="140" placeholder="140文字まで入力できます"></textarea>
✅ 結果： maxlength を超えて入力できなくなり、minlength 未満だと送信時にエラーが出ます
min="最小値" max="最大値" step="増減単位"
数値入力や日付入力の範囲と増減の単位を設定します。
💡 使い方： type="number" や type="date" と一緒に使います。
<!-- 年齢（0〜120歳） -->
<input type="number" min="0" max="120" placeholder="年齢">
<!-- 価格（100円単位） -->
<input type="number" min="0" step="100" placeholder="価格">
<!-- 日付範囲指定 -->
<label>予約日:</label>
<input type="date" min="2025-01-01" max="2025-12-31">
<!-- 時刻（30分単位） -->
<input type="time" step="1800">
✅ 結果： 範囲外の値は入力できず、step で指定した単位で増減します
pattern="正規表現"
入力形式のルールを正規表現で指定します。電話番号や郵便番号などの形式チェックに使います。
💡 使い方： pattern属性に正規表現パターンを書きます。
<!-- 郵便番号（123-4567形式） -->
<input type="text" pattern="\d{3}-\d{4}" placeholder="123-4567" title="123-4567の形式で入力してください">
<!-- 電話番号（数字のみ、10〜11桁） -->
<input type="tel" pattern="\d{10,11}" placeholder="09012345678">
<!-- 英数字のみ（8文字以上） -->
<input type="text" pattern="[A-Za-z0-9]{8,}" placeholder="ユーザーID">
<!-- カタカナのみ -->
<input type="text" pattern="[ァ-ヴー]+" placeholder="フリガナ">
✅ 結果： パターンに合わない入力をすると送信時にエラーメッセージが表示されます
💡 ヒント： title属性で詳しい説明を書くと、エラー時に表示されます
autocomplete="on/off"
ブラウザの自動入力補完機能のオン・オフを切り替えます。
💡 使い方： "on"（有効）または "off"（無効）、特定の値（"email"、"username"など）を指定します。
<!-- 自動補完を有効に -->
<input type="text" name="name" autocomplete="name" placeholder="名前">
<input type="email" name="email" autocomplete="email" placeholder="メール">
<!-- 自動補完を無効に（セキュリティ重視） -->
<input type="password" autocomplete="off" placeholder="パスワード">
<input type="text" autocomplete="off" placeholder="ワンタイムコード">
<!-- 住所の自動補完 -->
<input type="text" autocomplete="postal-code" placeholder="郵便番号">
<input type="text" autocomplete="address-line1" placeholder="住所">
✅ 結果： ブラウザが過去の入力を記憶して自動補完します（offの場合は補完されません）
autofocus
ページ読み込み時に自動的にその入力欄にフォーカス（カーソルが入る）します。
💡 使い方： 入力欄に autofocus と書くだけです。
<!-- ページを開いたらすぐ入力できる -->
<form>
<input type="text" name="search" placeholder="検索..." autofocus>
<button type="submit">検索</button>
</form>
✅ 結果： ページを開いた瞬間、自動的にこの入力欄にカーソルが入ります
⚠️ 注意： 1ページに1つだけ使いましょう。複数あると最初の1つだけが有効になります
accept="ファイル種類"
ファイル選択時に選べるファイルの種類を制限します。
💡 使い方： type="file" の入力欄で、受け入れるファイル形式を指定します。
<!-- 画像のみ -->
<input type="file" accept="image/*">
<!-- JPEGとPNGのみ -->
<input type="file" accept="image/jpeg, image/png">
<!-- PDFのみ -->
<input type="file" accept="application/pdf">
<!-- 動画のみ -->
<input type="file" accept="video/*">
<!-- Excelファイル -->
<input type="file" accept=".xlsx, .xls">
✅ 結果： ファイル選択ダイアログで指定した種類のファイルだけが選べるようになります
multiple
複数のファイルや選択肢を選べるようにします。
💡 使い方： type="file" や <select> に multiple と書きます。
<!-- 複数ファイル選択 -->
<input type="file" multiple accept="image/*">
<!-- 複数メールアドレス -->
<input type="email" multiple placeholder="カンマ区切りでメールアドレス">
<!-- 複数選択リスト -->
<select multiple name="hobbies" size="5">
<option value="reading">読書</option>
<option value="music">音楽</option>
<option value="sports">スポーツ</option>
<option value="travel">旅行</option>
</select>
✅ 結果： Ctrl（Mac: Command）を押しながら複数選択できます
rows="行数" cols="列数"
テキストエリア（複数行入力欄）のサイズを指定します。
💡 使い方： <textarea> に rows（行数）と cols（列数）を指定します。
<!-- 5行×30列のテキストエリア -->
<textarea rows="5" cols="30" placeholder="メッセージを入力..."></textarea>
<!-- 大きなテキストエリア -->
<textarea rows="10" cols="50" placeholder="詳細な説明..."></textarea>
✅ 結果： 指定したサイズのテキストエリアが表示されます
💡 補足： CSSでwidth と height を指定する方が一般的です
🏷️ ラベルとアクセシビリティの属性
for="入力欄のID"
ラベル（説明文）と入力欄を関連付ける属性です。ラベルをクリックすると入力欄にフォーカスします。
💡 使い方： <label for="ID"> と <input id="ID"> を同じIDで結びつけます。
<!-- ラベルをクリックすると入力欄にカーソルが入る -->
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
<!-- チェックボックスの例 -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">利用規約に同意します</label>
<!-- ラベルをクリックするとチェックが入る -->
<!-- ラジオボタンの例 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
✅ 結果： ラベルをクリックすると入力欄が選択され、使いやすくなります
♿ アクセシビリティ： 視覚障害者のためにも必ず付けましょう
title="説明文"
マウスを載せたときに表示されるツールチップ（説明）を設定します。
💡 使い方： どの要素にも title属性を付けられます。
<!-- ボタンに説明 -->
<button title="このボタンをクリックすると送信されます">送信</button>
<!-- 画像に説明 -->
<img src="icon.png" alt="設定" title="設定画面を開く">
<!-- 略語の説明 -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- リンクに詳細説明 -->
<a href="https://example.com" title="外部サイトに移動します">詳しくはこちら</a>
✅ 結果： マウスを載せると黄色い吹き出しで説明が表示されます
tabindex="順番"
Tabキーで移動する順番を指定します。
💡 使い方： 数値で順番を指定します（1, 2, 3...）。0は最後、-1は無効です。
<!-- Tab キーで 1 → 2 → 3 の順に移動 -->
<input type="text" tabindex="1" placeholder="最初">
<input type="text" tabindex="3" placeholder="3番目">
<input type="text" tabindex="2" placeholder="2番目">
<!-- Tabキーで移動できないようにする -->
<button tabindex="-1">無効なボタン</button>
✅ 結果： Tabキーで指定した順番に入力欄を移動できます
role="役割" aria-*="値"
スクリーンリーダー（視覚障害者用の読み上げソフト）に要素の役割を伝えるアクセシビリティ属性です。
💡 使い方： role で役割を、aria-* で追加情報を指定します。
<!-- ナビゲーション -->
<nav role="navigation" aria-label="メインメニュー">
<a href="#">ホーム</a>
<a href="#">について</a>
</nav>
<!-- ボタンの状態 -->
<button role="button" aria-pressed="false">トグル</button>
<!-- 必須項目の明示 -->
<input type="text" aria-required="true" placeholder="名前（必須）">
<!-- 説明を関連付け -->
<input type="password" aria-describedby="password-help">
<span id="password-help">8文字以上で入力してください</span>
<!-- ローディング状態 -->
<div role="status" aria-live="polite">読み込み中...</div>
✅ 結果： スクリーンリーダーが要素の役割や状態を正しく読み上げます
♿ 重要： アクセシビリティ向上のために、特にWebアプリでは重要です
🎬 動画・音声の属性
autoplay
動画や音声を自動再生します。
💡 使い方： <video> や <audio> に autoplay と書きます。
<!-- 自動再生（音声あり） -->
<video src="movie.mp4" autoplay></video>
<!-- 自動再生（音声なし） ※推奨 -->
<video src="movie.mp4" autoplay muted></video>
<!-- 音声の自動再生 -->
<audio src="music.mp3" autoplay></audio>
✅ 結果： ページを開くと自動的に再生が始まります
⚠️ 注意： 多くのブラウザは音声ありの自動再生をブロックします。muted（消音）と併用しましょう
controls
動画や音声の再生コントロール（再生ボタン、音量など）を表示します。
💡 使い方： controls と書くだけです。
<!-- コントロール付き動画 -->
<video src="movie.mp4" controls width="640" height="360"></video>
<!-- コントロール付き音声 -->
<audio src="podcast.mp3" controls></audio>
✅ 結果： 再生・一時停止・音量調整などのコントロールバーが表示されます
loop
動画や音声をループ再生（繰り返し再生）します。
💡 使い方： loop と書くだけです。
<!-- 無限ループ動画 -->
<video src="background.mp4" autoplay loop muted></video>
<!-- BGMのループ -->
<audio src="bgm.mp3" autoplay loop></audio>
✅ 結果： 再生が終わると自動的に最初から再び再生されます
muted
動画や音声を消音（ミュート）にします。
💡 使い方： muted と書くだけです。
<!-- 消音で自動再生 -->
<video src="promo.mp4" autoplay muted loop></video>
✅ 結果： 音声なしで再生されます
poster="画像URL"
動画の再生前に表示されるサムネイル画像を指定します。
💡 使い方： poster属性に画像のURLを指定します。
<video src="movie.mp4" controls poster="thumbnail.jpg" width="640"></video>
✅ 結果： 再生前に指定した画像が表示されます
preload="読み込み方法"
動画の事前読み込み方法を指定します。
💡 使い方： "none"（読み込まない）、"metadata"（メタデータのみ）、"auto"（全て読み込む）のいずれかを指定します。
<!-- メタデータだけ読み込む -->
<video src="movie.mp4" controls preload="metadata"></video>
<!-- 全て読み込む -->
<video src="movie.mp4" controls preload="auto"></video>
<!-- 読み込まない -->
<video src="movie.mp4" controls preload="none"></video>
✅ 結果： 指定した方法で動画を読み込みます
⚙️ スクリプトとリンクの高度な属性
async / defer
JavaScriptファイルの読み込み方法を制御します。ページの表示速度が向上します。
💡 使い方： <script> タグに async または defer を付けます。
<!-- 非同期読み込み（順番は保証されない） -->
<script src="analytics.js" async></script>
<!-- 遅延読み込み（HTMLパース後に実行、順番保証） -->
<script src="app.js" defer></script>
<!-- 通常の読み込み（ページ表示をブロック） -->
<script src="old-script.js"></script>
✅ 結果： async/defer を使うとページ表示が速くなります
⚡ 推奨： 基本的に defer を使いましょう。順番が重要でないスクリプトには async を使います
download="ファイル名"
リンクをクリックしたときに、ページ遷移せずにファイルをダウンロードします。
💡 使い方： <a> タグに download属性を付けます。
<!-- ファイルをダウンロード -->
<a href="document.pdf" download>PDFをダウンロード</a>
<!-- ダウンロード時のファイル名を指定 -->
<a href="report-2025.pdf" download="年次レポート.pdf">レポートをダウンロード</a>
<!-- 画像のダウンロード -->
<a href="photo.jpg" download="my-photo.jpg">画像を保存</a>
✅ 結果： クリックするとファイルがダウンロードされます
📊 テーブルの属性
colspan="列数" rowspan="行数"
テーブルのセル（マス）を結合します。colspan は横方向、rowspan は縦方向の結合です。
💡 使い方： <td> や <th> に colspan/rowspan で結合する数を指定します。
<table border="1">
<tr>
<th colspan="2">2列結合の見出し</th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td rowspan="2">2行結合</td>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
</tr>
</table>
✅ 結果： セルが結合されて1つの大きなセルになります
scope="範囲"
テーブルの見出しセルが行・列のどちらの見出しかを明示します（アクセシビリティ向上）。
💡 使い方： <th> に scope="row" または scope="col" を指定します。
<table>
<tr>
<th scope="col">名前</th>
<th scope="col">年齢</th>
</tr>
<tr>
<th scope="row">太郎</th>
<td>20歳</td>
</tr>
</table>
✅ 結果： スクリーンリーダーがテーブルを正しく読み上げます
🎭 その他の便利な属性
contenteditable="true"
どの要素でも編集可能にします。クリックして直接テキストを編集できます。
💡 使い方： どの要素にも contenteditable="true" を付けられます。
<!-- 編集可能な見出し -->
<h1 contenteditable="true">このテキストは編集できます</h1>
<!-- 編集可能なメモエリア -->
<div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 100px;">
ここにメモを書けます
</div>
✅ 結果： クリックすると直接テキストを編集できます
draggable="true"
要素をドラッグ&ドロップできるようにします。
💡 使い方： draggable="true" を付けます。
<!-- ドラッグ可能な要素 -->
<div draggable="true" style="background: lightblue; padding: 20px; width: 100px;">
ドラッグできます
</div>
✅ 結果： 要素をドラッグできます（JavaScriptで処理を追加すると完全なドラッグ&ドロップが実現できます）
hidden
要素を非表示にします（DOMには存在するが画面に表示されない）。
💡 使い方： hidden と書くだけです。
<!-- 最初は非表示 -->
<div id="secret" hidden>
隠された内容
</div>
<button onclick="document.getElementById('secret').hidden = false">
表示する
</button>
✅ 結果： 要素が完全に非表示になります
💡 CSS の display: none との違い： hidden は意味的に「存在しない」、display: none は単に「見えない」です
spellcheck="true/false"
スペルチェック機能のオン・オフを切り替えます。
💡 使い方： 入力欄に spellcheck="true" または "false" を指定します。
<!-- スペルチェック有効 -->
<textarea spellcheck="true" placeholder="英語のテキスト..."></textarea>
<!-- スペルチェック無効（コード入力など） -->
<textarea spellcheck="false" placeholder="コードを入力..."></textarea>
✅ 結果： スペルミスがあると赤い波線が表示されます（有効時）
translate="yes/no"
ブラウザの自動翻訳機能で翻訳するかどうかを指定します。
💡 使い方： translate="no" で翻訳を防ぎます。
<!-- 翻訳しない（ブランド名など） -->
<h1 translate="no">WebDev Master</h1>
<!-- 翻訳する（通常のテキスト） -->
<p translate="yes">これは翻訳されます</p>
✅ 結果： Google翻訳などで translate="no" の部分は翻訳されません
frameborder="0" allowfullscreen
iframe（他のページの埋め込み）の枠線と全画面表示を制御します。
💡 使い方： <iframe> に frameborder と allowfullscreen を指定します。
<!-- YouTube動画の埋め込み -->
<iframe
src="https://www.youtube.com/embed/動画ID"
width="560"
height="315"
frameborder="0"
allowfullscreen
></iframe>
<!-- Google マップの埋め込み -->
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450"
frameborder="0"
></iframe>
✅ 結果： 枠線なしで埋め込まれ、全画面表示ボタンが使えます