ここからは 「おみくじアプリを HTML 付きで画面に表示する」ための 7 日間 × 30 分学習プラン（超初級向け） を、かみ砕いて説明します。
HTML・CSS・JavaScript を 最小限だけ 使い、
最終日に「ボタンを押すと画面におみくじ結果が表示されるアプリ」を完成させます。
Day 1: HTML の最小セットを理解する
HTML は「画面の骨組み」
HTML は「画面に何を置くか」を決める言語です。
家で言えば「柱・壁・窓」のようなものです。
まずは最小の HTML を書いてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじアプリ</title>
</head>
<body>
<h1>おみくじアプリ</h1>
<p>ここに結果が表示されます</p>
</body>
</html>
ブラウザで開くと、ただの文字が表示されます。
今日はこれで十分です。
重要ポイントの深掘り
<body> の中が「画面に表示される部分」です。
ここにボタンや結果表示エリアを置いていきます。
Day 2: ボタンを置いてみる
HTML にボタンを追加する
昨日の HTML の <body> を次のように書き換えます。
<body>
<h1>おみくじアプリ</h1>
<button id="btn">おみくじを引く</button>
<p id="result">ここに結果が表示されます</p>
</body>
画面にボタンが出てきました。
まだ押しても何も起きませんが、これが「アプリの入り口」です。
重要ポイントの深掘り
id="btn"id="result"
は JavaScript からこの要素を操作するための「名前」です。
Day 3: JavaScript を HTML につなぐ
HTML の下に JavaScript を書く
HTML の一番下（</body> の直前）に次を追加します。
<script>
console.log("JavaScript が動きました！");
</script>
ブラウザで開き、右クリック → 検証 → Console を見ると
「JavaScript が動きました！」と表示されます。
これで HTML と JavaScript がつながった ことになります。
重要ポイントの深掘り
<script> タグの中に JavaScript を書くと、
その HTML ページを開いたときに実行されます。
Day 4: ボタンを押したら動くようにする
ボタンにクリックイベントをつける
昨日の <script> を次のように書き換えます。
<script>
const btn = document.getElementById("btn");
const result = document.getElementById("result");
btn.addEventListener("click", function() {
result.textContent = "ボタンが押されました！";
});
</script>
ブラウザでボタンを押すと、
「ボタンが押されました！」と表示されます。
重要ポイントの深掘り
document.getElementById("btn")
HTML の中から id=”btn” の要素を JavaScript に取り出す。
addEventListener("click", ...)
「クリックされたらこの処理を実行してね」という命令。
textContent
HTML の中の文字を書き換える。
これら 3 つが分かれば、もう画面操作の基礎はクリアです。
Day 5: ランダムで結果を作る（おみくじの心臓部）
ランダムで結果を選ぶ関数を作る
<script> の中を次のように書き換えます。
<script>
const btn = document.getElementById("btn");
const result = document.getElementById("result");
function drawFortune() {
const fortunes = ["大吉", "中吉", "小吉", "末吉", "凶"];
const index = Math.floor(Math.random() * fortunes.length);
return fortunes[index];
}
btn.addEventListener("click", function() {
const fortune = drawFortune();
result.textContent = "今日の運勢は「" + fortune + "」です！";
});
</script>
ボタンを押すたびに結果が変わるようになります。
重要ポイントの深掘り
Math.random()
0〜1 のランダムな小数。
Math.floor()
小数点以下を切り捨てる。
fortunes.length
配列の要素数（今回は 5）。
この 3 つの組み合わせで「ランダムに 1 つ選ぶ」が実現できます。
Day 6: 見た目を少し整える（CSS の最小限）
CSS を追加してアプリっぽくする
<head> の中に次を追加します。
<style>
body {
font-family: sans-serif;
text-align: center;
padding-top: 50px;
}
#btn {
padding: 10px 20px;
font-size: 18px;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
これだけで、かなり「アプリっぽい」見た目になります。
重要ポイントの深掘り
CSS は「見た目を整える」ための言語です。
JavaScript と違って、動きは作りません。
Day 7: 完成版をまとめる
完成版の HTML（コピペで動きます）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじアプリ</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding-top: 50px;
}
#btn {
padding: 10px 20px;
font-size: 18px;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>おみくじアプリ</h1>
<button id="btn">おみくじを引く</button>
<p id="result">ここに結果が表示されます</p>
<script>
const btn = document.getElementById("btn");
const result = document.getElementById("result");
function drawFortune() {
const fortunes = ["大吉", "中吉", "小吉", "末吉", "凶"];
const index = Math.floor(Math.random() * fortunes.length);
return fortunes[index];
}
btn.addEventListener("click", function() {
const fortune = drawFortune();
result.textContent = "今日の運勢は「" + fortune + "」です！";
});
</script>
</body>
</html>
これをブラウザで開けば、
あなたの HTML × JavaScript おみくじアプリ が完成です。
