2. DOM操作プロジェクトレッスン 6/6

DOM操作プロジェクト

これまで学んだDOM操作の知識を使って、インタラクティブなWebページを作成します。

プロンプト

これまで学んだDOM操作の知識（要素の取得、操作、イベント処理、フォーム処理）を使って、シンプルなタブ切り替えコンポーネントを作成したいと思います。複数のタブがあり、クリックすると対応するコンテンツが表示されるコンポーネントのHTML、CSS、JavaScriptコードを作成してください。また、コードの各部分の説明と、どのようにDOM操作の概念が使われているかについても教えてください。

解説

このプロンプトでは、これまで学んだDOM操作の知識を総合的に活用して、実用的なタブ切り替えコンポーネントを作成します。実際にコードを書いて動かすことで、DOM操作の理解が深まります。

前のレッスン

次の章へ

AIサービスへのリンク

以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。

ChatGPT

OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。

Google Gemini

Googleが提供するAIチャットサービス。無料で利用できます。

Claude

Anthropicが提供するAIチャットサービス。無料版は利用可能です。

※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。

※ サービスによっては、アカウント登録が必要な場合があります。