使用事例一覧に戻る
初級
初心者：HTMLページ作成
プログラミング未経験者がAIツールを使って自己紹介サイトを作成する事例
所要時間
2-3時間
対象者
プログラミング未経験者
成果物
自己紹介サイト（HTML/CSS/JavaScript）
技術数
4つの技術
使用ツール
ChatGPT
VS Code
Live Server
実装機能
レスポンシブデザイン
スムーススクロール
お問い合わせフォーム
ポートフォリオギャラリー
使用技術
HTML5CSS3JavaScriptBootstrap
実装手順
1. 基本構造の作成
ChatGPTに以下のように質問します：
「自己紹介サイトのHTML構造を作成してください。ヘッダー、プロフィール、スキル、お問い合わせのセクションを含めて」2. スタイリング
レスポンシブ対応のCSSを追加：
「モバイルフレンドリーなCSSスタイルを作成し、Bootstrap 5を使用してください」3. インタラクティブ要素
JavaScriptでスムーススクロールを実装：
「ナビゲーションメニューでスムーススクロールするJavaScriptコードを書いてください」