HTML5の主な新機能

セマンティック要素（★★）

従来は <div> を多用していたが、HTML5では意味を持たせたタグが導入された。これによりSEOやアクセシビリティが向上する。

• <header>：ページまたはセクションのヘッダー
• <nav>：ナビゲーションリンク群
• <article>：独立したコンテンツ（ブログ記事など）
• <section>：文書内の一般的なセクション
• <aside>：サイドバーなどの補足コンテンツ
• <footer>：フッター情報

マルチメディア要素

動画要素 <video>（★★★）

MP4形式を推奨。複数フォーマット対応のための互換性記述も可能。

<video controls width="400">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  動画再生に対応していません。
</video>

主な属性：

• autoplay：自動再生（Chromeではmuted必須）
• muted：ミュート再生
• loop：ループ再生
• poster：サムネイル画像

音声要素 <audio>

MP3形式を推奨。記述方法は<video>とほぼ同じ。

<audio controls>
  <source src="bgm.mp3" type="audio/mpeg">
  <source src="bgm.ogg" type="audio/ogg">
  音声再生に対応していません。
</audio>

フォームの新入力タイプ（★★）

HTML5では入力バリデーションをブラウザ側で支援する新しいtype属性が追加された。

<form>
  <input type="email" placeholder="メールアドレス">
  <input type="url" placeholder="URL">
  <input type="date">
  <input type="number" min="0" max="100">
  <input type="tel" placeholder="電話番号">
  <input type="search" placeholder="検索">
  <input type="color">
</form>

特に実用性が高いのは number、tel、search の3つ。

CSS3の主な新機能

属性セレクタ（★★）

要素の属性値に基づいて選択可能。

/* type="text" の input 要素 */
input[type="text"] { border: 1px solid #ccc; }

/* class が "icon-" で始まる div */
div[class^="icon"] { display: inline-block; }

/* class が "-data" で終わる section */
section[class$="data"] { padding: 1rem; }

構造擬似クラスセレクタ

• :first-child：最初の子要素
• :last-child：最後の子要素
• :nth-child(n)：n番目の子要素（odd, even, -n+3なども可）

:nth-child() と :nth-of-type() の違い：

• :nth-child(2)：親の2番目の子が対象（タグ名に関係なく）
• li:nth-of-type(2)：li要素の中で2番目のもののみ

擬似要素セレクタ（★★★）

::before と ::after で仮想的な要素を挿入可能。コンテンツ生成に必須の content プロパティが必要。

.box::before {
  content: "▶";
  color: red;
}

実用例1：フォントアイコン

@font-face {
  font-family: 'MyIcon';
  src: url('icon.woff2') format('woff2');
}

.icon::after {
  font-family: 'MyIcon';
  content: '\e001';
  position: absolute;
  right: 10px;
}

実用例2：ホバーエフェクト（例：動画プレビュー）

.video-card {
  position: relative;
}
.video-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5) center/24px no-repeat;
  display: none;
}
.video-card:hover::before {
  display: block;
}

実用例3：floatクリア

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

ボックスモデルの制御（★★★）

box-sizing プロパティで幅の計算方法を変更可能。

• content-box（初期値）：width = コンテンツ幅
• border-box：width = コンテンツ + padding + border

* {
  box-sizing: border-box;
}

その他の便利機能（★）

• フィルター効果：filter: blur(4px); などでぼかしや彩度調整が可能
• 動的計算：width: calc(100% - 32px); で四則演算による値指定

トランジション（★★★）

状態変化時の滑らかなアニメーションをCSSのみで実現。

.button {
  background: #007bff;
  transition: background 0.3s ease;
}
.button:hover {
  background: #0056b3;
}

構文：
transition: [プロパティ] [時間] [タイミング関数] [遅延];

全プロパティに適用する場合は all を指定。省略可能なパラメータあり。