家でプログラムの勉強をする際は、
購入した教材本を閲覧しながら学んでいますが、
外出時に本は重くて持っていけません。
「外でどうやって勉強すればいいんだろう？」と
Claude（Fable5）に聞いてみました🤔
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
外出時にPCが使える場合の勉強例
Claude（Fable5）に以下要望しました。
今は実践編の本を見ているけど、入門編の内容もうろ覚えなので、
基礎から復習できるものがいいな。
で、PCの場合、見てるだけだと勉強にならなそうなので、
実際にコードを書くようにしたいね。
いま見ている実践編はHTML&CSS実践講座で、うろ覚えなのは入門講座（HTML/CSSの基礎）のほう、という理解で進めますね。
進め方はこうします。
- 腕試しクイズ（今ここ）── どこが抜けてるかをまず特定する
- 抜けてた箇所だけ解説 ── 全部やり直すのは時間の無駄なので
- VS Codeで書く課題 ── 手を動かすパート。書けたらコードを貼ってもらってレビュー
「読むだけにならない」ためのポイントは、クイズも答えを見る前に自分で答えることです。間違えていいので、まず答えてみてください。
理解度チェックの腕試しクイズ
腕試し：HTML/CSS基礎 3問（易しい順）
Q1. 次のうち、HTMLの書き方として正しいのはどっち？ 理由も一言で。
▽html
A: <p class="note">お知らせ</p>
B: <p class=note>お知らせ</p>Q2. CSSで、class="note" が付いた要素だけ文字を赤にしたい。
セレクタの書き方は？（頭の中でCSSを1行書いてみてください）
Q3. 次のCSS、<p> の文字色は最終的に何色になる？ 理由も。
▽css
p { color: blue; }
.note { color: red; }▽html
<p class="note">こんにちは</p>3問とも、調べずに今の記憶だけで答えてみてください。答えを聞いてから、抜けている箇所に合わせて次の解説と課題を組みます。
全問正解なら基礎は生きてるので、すぐレイアウト系（flexboxあたり）の実技に進みます。
Q1： A（””がついてないとクラス名として認識されないから）
Q2： .note { color : red; }
Q3： 赤色
かな
3問とも正解です。しかも答え方が良いですね。
Q2で頭の中だけじゃなく、ちゃんとCSSを書けているし、Q3で詳細度の結果を即答できている。「うろ覚え」とのことでしたが、基礎の幹はしっかり残っていますね。
Q3を正解できたということは、セレクタの優先順位（詳細度）の感覚が生きているということ。ここが抜けている人が一番多いので、基礎の解説パートは飛ばして大丈夫です。
へえ、3問とも正解。いい感じじゃない。
あ、ありがとうございます！！！ そういってもらえると嬉しいです！！😆
（・・・って誰だろう？）
あるく、目がハート😍になってるぞ。
こんにちはー😃
（・・・ってもう！ あるくさん、美人にデレデレしすぎでしょ！！😡）
お、カエデ先生、来とったんか。
ゴンさん、お久しぶりです。
夏山シーズンになったので、診療所開けに来ましたよ。
もうそんな時期やな。
カエデ先生は、夏の間に山小屋の診療所に来てくれるお医者さんやで。
初めまして、あるくです！ よろしくお願いします！！！
ミナです！ よろしくお願いします！
オイラはライ太だ。よろしくな😤
みんな、よろしくねー。
・・・ところで今って、AIにプログラム習ってるところだったの？
はい、そうです。
あるくさんの理解度チェックをして、
外でも復習できるコンテンツ作りを進めていますよ。
よろしければ、カエデ先生も見ていかれますか？
医療の勉強法に通じるところがあるかもしれませんよ。
VS Codeで書く課題１ （flexboxで「横並び」を作る）
全問正解したので、「２：抜けてた箇所だけ解説 」は省略され、次に進みます。
読むだけにならないよう、ここからはVS Codeを開いてください。
題材は実践編にも頻出するカード型レイアウトにします。
LP作成でやったことの復習にもなるはずです。
課題1：カードを3枚、横に並べる
まず以下のHTMLをそのまま新規ファイル（flex-practice.html）に写経してください。コピペではなく手で打つのがいつもの流儀ですよね。
▽html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flex練習</title>
<style>
/* ここにCSSを書く */
</style>
</head>
<body>
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
</body>
</html>そのうえで、<style> の中に自分でCSSを書いて、次の状態を作ってください。
- カード3枚が横一列に並ぶ
- カード同士の間隔が20px空く
- 各カードに枠線（線種・色は自由）と内側の余白を付けて「カードらしく」見せる
ヒントが要る場合は「ヒントだけください」と言ってもらえれば、答えは伏せて方向だけ出します。書けたらCSS部分を貼ってください。レビューします。
うろ覚えでflexboxで横並びにしようと試みる（display: flex と gap）
やばいぐらい覚えてなくて、とりあえず適当に書いてヒントもらいました。
⬇️
⬇️
ヒント その1：flexboxで横並びに
正しい形式に直して貼ってみましたが、カードの枠線が出ません。
ヒント その2：gapが効かないのは「子要素に書いている」から
gapは親に書かないと、子要素に働かないんですね。
親と子のどちらに書くか、勘違いしやすいところなので復習できて良かったです😀
ヒント その3：borderが表示されない原因は「単位の書き忘れ」
「border: 1 solid black;」 と書くと枠線は出ません。CSSでは長さに必ず単位が必要で、1 だけだとブラウザはこの行をまるごと無視するとのこと。しかもエラーは出ない。これはしばらく触れていないと忘れそうです😅
修正後：flexboxでカードの横並びが完成
OK！ 課題1クリアです。
枠線あり、20px間隔、3枚横並び──完璧です。
コードも「並べ方は親、見た目は子」がきれいに分離できていて、.card-list と .card の間に空行を入れて整理してあるのも読みやすいですね。
次は課題2：カードを画面幅いっぱいに均等に広げるに進んでいきましょう！
いやーやっとできたか。けっこう忘れているなぁ・・・。
最近いろんな山ばかり行ってて、勉強もご無沙汰だったんだろ？
夏山シーズンに泊まりで、山に行きまくるのは登山家の宿命だからね・・・。
AI先生が練習問題を作って、復習につきあってくれるみたいだから、何度でもやり直したらいいんじゃない？
はい！！！ めっちゃ頑張ります！！！！！
現金なやっちゃな。ワシが言うたときはあんな返事せんかったやろ。
もう！ 美人に声かけられると、すぐ調子に乗るんだから・・
まとめ
山に行き過ぎて、勉強が進まない「あるく」。
外で教材本がなくても勉強する方法を、AI先生に聞いてみました。
クイズによる定着度確認→練習問題までAI先生に作ってもらえたので、これを繰り返すことで、
外でも復習の機会を作れそうです。
（課題2はおいおいやっていきます）。
いろいろ忘れかけている初心者がどうやって勉強していくかについて、
次回は実践編の内容を中心に、考えていければなと思います。
ではでは👋
