プロンプトライブラリ
ウェブサイトウィザード
ユーザーの仕様に基づいてワンページウェブサイトを作成します。
このプロンプトを開発者Consoleにコピーして試してみてください!
Content | |
---|---|
System | 与えられた仕様に基づいてワンページウェブサイトを作成することがあなたの任務です。HTMLファイルにJavaScriptとCSSを埋め込んで提供してください。ウェブサイトには、ドロップダウンメニュー、動的なテキストとコンテンツ、クリック可能なボタンなど、様々な魅力的でインタラクティブなデザイン機能を組み込む必要があります。デザインは視覚的に魅力的で、レスポンシブで、ユーザーフレンドリーであることを確認してください。HTML、CSS、JavaScriptコードは、読みやすさとメンテナンス性のために、適切に構造化され、効率的に整理され、適切にコメントが付けられている必要があります。 |
User | ”EduQuest”というオンライン学習プラットフォームのワンページウェブサイトを、以下の機能とセクションで作成してください: 1. コースカテゴリー(数学、科学、言語、芸術)へのリンクと検索バーを備えた固定ナビゲーションバー。 2. オンラインで学習する学生を紹介するビデオ背景、「自分のペースで学ぶ」「新しい情熱を発見する」「視野を広げる」という3つのタグラインを3秒ごとに切り替える動的なタグライン、そしてコースカタログへ導く「始める」ボタンを備えたヒーローセクション。 3. コース画像、タイトル、講師、説明のプレースホルダーを表示するコースカードを備えた注目コースセクション。 4. 学習スタイルと興味を判断する短いクイズと、クイズを開始するボタンを備えたインタラクティブな「学習パス」セクション。 5. 満足した学生からの推薦文を特集する「成功事例」セクション。推薦文のテキストと学生名のプレースホルダーを含む。 6. プラットフォームのブログ、FAQ、プライバシーポリシーへのリンク、および問い合わせフォームとカスタマーサポート情報を含むモーダルウィンドウを開く「お問い合わせ」ボタンを備えたフッター。 ビデオ背景、コースカード、推薦文には仮のプレースホルダーコンテンツを含めてください。CSSスタイルは <head> セクション内の<style> タグ内に埋め込み、JavaScriptコードは<body> セクションの最後の<script> タグ内に配置してください。JavaScriptコードは、ヒーローセクションの動的タグラインを処理し、3秒ごとに異なるタグラインを切り替える必要があります。 |
出力例
このコードは”EduQuest”のワンページウェブサイトを作成し、以下の機能とセクションを含んでいます:
コースカテゴリー(数学、科学、言語、芸術)へのリンクと検索バーを備えた固定ナビゲーションバー。
プレースホルダーのビデオ背景、「自分のペースで学ぶ」「新しい情熱を発見する」「視野を広げる」という3つのタグラインを3秒ごとに切り替える動的なタグライン、そして「始める」ボタンを備えたヒーローセクション。
コース画像、タイトル、講師、説明のプレースホルダーを表示するコースカードを備えた注目コースセクション。
満足した学生からの推薦文を特集する「成功事例」セクション。推薦文のテキストと学生名のプレースホルダーを含む。
プラットフォームのブログ、FAQ、プライバシーポリシーへのリンク、および「お問い合わせ」ボタンを備えたフッター。
CSSスタイルは
<head>
セクション内の<style>
タグ内に埋め込まれ、JavaScriptコードは<body>
セクションの最後の<script>
タグ内に配置されています。JavaScriptコードは、setInterval関数を使用してヒーローセクションの動的タグラインを処理し、3秒ごとに異なるタグラインを切り替えます。
ビデオ背景、コース画像、推薦文はプレースホルダーであり、実際のコンテンツに置き換える必要があることにご注意ください。
APIリクエスト
Was this page helpful?