資源は

0から1へのHTML：ウェブページの基本を学び、エージェントを使って個人ホームページを作る

誰もがエージェントを使って自分のウェブページを作ることができます：ウェブページの構造からAIの構築までの実戦今、誰もがエージェントを使って作成することができます。

2026年8 月3日92読み。13分読書
記事の目次

誰でもエージェントを使って自分のウェブページを作ることができます：ウェブページの構造からAIのウェブサイト構築まで

今では誰でもエージェントを使って自分のウェブページを作成できます

AIプログラミングツール（Codex、Cursor、Claude Codeなど）を開き、“自分のホームページを作るのを手伝ってください”と言います。ファイルの作成、コードの作成、スタイルの調整、ブラウザのプレビューの開始ができます。最初のページの作成は非常に簡単です。

本当の違いは、第2ラウンドの変更です。

ウェブページの構造を知っている人はエージェントにこう言います

“imagesフォルダの相対パスを確認します。”

“携帯電話側が単一のレイアウトに変更”。

“CSSのみを調整し、HTMLコンテンツは変更しない”

これらの指示は明確で正確であり、エージェントは問題をすばやく見つけて修正を完了できます。

構造を知らない人は通常こう言うでしょう

“なぜ写真がなくなったの？”

“もう少し高度に”。

“今と何が違うの？”

エージェントは推測するだけで、変更範囲はますます大きくなり、ページの制御はますます困難になります。

したがって、HTML、CSS、Java Script、ルートディレクトリ、相対パス、レスポンシブデザインといった一見伝統的なWeb知識は、AI時代のエージェントを使用するためのコアコンピタンスになります。

何百行ものコードを書く必要はありませんが、問題を記述し、変更の範囲を定義し、最終結果が正しいかどうかを判断するために概念を使用する必要があります。

この記事は2つの部分からなる：

最初の部分では、Webプロジェクトをゼロから理解し、簡単なWebページを完成させます。

第二部では、エージェントの実際の戦闘に入り、黄色いパンクスタイルの個人ホームページを使用して、“リファレンス検索→デザイン分析→ Webページの生成→継続的な変更→ブラウザの受け入れ”の全プロセスを完全に体験します。

Webページ、Webサイト、Webアプリケーションを理解する

この3つの概念はしばしば混同される。

簡単に理解できます

  • ページ：1ページ。
  • ウェブサイト：1冊。
  • Webアプリケーション：マシンです。

あなたが作っているのはWebページです。

今後、作品展示、ブログ、連絡先などのページを追加し、徐々にウェブサイトに発展していきます。

Webプロジェクトは実際にはドキュメント構造のセットです。

Webプロジェクトは単一のHTMLファイルではありません。

通常は以下を含む。

  • ページ構造;
  • スタイルファイル;
  • インタラクティブスクリプト;
  • 写真資源;
  • プロジェクトの説明。

これは家として理解できます。

プロジェクトルートは家そのもので、HTML、CSS、Java Script、画像は別々の部屋に配置されています。

一般的な構造：

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── avatar.jpg
└── README.md

そのうち：

  • index.html 入り口のページ;
  • css 収納スタイル;
  • js 相互作用の保存;
  • images 写真の保存。
  • README.md プロジェクトの説明を書く。

最初のステップは、コードを書くことを急ぐ必要はない。

最初の作成：

  • プロジェクトフォルダの作成;
  • CSS、js、imagesの3つのサブフォルダ
  • index.htmlを参照。
  • README.mdとは

エージェントがファイルの場所を知る前に、構造を正しく調整します。

HTML、CSS、Java Scriptのそれぞれの役割は何ですか？

ウェブページのボタンには通常3つのファイルが必要です。

HTMLでは

ページを決定します。

CSSより：

ページの表示方法を決定します。

JavaScript

クリック後に何が起こるかを決定する。

覚えられる：

HTMLはスケルトン、CSSは外観、Java Scriptは動作です。

例えば：

テキストを変更するにはHTMLを探します。

色を変更するにはCSSを探す。

ボタンが反応しない→ Java Scriptをチェック

ファイルが分離されると、ウェブページのメンテナンスが容易になり、エージェントが問題を見つけやすくなります。

なぜindex.htmlが重要なのか

シンプルなWebプロジェクトでは、index.html 通常はフロントページとエントリーファイルです。

ユーザーがウェブサイトを開くと、サーバーは通常、以下を優先します。

index.html

そのため、

  • プロジェクトのルートディレクトリに配置する必要があります。
  • 名前を変えないでください
  • ファイル名には小文字を使用します。

HTMLページは主に2つの部分に分かれます：

head
└── 网页设置

body
└── 用户看到的内容

通常は以下を含む。

  • ページのタイトル;
  • 文字コード;
  • 携帯電話の設置
  • CSSとJava Scriptのアドレス。

本文は以下の通り。

  • タイトル;
  • 言葉;
  • 写真の写真;
  • ボタン;
  • ページの内容。

通常の構造：

body
├── header
├── main
│   ├── section
│   ├── section
│   └── section
└── footer

これらのタグはブラウザや検索エンジンがページ構造を理解するのに役立つ。

5.最小限のウェブページを作成する

実際に開く最初のページを作成します。

まず、頭を入れます：

images/avatar.jpg

その後、編集。 index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>

<body>

<h1>你好，这是我的第一个网页。</h1>

<p>我正在学习网页是怎样组成的。</p>

<img src="images/avatar.jpg">

<button id="hello-button">
和我打个招呼
</button>

</body>
</html>

保存後、ブラウザで開きます。

見た場合：

  • タイトル;
  • 言葉;
  • 写真の写真;
  • ボタン;

HTMLは正常に動作します。

画像が表示されない場合は、通常：

  • ファイル名;
  • 大文字と小文字;
  • 拡張子;
  • 道だ。

例えば：

images/avatar.jpg

実際の文書と一致する必要があります。

CSSはウェブサイトにデザイン感を与えます。

HTMLはコンテンツ、CSSはビジュアルです。

そこで：

css/style.css

参加する：

body {
  margin:0;
  padding:48px;
  background:#f5f5f5;
  font-family:Arial,sans-serif;
}

img {
  width:240px;
  border-radius:24px;
}

button {
  padding:12px 20px;
  border-radius:999px;
}

更新後の保存：

  • 背景の変化
  • 画像の縮小;
  • ボタンが角を曲がって表示。

CSSは簡単に理解できます：

誰を見つけ、何を変え、何を変えるか。

Java Scriptはウェブページをインタラクティブにする

リンク：

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

その後、以下の通り。

js/script.js

参加する：

document
.querySelector("#hello-button")
.addEventListener("click",()=>{
 alert("你好呀！");
});

ページを更新し、ボタンをクリックします。

ポップアップウィンドウが表示されると、HTML、CSS、Java Scriptが正常に接続されます。

ファイルパスは初心者が最も間違いを犯しやすい場所です。

ウェブページは画像、CSS、Java Scriptの場所を知る必要があります。

これが道です。

例えば：

css/style.css

js/script.js

images/avatar.jpg

これらはすべて相対的な経路です。

3つのルールを覚えてください

同じカタログ：

file.jpg

次のレベル：

folder/file.jpg

上の階：

../file.jpg

同時に、

  • ファイル名が間違っていない。
  • 大文字と小文字は間違いなし。
  • 拡張子は間違いない。

多くの“画像が消える”“スタイルがロードされない”は、本質的にパスの問題です。

9）ウェブページを変更する適切なプロセスを開発する

Web開発の最も重要な習慣：

修改
 ↓
保存
 ↓
刷新
 ↓
验证

一度に一つの場所を変える。

同時に変更しない：

  • HTML;
  • CSSは
  • Java Script。

そうでなければ、原因を判断するのは難しい。

これはエージェントにも当てはまります。

エージェントがコードを変更した後も、以下が必要です。

ブラウザを開く→効果を確認→正しいかどうかを確認する。

10、手書きのWebページからエージェントビルに入る

事前の知識はプログラマーになるためではありません。

マスターする必要があるのは3つだけです：

まず、キーワードを知る。

例えば：

  • CSSは
  • ファイルのパス;
  • rootディレクトリ;
  • 応答性です。

これにより、エージェントに問題がある場所を正確に伝えます。

第二に、習慣を保つ。

エージェントの変更後：

変更→ブラウザチェック→最適化を続行。

第三に、判断力です。

写真は割れた：

経路の問題かもしれない。

ボタンが反応しない：

Java Scriptは接続できません。

携帯電話の混乱：

レスポンシブレイアウトの問題かもしれません。

自分で修理する必要はありませんが、エージェントに確認する場所を知っています。

エージェントを使ってイエローパンクのホームページを作る

本格的な戦闘に入る。

目標：

Yellow Punkスタイルの個人ページを作成します。

内容：より：

  • ニックネーム：Punk
  • AI、デザイン、コンテンツを使ってアイデアを作品にします。
  • ステータス：CENTU MBA、HerNameチーフデザイナー、Stanley Business Schoolエグゼクティブディレクター。
  • ページ：私について、作品、連絡先;
  • 画像クレジット：images/punk.jpg

STEP 1：参考ページを探す

エージェントに直接書き込みを開始させないでください。

1~2つのデザインをご覧ください。

懸念事項：

  • 色の色;
  • ページのレイアウト;
  • 文字レベル;
  • 写真の割合;
  • アクティブモード。

コピーしない：

  • ロゴ;
  • 写真の写真;
  • テキストのテキスト;
  • ソースコードです。

デザインの法則を学びます。

ステップ2：エージェントに分析させ、作成しない

最初の命令は設計分析のみを行います。

エージェントに伝える：

  • ページ構造の分析
  • 色の分析;
  • フォントの分析;
  • ボタンの分析
  • 携帯電話の変化の分析
  • デザインDNAを参照。

すぐにコードを書かないでください。

理由は簡単です：

間違った方向に、コードを速く書くほど、より多くの再作業が行われます。

ステップ3：設計確認後，エージェントに作成させる

制作要件：

  • ネイティブHTML、CSS、Java Scriptを使用します。
  • 文書の明確な構造;
  • フレームワークを使わない。
  • 画像やコンテンツを使用すること。
  • オリジナルを維持する。
  • コンピュータと携帯電話のテストを完了します。

エージェントも必要です。

  • ローカルプレビューの開始;
  • 1440×900をチェック
  • 390×844をチェック。
  • ボタンのチェック
  • 写真のチェック;
  • コンソールエラーをチェック

エージェントが“完了”と言うのを聞かないでください。

ブラウザの結果を見てください。

初版を最適化する方法

初版は通常完璧ではない。

変更しないでください：

“もう少し高度”。

この記述は曖昧すぎる。

こう言うべきです

“構造をそのままにして、黄色の背景を明るくしてください。

“アバターは20%拡大しますが、完全表示のままです”

“CSSだけを変更し、HTMLは変更しない”

具体的であればあるほど、エージェントを正確に実行しやすくなります。

13.最終承認

エージェントに渡す：

チェックアウト：

  • テーブルの端;
  • 携帯電話の端
  • 画像のアップロード;
  • CSSの読み込み;
  • JavaScript;
  • ボタンの機能;
  • ページのスクロール;
  • コンソールエラーです。

問題の発見：

修理→ 再チェック

14.ライン展開

コンピュータ上で：

localhost

自分だけが訪れる。

デプロイは、プロジェクトをパブリックサーバーにアップロードすることです。

単純なHTML/CSS/Java Scriptプロジェクトの場合は、GitHub Pagesを使用できます。

基本的な流れ：

  1. GitHubリポジトリの作成。
  2. プロジェクト文書のアップロード。
  3. index.htmlがルートディレクトリにあることを確認します。
  4. ページを開きます
  5. 公開ウェブサイトへのアクセス
  6. もう一度ページをチェック。

ライン前のチェック：

アップロードしない：

  • APIキー;
  • プライベート電話;
  • 家族の住所;
  • 内部情報;
  • 無許可の写真。

結論：ウェブ開発の未来は、コードを書くことではなく、問題を記述することです。

AIはウェブページの作成を簡単にします。

しかし、結果を決めるのは、エージェントにコードを生成させるかどうかではなく、

ウェブサイトの構造を理解しているか。

問題を正確に説明できるか。

結果を受け入れる方法を知っているか。

HTML、CSS、Java Scriptの基本は、AIの出現によって時代遅れになることはありません。

代わりに、人間とエージェントのコラボレーションのための新しい言語になりつつあります。

将来のWeb開発は、プログラマが単独でコードを書くのではなく、エージェントを通じて設計、実装、反復を迅速に完了する構造を理解する人になるでしょう。