入門実践 · 一つのファイルで一つの作品
最初の自己紹介ページを作ろう
要件を説明するところから始め、自分でページを保存、表示、変更、確認します。すぐに始めて、分からない概念が出たら基礎教材を参照できます。
ダウンロードできない場合はソース全体を表示
以下をすべてコピーして UTF-8 の index.html として保存し、ブラウザーで開いてください。
始める前に用意するもの
- ファイルを保存できるパソコン、ブラウザー、プレーンテキストエディター。
- 任意：普段使っている AI チャットや開発ツール。ネット接続、アカウント、料金が必要な場合があるため、現在のサービス説明を確認してください。この教材のために購入する必要はありません。
- 参考サンプルの実行にアカウント、サーバー、API キー、追加の依存関係は不要です。ダウンロード後はオフラインで練習できます。
- 標準的な HTML と CSS を使います。所要時間は経験やツールによって異なるため、自分のペースで進めてください。
アイデアから動くページへ
1. プロジェクトフォルダーを用意する
first-website フォルダーを作ります。プレーンテキストエディターで index.html を作成し、OS の拡張子表示を有効にして index.html.txt ではないことを確認してください。
確認すること：フォルダー内に .html で終わるファイルがあります。この段階で Node.js や依存関係のインストールは不要です。
2. 要件を AI に渡すか、まず参考サンプルを動かす
下のプロンプトを普段使っている AI ツールに貼り付け、自己紹介と作品説明を入力します。コードブロックの前後のバッククォートを除き、HTML 全体をコピーしてください。AI が使えない場合は、上の完全なサンプルをダウンロードできます。
確認すること：<!doctype html> から </html> までそろった、断片ではない完全なファイルが得られます。
3. ページを保存して開く
完全なコードを UTF-8 で index.html に保存します。ファイルをダブルクリックするか、ブラウザーへドラッグしてください。サンプルが .txt で保存された場合は、先に index.html に名前を変えます。
確認すること：ブラウザーに整形された自己紹介、作品、学習メモが表示されます。ローカルのプレビューでは、アドレスが file: で始まっていても正常です。
4. 自分で一つ変更してみる
エディターで Lin を自分のニックネームに、作品の説明を自分の文章に変え、保存してブラウザーを再読み込みします。次に CSS の #5b21b6 を #1e40af に変えて、強調色の変化を見てください。
確認すること：ニックネーム、紹介文、色が変わります。問題を見つけやすくするため、一度に一種類ずつ変更しましょう。
5. リンクとスマートフォン表示を確認する
My work、About、主ボタンをクリックし、対応する領域へ移動するか確認します。ブラウザーの幅を狭くし、Tab と Enter でリンクを操作してください。
確認すること：すべてのボタンに実際の移動先があり、本文が切れず、フォーカスが見え、横にはみ出さない。
6. 作品を確認して次の教材へ
下のチェックリストでファイルを確認してください。確認できたら「完了にする」で学習状態を記録し、スキルを磨く教材へ進みましょう。
確認すること：開いて変更でき、構造も説明できる作品ができました。完了のマークは学習記録であり、作品の自動審査に合格したことを意味しません。
要件を伝えるプロンプト
コピーして角括弧内を書き換えてください。AI の出力は変わることがあるため、下の確認基準で結果を判断しましょう。
自己紹介ページを作ってください。完全な index.html ファイルだけを出力してください。
目的：自己紹介、作品を一つ紹介、学んだことを記録する。
要件：
1. HTML と埋め込み CSS だけを使い、フレームワーク、JavaScript、外部フォントや画像は使わない。
2. 名前、短い紹介、作品欄、学習メモを含める。
3. ナビゲーションと主ボタンはページ内アンカーで実在する領域に移動する。
4. スマートフォンでも読みやすく、文字のコントラストとキーボードのフォーカスを明確にする。
5. 架空のサンプル情報を使い、ログイン、決済、アクセス解析、フォーム送信は追加しない。
6. UTF-8 と viewport のタグを含める。
自己紹介：[機密情報を含まない紹介を入力]
作品の説明：[紹介したい内容を入力]作品の確認チェックリスト
各項目を実際に操作して確認してください。このチェックは今回の自己確認用です。教材の完了状態は「完了にする」で保存します。
困ったときは
開くとソースコードが表示される
ファイル名が index.html.txt ではなく index.html であることを確認し、エディターではなくブラウザーで開いてください。
文字化けする・変更が反映されない
UTF-8 で保存し、meta charset タグを残してください。編集しているファイルと開いているファイルが同じか確認し、保存して再読み込みします。
AI に依存関係のインストールやキー設定を求められる
このプロジェクトでは不要です。「埋め込み CSS を使う単一の HTML ファイルに書き直し、フレームワーク、スクリプト、外部サービスに依存しないでください」と追加してください。
スタイルが表示されない、ボタンで移動できない
style の内容と閉じタグをすべてコピーしたか確認してください。リンクの #work と #about は移動先の id と完全に一致する必要があります。ダウンロードしたサンプルと部分ごとに比較できます。
AI が機能をどんどん追加してしまう
自己紹介、作品一つ、学習メモの三つだけを残します。追加機能は後で取り組むリストに書き、まず現在の版を確認基準に合わせて完成させましょう。
完成したら、次の一歩へ
狭い画面でも崩れないように、作品欄へ二つ目のプロジェクトを追加してみましょう。先に確認基準を書き、AI に修正を依頼して、最後に自分で確かめてください。
公開は任意です。ローカルファイルが自動的に他人へ公開されることはありません。ホスティングを選ぶ前に、アカウント要件、料金、公開範囲を確認し、個人の機密情報を除いてください。必要になったら学ぶ内容： デプロイと運用。
ほかのプロジェクトを試したい場合は、こちらも参考にしてください： フルスタック実践、ウェブページ生成ツール または Fabric ワークフロー。
出典とフィードバック
資料確認日：2026-09-22。参考サンプル v1。外部フレームワークには依存しません。
この教材の問題を報告する。どの手順で止まり、実際に何が表示されたかを教えてください。