ChatGPTソラ先生と学ぶ！初心者のためのAI入門講座【第47回】ChatGPTでプログラミングを学ぶ方法｜HTML・CSS・JavaScriptの基本からエラー修正まで実践

2026.05.08

こんにちは、ソラ先生です。

前回は、ChatGPTにホームページのスクリーンショットを送って、表示上の問題や改善方法を考える授業でした。

今回は、ホームページの仕組みをもう少し詳しく学んでみましょう。

テーマは「プログラミング」です。

「プログラミングって難しそう」

「英語のような文字が並んでいて意味が分からない」

「ホームページの文字や色を少し変更したい」

「エラーが出ても、どこを直せばよいか分からない」

そんな方に向けた授業です。

ChatGPTは、コードの意味を説明したり、簡単なプログラムを作成したり、エラーの原因を調べる手助けをしたりできます。

ただし、AIが作成したコードが必ず正しいとは限りません。

今回は、プログラミングを丸暗記するのではなく、コードが何をしているのかを理解し、自分で確認しながら使う方法を学びましょう。

1．そもそもプログラミングとは何でしょうか？

プログラミングとは、コンピューターに実行してほしい処理を、決められた形式で記述することです。

例えば、次のような処理があります。

ボタンを押すとメッセージを表示する
入力した数字を計算する
条件によって表示内容を変更する
表のデータを集計する
ウェブページに動きを付ける

こうした処理を、プログラミング言語を使って記述します。

代表的な言語には、JavaScript、Python、Java、C#などがあります。

それぞれ用途や特徴が異なります。

最初からすべて覚える必要はありません。

今回は、ホームページで使われるHTML・CSS・JavaScriptを中心に学びます。

なお、HTMLは厳密にはマークアップ言語、CSSはスタイルシート言語であり、JavaScriptとは役割が異なります。

2．HTML・CSS・JavaScriptの役割を知ろう

ホームページを作るときによく使われる3つの技術を比較してみましょう。

技術	主な役割	具体例
HTML	ページの内容と構造	見出し・文章・画像・リンク
CSS	表示のデザイン	色・文字サイズ・余白・配置
JavaScript	動作や処理	ボタン操作・表示の切り替え・計算

例えば、ホームページに青いボタンを設置するとします。

HTMLでボタンを配置します。

CSSでボタンを青色にします。

JavaScriptで、押したときにメッセージを表示させます。

このように、それぞれの役割を組み合わせてウェブページを作ります。

ただし、単純なページならJavaScriptがなくても作成できます。

3．ChatGPTにコードを説明してもらおう

プログラミングを学ぶとき、最初からコードを書けなくても構いません。

まずは、すでにあるコードの意味を理解する練習をしましょう。

例えば、次のHTMLです。

<h1>はじめてのホームページ</h1>
<p>こんにちは。HTMLを勉強しています。</p>

これは、ページに見出しと文章を表示するコードです。

<h1> は、ページの主要な見出しを表す要素です。

<p> は、文章の段落を表す要素です。

ChatGPTには、次のように質問してみましょう。

「このHTMLコードの意味を、初心者にも分かるように一行ずつ説明してください。専門用語には簡単な説明を付けてください」

さらに、

「h1をh2に変更すると、どのような意味の違いがありますか？」

と質問してみることもできます。

コードを書いてもらうだけでなく、なぜその書き方をするのか学ぶことができます。

4．実践！HTMLで簡単なページを作ってみよう

今回は、自分のパソコンで簡単なホームページを作成します。

特別なサーバー契約は必要ありません。

Windowsのメモ帳などのテキストエディターを利用できます。

まず、次のコードを入力してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>こんにちは！</h1>
  <p>ChatGPTと一緒にHTMLを勉強しています。</p>
</body>
</html>

このコードをメモ帳へ貼り付けます。

次に、「名前を付けて保存」を選択してください。

ファイル名を lesson.html にします。

保存時には、ファイルの種類を「すべてのファイル」にし、文字コードをUTF-8に設定します。

保存できたら、lesson.html をダブルクリックしてみましょう。

ブラウザが開き、見出しと文章が表示されます。

これで、最初のHTMLページが完成です。

もしブラウザでコードがそのまま表示された場合は、ファイル名が lesson.html.txt になっていないか確認してください。

5．CSSで文字や背景の色を変えてみよう

次は、作成したページの見た目を変更します。

CSSを使うと、文字の色や背景色などを指定できます。

先ほどのHTMLの <head> 内に、次のコードを追加してください。

<style>
  body {
    background-color: #f2f7ff;
    font-family: sans-serif;
  }

  h1 {
    color: #0066cc;
  }

  p {
    font-size: 18px;
  }
</style>

これで、ページの背景が淡い青色になり、見出しが青色になります。

また、本文の文字サイズは18ピクセルになります。

ChatGPTには、

「このCSSコードの意味を一行ずつ説明してください。背景色、文字色、文字サイズを変更する場所を教えてください」

と質問してみましょう。

例えば、見出しを赤色に変更したい場合は、

color: #cc0000;

という指定に変更できます。

実際に数値を変更して、画面がどう変わるのか試してみてください。

6．JavaScriptでボタンに動きを付けよう

ここからは、少しだけプログラミングらしい操作に挑戦します。

JavaScriptを使うと、利用者の操作に合わせて処理を実行できます。

例えば、ボタンを押したときにメッセージを表示する仕組みです。

HTMLの <body> 内に、次のコードを追加してください。

<button id="helloButton">押してみよう</button>

<p id="message"></p>

<script>
  const button = document.getElementById("helloButton");
  const message = document.getElementById("message");

  button.addEventListener("click", function () {
    message.textContent = "こんにちは！";
  });
</script>

保存してブラウザを更新すると、「押してみよう」というボタンが表示されます。

ボタンをクリックすると、「こんにちは！」という文章が表示されます。

ここでは、JavaScriptがボタンのクリック操作を受け取り、ページ内の文章を変更しています。

ChatGPTには、

「このJavaScriptコードの動きを、ボタンを押してから文字が表示されるまでの順番で説明してください」

と依頼してみましょう。

すべての命令を一度に覚える必要はありません。

まずは、実際に動くことを確認してみましょう。

7．コードの一部分だけを変更する方法

先ほどのJavaScriptでは、ボタンを押すと「こんにちは！」と表示されます。

これを、

「今日も一緒に勉強しましょう！」

という文章へ変更してみましょう。

変更するのは、次の一行です。

変更前：

message.textContent = "こんにちは！";

変更後：

message.textContent = "今日も一緒に勉強しましょう！";

この一行を変更して保存し、ブラウザを更新します。

ボタンを押したときの文章が変われば成功です。

このように、プログラムを変更するときは、最初から全部を書き直す必要はありません。

何を変更したいのかを明確にし、必要な場所だけを修正することが大切です。

8．ChatGPTにコードを作成してもらう方法

プログラミングの基本が少し分かってきたら、ChatGPTに簡単なコードを作成してもらいましょう。

例えば、

「HTMLとJavaScriptを使って、ボタンを押すたびに数字が1ずつ増える簡単なカウンターを作成してください。初心者向けに、コードの意味も説明してください」

と依頼します。

ChatGPTは、必要なHTMLやJavaScriptのコードを提案できます。

また、対応するコードブロックでは、作成されたコードを確認したり、プレビューしたりできる場合があります。

ただし、すべてのコードがChatGPT内で実行できるわけではありません。

対応する言語や利用できる操作は、プランや環境によって異なります。

実際にコードを動かす場合は、安全なテスト環境で確認しましょう。

9．エラーが出たらどうすればいいの？

プログラミングでは、コードを入力しても思いどおりに動かないことがあります。

例えば、ボタンを押しても文字が表示されない場合です。

そんなとき、すぐにコード全体を書き直す必要はありません。

まずは、次のことを確認しましょう。

① ファイルを保存したか

変更したコードが保存されていなければ、古い内容が表示される場合があります。

② ブラウザを更新したか

保存後に画面を再読み込みします。

③ 名前が一致しているか

例えば、HTMLの id="helloButton" とJavaScriptで指定する名前が異なっていると、ボタンを正しく取得できません。

④ 記号が間違っていないか

引用符、かっこ、セミコロンなどの入力間違いを確認します。

⑤ エラーメッセージが表示されていないか

ブラウザの開発者ツールなどで、JavaScriptのエラーを確認できる場合があります。

ChatGPTには、

「このコードが正しく動きません。原因を決めつけず、確認すべきことを一つずつ教えてください」

と質問してみましょう。

10．ブラウザの開発者ツールを使ってみよう

Google ChromeやMicrosoft Edgeなどには、ウェブページの構造やエラーを確認できる開発者ツールがあります。

Windowsでは、多くのブラウザでF12キーを押すと開けます。

開発者ツールには、さまざまな項目があります。

例えば、「Console（コンソール）」では、JavaScriptのエラーなどが表示される場合があります。

ただし、開発者ツールには多くの機能があるため、最初から全部を理解する必要はありません。

まずは、エラーが表示されているか確認するところから始めましょう。

ChatGPTには、

「ブラウザの開発者ツールでJavaScriptのエラーを確認する方法を、Windowsの初心者向けに一つずつ教えてください」

と依頼できます。

エラーが表示されたら、その内容をChatGPTへ伝えてみましょう。

ただし、開発者ツールに表示された情報には、サイトの内部情報や認証に関係する内容が含まれる場合もあります。

むやみにすべてをコピーして送らないよう注意してください。

11．AIが間違ったコードを作ったら？

ChatGPTはコードを作成できますが、間違えることもあります。

例えば、存在しない関数を使ったり、古い書き方を提案したりする場合があります。

また、実際の環境と合わないコードを作成することもあります。

そんなときは、

「このコードが動かない理由を調べてください。どの部分が問題なのか説明し、必要最小限の修正案を示してください」

と依頼します。

さらに、

「修正前と修正後の違いを説明してください」

と質問してみましょう。

ここで大切なのは、AIが修正したコードをそのまま信用しないことです。

実際に動かして確認する必要があります。

また、エラーが解消しても、別の機能が壊れている可能性があります。

そのため、変更した部分だけでなく、関連する機能も確認しましょう。

12．実際のホームページを修正するときの注意点

ここまでは、自分のパソコンで作成した練習用のHTMLファイルを使いました。

しかし、実際に公開されているホームページを変更する場合は、注意が必要です。

例えば、WordPressを使ったホームページでは、テーマやプラグイン、データベースなどが関係する場合があります。

一つのCSSを変更したつもりでも、ほかのページの表示が変わるかもしれません。

また、テーマを直接編集した場合、更新によって変更内容が失われることもあります。

そこで、次の順番で進めましょう。

① 実際の画面を確認する。

② 問題が発生している場所を特定する。

③ 関係するファイルや設定を確認する。

④ 必要な部分だけを修正する。

⑤ テスト環境で動作を確認する。

⑥ 問題がなければ本番環境に反映する。

⑦ 変更後の画面と機能を確認する。

特に、重要なホームページでは、バックアップや復旧方法を確認しておくことが大切です。

AIがコードを書けることと、安全に本番サイトを修正できることは別です。

13．ChatGPTに質問するときは何を伝える？

コードの修正を相談する場合、次の情報があると役立ちます。

① 何をしたいのか

例えば、「ボタンの背景を青色にしたい」。

② 現在どうなっているのか

例えば、「ボタンの背景が白色のまま」。

③ どの環境で使っているのか

Windows、ブラウザ、WordPressなど。

④ 関係するコード

実際に使用しているHTMLやCSSなど。

⑤ エラーメッセージ

表示されている場合は、その内容。

例えば、

「WordPressのホームページで、問い合わせボタンの背景色を変更したいです。現在は白色ですが、青色にしたいです。実際のCSSを確認してから、変更する箇所を一つずつ教えてください」

という質問です。

これなら、目的と現在の状態が伝わります。

ただし、ChatGPTが実際のファイルを確認できていなければ、正しい修正箇所を断定することはできません。

14．プログラミングの学習で大切なこと

プログラミングを勉強するとき、最初から多くのコードを覚えようとすると大変です。

そこで、次のような学び方をおすすめします。

① 簡単なコードを動かす

まずは、実際に画面へ文字を表示してみましょう。

② コードの意味を調べる

一行ずつ何をしているのか理解します。

③ 一部分を変更する

文字や色などを変更して、結果を確認します。

④ わざと条件を変えてみる

数字や表示内容を変更して、動きの違いを確認します。

⑤ エラーが出たら原因を調べる

すぐに最初から作り直さず、何が問題なのか考えます。

ChatGPTは、この一連の学習を手伝うことができます。

ただし、AIにコードを作ってもらうだけでは、必ずしも自分の理解につながるとは限りません。

分からない部分を質問し、自分でも試してみることが大切です。

15．今日のミニレッスン

今回は、HTML・CSS・JavaScriptを使って、簡単なボタン付きページを完成させましょう。

ステップ① HTMLを作成する

メモ帳などのテキストエディターを開いて、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>AI講座の練習</title>

  <style>
    body {
      font-family: sans-serif;
      background-color: #f2f7ff;
      text-align: center;
      padding: 40px;
    }

    button {
      background-color: #0066cc;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>ChatGPTとプログラミング</h1>
  <p>ボタンを押してみましょう。</p>

  <button id="helloButton">押してみよう</button>
  <p id="message"></p>

  <script>
    const button = document.getElementById("helloButton");
    const message = document.getElementById("message");

    button.addEventListener("click", function () {
      message.textContent = "プログラミング成功！";
    });
  </script>
</body>
</html>