- データなしで、先に画面の枠を作れる
- だい8〜10の HTML / CSS で見た目を組める
- 中身はまだ仮の文字（ダミー）で置いておける
だい27でかいた画面の地図をとなりに置いて始めよう。20〜30分。
中身より先に、入れもの
いよいよ自分のアプリ作り。でも、いきなりデータをつなぐのではなく、まず画面の枠（入れもの）から作ります。先に見た目を作っておくと、完成イメージがはっきりして、あとは本物のデータをそこにはめるだけ。ぐっと楽になります。
だい19でやったように、app の中に自分のアプリのページを1まい作るところから。そこへ、だい8〜10で学んだ HTML / CSS で「問題文」「ボタン」「記録の場所」などを並べていきます。
ダミーで形を見る
まだ本物の中身がないので、いまは ダミー（仮の中身）を入れておきます。「ここに問題が出るよ」という仮の文字を置いておくだけで、できあがりの形が見えてきます。
<!-- 仮の中身（ダミー）で枠だけ作る -->
<h1>けいさんクイズ</h1>
<p>3 + 5 は？</p>
<button>8</button>
<button>9</button>
3 + 5 は？ や 8 はまだ仮の文字。あとでだい29の動き・ロジックで本物に入れかえます。いまは形が見えればOK。
- だい27でかいた画面の地図から、作る画面を1つえらぶ
- だい19のやり方で、
appに新しいページを作る - HTML / CSS で枠を作り、中身は仮の文字（ダミー）を入れる
localhostで見て、だい27の完成イメージに近いか確かめる- AI に「もっと子供が使いやすい見た目にするには？」と相談してみる
💡 AIに聞いてみよう：「ボタンを大きく押しやすくするCSSは？」と頼んでみよう。出てきたコードをそのままはるのではなく、どの部分が大きさや余白を決めているか、いっしょに読んでみると力がつきます。
- なぜ見た目を先に作る？（→ 完成イメージがつかめて、あとがらくになる）
- 仮の中身のことを何という？（→ ダミー）
- 見た目を作る道具は？（→ だい8〜10で学んだ HTML / CSS）
つぎの回（だい29）では、この枠に「動き・ロジック」を入れて、ダミーを本物に入れかえていきます。