メインコンテンツ
` の子孫の `` |
+| 子結合子 | `p > span` | ` ` の直接の子の `` |
+
+詳しくは [MDN: CSSセレクタ](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_selectors#%E7%B5%90%E5%90%88%E5%AD%90)。
+
+#### 3-4-2. 疑似表記
+
+HTMLに書かれていない情報（ホバー状態など）も使って要素を選択できます。
+
+| 種類 | 表記 | 例 |
+| ---- | ---- | ---- |
+| 擬似クラス | `:hover` など | `.reaction:hover` |
+| 疑似要素 | `::first-letter` など | `p::first-letter` |
+
+
+
+
+> **Try（目安: 5分）**: リンクまたはボタンに `:hover` を指定し、マウスポインタを重ねたときだけ文字色か背景色が変わるようにしましょう。
+>
+> 完成条件: 通常時とホバー時で見た目が変わる。
+
+### 3-5. 思いどおりの見た目を作ろう
+
+#### 3-5-1. CSSカスタムプロパティ
+
+JavaScript の定数のように使える仕組みです。プロパティ名は `--` で始めます。
+
+```css
+:root {
+ --color-greeting: #668844;
+}
+
+h1 {
+ color: var(--color-greeting);
+}
+```
+
+`:root` はルート要素を指す擬似クラスです。ここで宣言すると文書全体から使えるようになります。
+
+
+
+##### 発展: カスタムプロパティを使うと何が嬉しい？
+
+- **意味を名前で伝えられる**: `#668844` よりも `--color-greeting` の方が読み手にとって意図が分かりやすいです。
+- **一括変更がラク**: 色を全体的に変えたいとき、`:root` の宣言1箇所を直すだけで済みます。
+- **テーマ切り替えに使える**: ダークモード用に `:root` の値を上書きするだけでテーマを切り替えられます。
+
+#### 3-5-2. 文字の見た目
+
+| プロパティ | 影響箇所 | 実行結果 |
+| ---- | ---- | ---- |
+| `color` | 色 |  |
+| `font-size` | 大きさ |  |
+| `font-weight` | 太さ |  |
+| `font-style` | 斜体 |  |
+| `text-decoration` | 線 |  |
+| `font-family` | フォント |  |
+
+#### 3-5-3. 要素の見た目
+
+| プロパティ | 影響箇所 | 実行結果 |
+| ---- | ---- | ---- |
+| `background-color` | 背景色 |  |
+| `background-image` | 背景画像 |  |
+| `background-size` | 背景画像の大きさ |  |
+| `background-repeat` | 背景画像の繰り返し |  |
+| `background-position` | 背景画像の位置 |  |
+| `background-blend-mode` | 背景色と背景画像の混色 |  |
+| `border` | 境界線 |  |
+| `border-radius` | 角の丸め |  |
+
+詳細は [MDN web docs](https://developer.mozilla.org/ja/docs/Web/CSS) や検索を活用してください。
+
+#### 3-5-4. 形をつくろう
+
+CSSで作れる形のサンプルです。
+
+ ヘッダー メインコンテンツ ヘッダー メインコンテンツ ` 要素の中に ` ` の中に block 要素は入れられない仕様（パーサーが暗黙に `
+
+
+
+
+### 3-6. 思いどおりに配置しよう
+
+レイアウトの主役は **グリッドレイアウト** と **フレックスボックス** の2つです。
+以下のHTMLに対して、両方の方法で聖杯レイアウトを実装してみます。
+
+```html
+
+ 楕円 / 角丸四角形 / 吹き出し のサンプルCSS
+
+```css
+/* 楕円 */
+div {
+ width: 300px;
+ height: 200px;
+ background-color: lightblue;
+ border-radius: 50%;
+}
+```
+
+```css
+/* 角丸四角形 */
+div {
+ width: 300px;
+ height: 200px;
+ background-color: lightblue;
+ border-radius: 100vh;
+}
+```
+
+```css
+/* 吹き出し */
+* { box-sizing: border-box; }
+
+div {
+ width: 300px;
+ height: 200px;
+ position: relative;
+ background-color: #add8e6;
+ border: 5px solid midnightblue;
+ border-radius: 20px;
+}
+
+div::before {
+ box-sizing: border-box;
+ content: '';
+ position: absolute;
+ top: 195px;
+ left: 20px;
+ border: 10px solid;
+ border-color: midnightblue transparent transparent transparent;
+}
+
+div::after {
+ box-sizing: border-box;
+ content: '';
+ position: absolute;
+ top: 190px;
+ left: 22px;
+ border: 8px solid;
+ border-color: lightblue transparent transparent transparent;
+}
+```
+
+` で囲みます。
+
+```html
+
+
+
+
+
+
+```
+
+```css
+* { box-sizing: border-box; margin: 0; }
+
+body { display: flex; flex-direction: column; }
+
+header { height: 40px; background-color: lightblue; }
+.mid { display: flex; }
+aside#left { width: 200px; background-color: lightsalmon; }
+main { height: calc(100vh - 80px); width: 100%; background-color: lightgreen; }
+aside#right { width: 200px; background-color: lightsalmon; }
+footer { height: 40px; background-color: lightblue; }
+```
+
+
+
+練習用ゲーム: [Flexbox Froggy](https://flexboxfroggy.com/#ja)
+
+#### グリッドとフレックスのどちらを使うか
+
+| 観点 | グリッド | フレックス |
+| ---- | ---- | ---- |
+| 次元 | 2次元 | 1次元 |
+| HTMLの構造 | シンプル | ネストが増えやすい |
+| 得意なケース | ページ全体のレイアウト | 並び（メニュー、カード列など） |
+
+デザインに合わせて選びましょう。
+
+> **Try（目安: 5分）**: 上の聖杯レイアウトで、左右のカラム幅を好きな値に変更してみましょう。変更後に、中央のコンテンツが残りの幅を使えているか確認します。
+>
+> 完成条件: 左右のカラム幅が変わり、中央のコンテンツが3列の間に表示される。
+
+#### 発展: HTML構造が複雑になると何が困る？
+
+フレックスボックスだけでページ全体を組むと、レイアウトのために `` を入れ子にする必要が出てきます。これには次のような副作用があります。
+
+- HTMLの意味（セマンティクス）が薄くなる: コンテンツの構造ではなく、見た目のためのタグが増える。
+- 描画パフォーマンスが落ちやすい: ブラウザが解釈する要素数が増えるとレンダリングコストが上がる。
+- 後からのスタイル変更が大変: レイアウト用のタグと意味のあるタグが混ざる。
+
+逆にグリッドはページ全体の枠組みを1つの要素で表現できるので、こうした問題が起きにくいです。とはいえ細かい並びはフレックスのほうが書きやすいので、適材適所で使い分けます。
+
+---
+
+## 4. ページに変更を加えよう
+
+ここから先は、閲覧者の操作に応じて表示を変える方法です。
+
+### 4-1. HTMLでユーザーの入力を受け取ろう
+
+#### 4-1-1. ボタン要素
+
+```html
+
+
+```
+
+
+
+#### 4-1-2. 要素のイベントを処理する
+
+ボタンの操作にはJavaScriptを使います。`main.js` を新規作成し、`index.html` から読み込みます。
+
+```html
+
+
+
+
+
+
+
+
+### 4-2. JavaScriptで要素に変更を加えよう
+
+#### 4-2-1. コンテンツの変更
+
+| プロパティ | HTMLタグを含むか | 備考 |
+| ---- | ---- | ---- |
+| `innerHTML` | 含む | HTMLとして解釈されます |
+| `innerText` | 含まない | 非表示テキストは除外、`\n` で改行 |
+| `textContent` | 含まない | 非表示テキストも含めて取得 |
+
+```html
+
+
+
+
+```
+
+```javascript
+let clickCount = 0;
+
+const mainButton = document.querySelector('#main-button');
+const messages = document.querySelector('#messages');
+
+const updateMessage = function () {
+ clickCount++;
+ messages.innerText += `${clickCount}回クリックされました。\n`;
+};
+
+mainButton.addEventListener('click', updateMessage);
+```
+
+
+
+#### 4-2-2. 見た目の変更
+
+`element.style.<プロパティ名>` でCSSを直接書き換えられます。
+
+```javascript
+const colorList = ['pink', 'cyan', 'yellow'];
+let clickCount = 0;
+
+const mainButton = document.querySelector('#main-button');
+const messages = document.querySelector('#messages');
+
+const updateMessage = function () {
+ clickCount++;
+ messages.innerText += `${clickCount}回クリックされました。\n`;
+ messages.style.backgroundColor = colorList[clickCount % 3];
+};
+
+mainButton.addEventListener('click', updateMessage);
+```
+
+
+
+### 4-3. CSSで要素の変化を魅せよう
+
+`transition` プロパティを使うと、CSSの値が変わるときの変化をなめらかにできます。
+
+```html
+
+もう少し詳しく: `defer` 属性の意味
+
+`defer` は、HTMLの解析が終わってからスクリプトを実行する指定です。これがないと、要素が読み込まれる前にスクリプトが走ってエラーになる場合があります。
+
+たとえば上のサンプルで `defer` を外すと、`document.querySelector('#main-button')` を実行する時点ではまだ `
+
+```
+
+```css
+#main-button { margin-bottom: 16px; }
+
+#field {
+ position: relative;
+ width: 300px;
+ height: 300px;
+ border: 2px solid gray;
+}
+
+#box {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ display: grid;
+ place-content: center;
+ background-color: pink;
+ transition: all ease 0.2s;
+}
+```
+
+```javascript
+let clickCount = 0;
+
+const mainButton = document.querySelector('#main-button');
+const box = document.querySelector('#box');
+
+const moveBox = function () {
+ clickCount++;
+ box.textContent = `${clickCount % 4}`;
+ box.style.top = [0, 1].includes(clickCount % 4) ? '0px' : '200px';
+ box.style.left = [0, 3].includes(clickCount % 4) ? '0px' : '200px';
+};
+
+mainButton.addEventListener('click', moveBox);
+```
+
+
+
+| 値 | 意味 |
+| ---- | ---- |
+| `all` | すべてのプロパティを対象に |
+| `0.2s` | 変化にかける時間 |
+| `ease` | 変化のタイミング関数。始めと終わりがゆっくり。他に `linear` など。 |
+
+> 注: ここで紹介したのは `transition` による補間で、いわゆる「CSSアニメーション」とは別物です。詳しくは [MDN: CSS animations](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) を参照してください。
+
+---
+
+## 5. 発展: VisBugを使ってみよう
+
+Chrome拡張機能 [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=ja) を入れると、ページ上の要素を直接観察・調整できます。必要になったときに試してみましょう。
+
+`Alt`+`Shift`+`D` で起動できます。
+
+| ツール | 用途 |
+| ---- | ---- |
+| ガイドツール | クリック中とホバー中の要素の大きさの差分を表示します。 |
+| インスペクトツール | ホバー中の要素のサイズや色設定を一覧表示します。 |
+
+
+
+
+---
+
+## 6. Challenge: 外部で練習する
+
+ここまでの内容を終えた人は、外部コンテンツでさらに練習してみましょう。すべて任意の Challenge です。
+
+| Challenge | 対象 | 取り組み方 |
+| ---- | ---- | ---- |
+| [HTML Master](https://www.html-master.com/) | HTMLの基本タグと文書構造 | 「HTML基礎」のレベルに取り組む |
+| [Flexbox Froggy](https://flexboxfroggy.com/#ja) | Flexbox | レベル1〜10をクリアする |
+| [Grid Garden](https://cssgridgarden.com/#ja) | CSS Grid | レベル1〜10をクリアする |
+
+---
+
+## 7. 終わりに
+
+この資料ではHTML/CSSの基礎と、JavaScriptを組み合わせた動的なページ変更までを扱いました。
+ここで扱いきれなかった要素やプロパティは多数あるので、使うときにMDNや検索で調べながら書いていきましょう。
+
+## 8. 参考文献
+
+- MDN web docs
+ - HTML: 0
+` や `
` のような記述 |
+ | 開始タグ / 終了タグ | 要素の開始 / 終了を示すタグ |
+ | 要素 | 開始タグから終了タグまでを含む全体 |
+ | マークアップ | タグで文字列を囲み、意味付けすること |
+
+- 同様に、[2-2-1 文書型定義とルート要素](DOCS.md#2-2-1-文書型定義とルート要素)の「属性」「子・親・兄弟・子孫」も表化候補。
+
+### 1-4. 「表示が少しだけ変わった〜」の言い回しを改善
+
+- 現状: [2-2](DOCS.md#2-2-htmlの基本的な構造を知ろう) 冒頭の以下の文:
+ > 表示が少しだけ変わったかと思います。これは本来2-1.で示したコードでは表示がうまくいっていないことを示しています。
+- 課題:
+ - 「うまくいっていない」が曖昧。何が・なぜ・どう困るかが伝わらない。
+ - 直前で「Hello, World ! が大きくなったはず」と成功体験を作ったのに、直後に「あれは実は失敗だった」と冷や水を浴びせる構成になっている。
+- 方針案:
+ - 「2-1 のコードは最低限ブラウザが解釈してくれていたが、本来は文書型定義などを書かないとブラウザが互換モード（quirks mode）に入ってしまい、意図しない表示崩れが起きうる」といった事実ベースの説明に書き換える。
+ - もしくは「2-1 は学習用の最小コードで、これから実用的な雛形に書き換えていく」という前向きな繋ぎ方にする。
+
+## 2. 補足: 他に気になった点
+
+DOCS.md を一通り読み返して気になった点。リニューアル時に一緒に直したい候補。
+
+### 2-1. セクション番号のずれ
+
+- [3-6 思いどおりに配置しよう](DOCS.md#3-6-思いどおりに配置しよう) 配下の小節が `3-4-1. グリッドレイアウト` / `3-4-2. フレックスボックス` になっている。`3-6-1` / `3-6-2` が正しい。TOC のアンカーも同じくずれている。
+
+### 2-2. コード・本文中の typo
+
+- [3-6-1 グリッドレイアウト](DOCS.md#3-4-1-グリッドレイアウト) のサンプルCSS内に `right-colmun`（正しくは `column`）が複数箇所。
+- [3-5-2 文字の見た目を変更しよう](DOCS.md#3-5-2-文字の見た目を変更しよう) のテーブル: `igms/../imgs/css-font-family-smple.png` → `imgs/css-font-family-sample.png`（`igms`、`smple` 両方typo）。
+- [3-3 スタイルシートの種類と優先度](DOCS.md#3-3-スタイルシートの種類と優先度) の「オーサー: Auther/著者」→ `Author` が正しい。
+- [4-1-2 defer属性の意味](DOCS.md#4-1-2-要素のイベントを処理する) 折りたたみ内: 「文書の解析語」→「文書の解析後」。
+- [2-3-2 箇条書き](DOCS.md#2-3-2-箇条書きリスト) のうどん作り方サンプル: 「生地の橋から」→「生地の端から」。
+
+### 2-3. HTML 仕様的に怪しいサンプル
+
+- [2-3-3 強調と重要の表現](DOCS.md#2-3-3-強調と重要の表現とその違い) のクイズ例で、`` を入れている。`
` に変えるか、リストを外に出すのが望ましい。
+
+### 2-4. 想定時間 90分 の現実味
+
+- 章のボリュームに対して 90 分は厳しい印象。リニューアル時に「コア章（必修）」と「読み物章（任意）」を明示的に分け、当日にやる範囲を絞れるようにしておきたい。
+
+### 2-5. スクリーンショットの保守コスト
+
+- StackBlitz の UI 更新ごとに [imgs/stackblitz-*](imgs/) を撮り直している（`2025` というファイル名サフィックスから察するに毎年更新が発生）。
+- CodePen 移行とあわせて、UI スクショは最小限（ログイン/作成手順は文章のみ）にし、本筋のコードと出力結果のスクショに絞る方針が保守コスト的に良い。
+
+### 2-6. JavaScript 章の位置づけ
+
+- [4. ページに変更を加えよう](DOCS.md#4-ページに変更を加えよう) は実質 JavaScript 入門。タイトルが「HTML/CSS を始めよう」なのに最後の1/4が JS になっており、対象スコープがぶれている。
+ - 案A: JS 章は別資料に切り出す。
+ - 案B: タイトルを「Webフロントエンド入門」等に変える。
+ - 案C: 4章は「HTML/CSS を活かすためのJSさわり」と位置づけを明示し、軽量化する。
+
+## 3. 次のステップ
+
+- [ ] 上記の方針について、メンター/関係者と認識合わせ
+- [ ] リニューアル後の章立て案（目次）をドラフト
+- [ ] CodePen 移行可否の最終判断（ファイル分割不可・defer 不要問題の取り扱い）
+- [ ] スクショ撮り直しが必要な箇所のリストアップ
diff --git a/html-css/imgs/css-font-family-smple.png b/html-css/imgs/css-font-family-sample.png
similarity index 100%
rename from html-css/imgs/css-font-family-smple.png
rename to html-css/imgs/css-font-family-sample.png