AIで作るスクロール連動プログレスバー｜プロンプト作例コピペOK
P
プロンプト
ページをスクロールすると連動して進むプログレスバーを作成。バーは上部に固定され、スクロール率を表示します。
CODE PREVIEW
エディタを読み込み中…
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
ページをスクロールした際に、スクロール位置に応じて進行状況を視覚的に表示するプログレスバーです。コンテンツの長さと現在位置をフィードバックします。
プロンプトの解説
このプロンプトは、Webページのスクロール位置に連動して動くプログレスバーをコード生成AIに作らせるための指示です。画面上部に固定されたバーがスクロール率に応じてリアルタイムで伸縮する動作を、HTML・CSS・JavaScriptの組み合わせで実装させることができます。
ブログ記事や長文コンテンツを持つサイトに組み込む際に有用で、読者が現在どの位置を読んでいるかを直感的に把握できます。プロンプトに配色やバーの高さなどの具体的な条件を追加することで、デザインの調整も合わせて指示できます。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選