CONTENT
ここから
まずは「動かない画面」でもいい
前のページでは、画面設計を作りました。今回は、その設計をもとに、HTML・CSS・JavaScriptでアプリの土台を作ります。ここで大事なのは、いきなり完璧にしないことです。
最初の目標はこれです。
画面が表示される
これだけです。入力やボタンの動きは、次のページで作ります。
今日作る土台
今回作るのは、1画面アプリの基本形です。
タイトル
説明文
入力欄
ボタン
結果表示エリア
この5つが画面に出れば成功です。
HTML・CSS・JavaScriptの役割
アプリは、まず3つの役割で考えます。
| 種類 | 役割 | たとえ |
|---|---|---|
| HTML | 画面の部品を置く | 骨組み |
| CSS | 見た目を整える | 服・デザイン |
| JavaScript | 動きをつける | 脳・命令 |
今日は、3つを1つのファイルにまとめて作ります。
初心者は、まずこの形が分かりやすいです。
まず完成形をコピーする
新しいファイルを作ります。
ファイル名は次にしてください。
index.html
中身に、次のコードをそのまま貼り付けます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ミニアプリの土台</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: #f4f7fb;
color: #111827;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.page {
width: min(720px, calc(100% - 32px));
margin: 0 auto;
padding: 48px 0;
}
.card {
padding: 28px;
border-radius: 24px;
background: #ffffff;
box-shadow: 0 20px 48px rgba(17, 24, 39, 0.08);
}
.label {
display: inline-block;
margin-bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: #e0f2fe;
color: #0369a1;
font-size: 13px;
font-weight: 800;
}
h1 {
margin: 0;
font-size: clamp(30px, 6vw, 48px);
line-height: 1.1;
letter-spacing: -0.05em;
}
.lead {
margin: 14px 0 28px;
color: #6b7280;
font-size: 16px;
line-height: 1.8;
}
.field {
display: grid;
gap: 8px;
margin-bottom: 18px;
}
label {
font-weight: 800;
}
input,
textarea,
select {
width: 100%;
border: 1px solid #dbe3ee;
border-radius: 14px;
padding: 12px 14px;
font: inherit;
outline: none;
}
textarea {
min-height: 100px;
resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
border-color: #2563eb;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
button {
width: 100%;
border: 0;
border-radius: 14px;
padding: 14px 18px;
background: #2563eb;
color: #ffffff;
font: inherit;
font-weight: 900;
cursor: pointer;
}
button:hover {
background: #1d4ed8;
}
.result {
margin-top: 22px;
padding: 18px;
border-radius: 18px;
background: #f8fafc;
border: 1px solid #dbe3ee;
}
.result-title {
margin: 0 0 8px;
font-weight: 900;
}
.result-text {
margin: 0;
color: #4b5563;
line-height: 1.8;
white-space: pre-wrap;
}
</style>
</head>
<body>
<main class="page">
<section class="card">
<span class="label">Mini App</span>
<h1>SNS投稿メーカー</h1>
<p class="lead">
投稿テーマを入力すると、SNS投稿文を作るためのミニアプリです。
</p>
<div class="field">
<label for="themeInput">投稿テーマ</label>
<input
id="themeInput"
type="text"
placeholder="例：学校祭のお知らせ"
/>
</div>
<div class="field">
<label for="toneSelect">投稿の雰囲気</label>
<select id="toneSelect">
<option value="明るい">明るい</option>
<option value="おしゃれ">おしゃれ</option>
<option value="親しみやすい">親しみやすい</option>
</select>
</div>
<button type="button" id="generateButton">
投稿文を作る
</button>
<div class="result">
<p class="result-title">結果</p>
<p class="result-text" id="resultText">
ここに結果が表示されます。
</p>
</div>
</section>
</main>
<script>
const generateButton = document.getElementById('generateButton');
const resultText = document.getElementById('resultText');
generateButton.addEventListener('click', () => {
resultText.textContent = '次のページで、ここに結果が出るようにします。';
});
</script>
</body>
</html>
実行する
保存したら、index.html をダブルクリックします。ブラウザで画面が開きます。次のものが表示されていれば成功です。
SNS投稿メーカー
投稿テーマの入力欄
投稿の雰囲気
投稿文を作るボタン
結果表示エリア
まずは一部分だけ変更する
次に、自分のアプリに変えます。まずはタイトルを変えます。この部分を探します。
<h1>SNS投稿メーカー</h1>
自分のアプリ名に変えます。
例
<h1>課題優先順位診断</h1>
説明文を変える
この部分を探します。
投稿テーマを入力すると、SNS投稿文を作るためのミニアプリです。
自分のアプリの説明に変えます。
例
課題名と締切を入力すると、今日やるべき順番を整理します。
入力欄の名前を変える
この部分を探します。
<label for="themeInput">投稿テーマ</label>
例
<label for="themeInput">課題名</label>
placeholderも変えます。
placeholder="例：学校祭のお知らせ"
例
placeholder="例：数学のレポート"
ボタン名を変える
この部分を探します。
投稿文を作る
例
優先順位を決める
ボタン名が変わるだけでも、アプリらしくなります。
ここまででOK
このページでは、まだ本格的な処理は作りません。今日やるのは、ここまでです。
HTMLで部品を置く
CSSで見た目を整える
JavaScriptでボタン反応だけ作る
この段階で、アプリの見た目はもうできています。
課題
次の4つを自分のアプリ用に変更してください。
| 変更する場所 | 例 |
|---|---|
| アプリ名 | 課題優先順位診断 |
| 説明文 | 課題の順番を整理します |
| 入力欄名 | 課題名 |
| ボタン名 | 優先順位を決める |
完了条件
次の5つが画面に出ていればOKです。
- アプリ名
- 説明文
- 入力欄
- ボタン
- 結果表示エリア
次のページでは、**「入力できるようにする」**に進みます。