隠れた案内やメニューを、指定されたCSS宣言の値を変えて直すHTML教材です。修理前後を見比べ、出したいものだけでなく、保つ必要がある表示も点検します。 製品版200円・全2実習。無料版は1件目を完結して使えます。製品版には、その1件目と追加の2件目が入っています。 ■ どんな実習か 1件目は、案内を前に出しながら上部メニューを保つ修理です。z-indexを変え、別の成功する修理も試します。同じ表示でも比較する要素がどう違うかを、予測・理由・点検記録から比べます。 2件目は、重なり順とoverflowの切り抜きを区別する修理です。メニューを枠の外へ出しながら、背景の装飾は枠内に保ちます。 どちらも、固定のHTML/CSSと参考修理・解説があります。入力できるのは、指定された宣言の値だけです。任意のHTML/CSSを書くエディター、実案件の自動診断、AIによる理解の採点はありません。 点検は、固定画面の指定点でどの要素が前にあるかを調べます。画面全体の品質や操作性を保証するものではありません。 ■ 対象と起動環境 HTML/CSSのクラスと宣言を少し読める人向けの、小さな二件の教材です。PCのChromeとローカルHTTP環境が必要です。既にPython 3を使える人向けの起動例をREADMEに記載しています。Pythonやサーバー環境の導入は含みません。 確認環境はWindowsのChrome／ローカルHTTPです。HTMLファイルを直接開く方法（file://）、スマートフォン実機、Safari等は未検証です。まず無料版で、起動と操作を確認してからご検討ください。 ■ 無料版と製品版 無料版：1件目の修理、固定ソース、参考修理・解説、予測と理由、点検記録。 製品版：無料の1件目を含む全2実習。 無料のHTMLにも、1件目を動かすコードと固定のHTML/CSSが含まれます。同じ商品ページからダウンロードできます。 ■ 記録とデータ 予測・理由・直近12回の点検記録は実習別です。テキスト欄から手動でコピーできます。自動保存やファイル出力はなく、ページを再読み込みしたり閉じたりすると消えます。 入力した値や記録を、外部APIや外部サーバーへ送信しません。実行時にAIは使いません。ローカルHTTPは、このPC内で教材を読み込むために使います。 ■ 利用範囲 実習のHTML/CSS断片は、学習・改変・自作Web作品への組み込みに使えます。商用利用もできます。教材自体や文章・図の再配布、再販売はできません。標準的なCSSの知識や仕様の利用は制限しません。無料版も同じ条件です。詳しくは同梱のUSE.txtをご覧ください。 ■ 制作と確認の範囲 文章・コード・説明図は生成AIを使って制作しています。人間による初見の試遊や、学習効果の検証は行っていません。 栞と余白の資料室