コードを覗いてみる
中身は、思ったより読める
ここまで、画面の裏側にあるものは AI に任せきりでした。今日はそこを一度開けてみます。
身構えなくて大丈夫です。読めるようになる必要はありません。「だいたいこういう形をしている」と分かるだけで、次のレッスンで自分の手で1か所直せるようになります。
中身は3つのファイルに分かれている
第1章で出てきた3つを、もう一度並べます。
プレーンテキスト
index.html 画面に何を置くか (見出し、文章、一覧、ボタン)
style.css それをどう見せるか (色、大きさ、余白)
script.js 押したときに何が起きるか (動き)文字を書き換えたいだけなら、見る先は index.html の1つだけです。今日はここだけを見ます。
タグは、中身をはさむ札のようなもの
index.html を開くと、こういうものが並んでいます。
プレーンテキスト
<h1>おこづかい帳</h1>山かっこでくくられた <h1> をタグと呼びます。これは「ここから見出しです」という札です。終わりには、斜めの線が1本入った </h1> が付きます。「見出しはここまで」という札です。
つまり、開きの札と閉じの札にはさまれた真ん中が、画面に出る文字ということになります。この1行なら、画面に出るのは「おこづかい帳」の5文字だけです。
よく出てくる札は多くありません。次の4つを見分けられれば、たいていの画面は追えます。
プレーンテキスト
<h1> …… 大きな見出し
<p> …… ふつうの文章のかたまり
<ul> …… 箇条書きの入れ物
<li> …… その中の1件ぶん入れ子になっているだけ
少し長い例を見ます。
プレーンテキスト
<ul>
<li>おかし 480円</li>
<li>ノート 200円</li>
</ul><ul> という入れ物の中に、<li> が2つ入っています。字下げは、この入れ子の関係を人が見やすくするためのものです。コンピュータにとっては意味がありませんが、読むときの手がかりになります。
中身の文字を直したいときは、開きの札と閉じの札の間だけを書き換えます。 札そのものには触りません。これが次のレッスンでやることの全部です。
今日の演習
まだ手では触りません。今日は「中身を見て、そこに何が書いてあるか分かる」ところまでです。
AI に、おこづかい帳の記録が並んだ index.html を作ってもらってください。作らせたら、エディタでその中身を眺めて、<ul> の中に <li> がいくつ並んでいるか、自分の目で数えてみてください。この「開いて眺める」が今日の本題です。
完成条件
- 記録は箇条書き (ul の中の li) の形で並べてもらってください
- 採点が終わったら、index.html を開いて中身を眺めてみてください
- どの札にはさまれた文字が画面に出ているか、目で追ってみてください