【初心者向け】Webアプリを作ろう STEP2：フロントエンドを理解する（HTML/CSS/JavaScript）

2026-05-22プログラミング

#Web開発#初心者#HTML#CSS#JavaScript#フロントエンド

STEP1でツールのインストールが終わりましたね。

STEP2では、いよいよコードを書いてブラウザに画面を表示させます。Webページがどのように作られているか、3つの技術（HTML・CSS・JavaScript）を使って体験しましょう。

ゴール

ローカル環境（自分のパソコン）でブラウザを開き、自分が書いたコードの画面が表示されること。

フロントエンドとは？

「フロントエンド」とは、ユーザーが直接見て操作する部分のことです。

ユーザー
  ↓ 見る・操作する
【フロントエンド】← STEP2で学ぶ
  HTML / CSS / JavaScript
  ↕ データをやり取りする
【バックエンド】← STEP3で学ぶ
  Python
  ↕ データを保存・取得する
【データベース】← STEP4で学ぶ
  PostgreSQL

Webページを「家」に例えると：

HTML = 骨組み（壁・床・天井）
CSS = 内装（壁の色・家具のデザイン）
JavaScript = 家電（ボタンを押したら動く）

作業フォルダを作ろう

まずコードを置くフォルダを作ります。どこでも好きな場所にフォルダを作ってください。

例）デスクトップに webapp というフォルダを作る。

フォルダの構成はこうなります：

webapp/
├── index.html
├── style.css
└── script.js

Cursorで webapp フォルダを開きましょう。

Cursorメニュー → 「ファイル」→「フォルダーを開く」→ webapp を選択

1. HTML — Webページの骨組み

`index.html` を作成する

Cursorの左のファイル一覧で右クリック → 「新しいファイル」→ index.html という名前で作成します。

以下のコードをそのまま貼り付けてください：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのWebページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>はじめてのWebページ</h1>
  </header>

  <main>
    <p>こんにちは！これは私が作ったWebページです。</p>

    <section>
      <h2>好きな食べ物リスト</h2>
      <ul>
        <li>ラーメン</li>
        <li>寿司</li>
        <li>カレー</li>
      </ul>
    </section>

    <section>
      <h2>ボタンを押してみよう</h2>
      <button id="hello-btn">クリックしてね</button>
      <p id="message"></p>
    </section>
  </main>

  <footer>
    <p>© 2026 はじめてのWebページ</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

HTMLの主なタグ

タグ	意味
`<h1>〜<h6>`	見出し（数字が大きいほど小さい見出し）
`<p>`	段落（普通の文章）
`<ul>` / `<li>`	箇条書きリスト
`<button>`	ボタン
`<header>`	ページ上部のエリア
`<main>`	メインコンテンツのエリア
`<footer>`	ページ下部のエリア

2. CSS — デザインをつける

`style.css` を作成する

style.css というファイルを作り、以下を貼り付けます：

/* 全体の設定 */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #333;
}

/* ヘッダー */
header {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  text-align: center;
}

/* メインエリア */
main {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 見出し */
h2 {
  color: #4a90e2;
  border-bottom: 2px solid #4a90e2;
  padding-bottom: 8px;
}

/* ボタン */
button {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 10px 24px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #357abd;
}

/* メッセージ */
#message {
  margin-top: 16px;
  font-size: 18px;
  color: #e44;
  font-weight: bold;
}

/* フッター */
footer {
  text-align: center;
  padding: 20px;
  color: #888;
  font-size: 14px;
}

CSSの主なプロパティ

プロパティ	意味
`color`	文字の色
`background-color`	背景色
`font-size`	文字の大きさ
`padding`	内側の余白
`margin`	外側の余白
`border-radius`	角の丸み

3. JavaScript — 動きをつける

`script.js` を作成する

script.js というファイルを作り、以下を貼り付けます：

// ボタン要素を取得する
const button = document.getElementById('hello-btn');

// メッセージ表示エリアを取得する
const message = document.getElementById('message');

// ボタンがクリックされたときの処理
button.addEventListener('click', function() {
  message.textContent = 'こんにちは！JavaScriptが動きました！';
});

コードの解説

// 1. HTML内の要素を取得する
const button = document.getElementById('hello-btn');
//   ↑ id="hello-btn" のボタンを探してくる

// 2. クリックされたときに実行する処理を登録する
button.addEventListener('click', function() {
  // 3. メッセージのテキストを書き換える
  message.textContent = 'こんにちは！JavaScriptが動きました！';
});

ブラウザで確認しよう

ファイルが3つ揃ったら、index.html をブラウザで開きます。

方法1：ファイルをドラッグ＆ドロップ

index.html をChromeやEdgeのウィンドウにドラッグ＆ドロップする

方法2：Cursorのターミナルから開く

Cursorのメニュー → 「ターミナル」→「新しいターミナル」
以下のコマンドを実行：

open index.html

表示確認

ブラウザで以下のような画面が表示されれば成功です！

青いヘッダーに「はじめてのWebページ」と表示されている
白いカードに文章とリストが表示されている
「クリックしてね」ボタンを押すとメッセージが表示される

少しカスタマイズしてみよう

自分のコードが動く感覚をつかむために、少し変えてみましょう。

試してみること

1. 自分の名前を入れてみる

index.html の以下の部分を変えてみましょう：

<!-- 変更前 -->
<p>こんにちは！これは私が作ったWebページです。</p>

<!-- 変更後（自分の名前に変える） -->
<p>こんにちは！私の名前は田中太郎です。</p>

2. 好きな色に変えてみる

style.css の以下の部分を変えてみましょう：

/* 変更前 */
background-color: #4a90e2;

/* 変更後（緑系に変える） */
background-color: #27ae60;

3. ボタンのメッセージを変えてみる

script.js の以下の部分を変えてみましょう：

// 変更前
message.textContent = 'こんにちは！JavaScriptが動きました！';

// 変更後
message.textContent = '自分でカスタマイズできた！すごい！';

ファイルを保存してブラウザをリロード（F5）すれば、変更が反映されます。

まとめ

技術	役割	今回やったこと
HTML	骨組み	ページの構造を作った
CSS	デザイン	色やレイアウトを整えた
JavaScript	動き	ボタンクリックでメッセージを表示した

STEP2のゴール達成！

ローカル環境でブラウザにWebページを表示できた
HTML・CSS・JavaScriptの基本的な役割を理解できた

次のSTEP3では、このページからPython製のサーバーを呼び出して、バックエンドと連携する仕組みを作ります。ページだけでなく、サーバー側の処理を理解することで、本格的なWebアプリに近づきます！

前の記事：【STEP1】必要なソフトのインストール

次の記事：【STEP3】バックエンドを理解する（Python）

← 記事一覧に戻る