スクロール連動プログレスバーをAIで作る｜コピペ可能なプロンプト作例

このプロンプトは、Webページのスクロール量に連動して進行するプログレスバーのコードをAIに生成させるための作例です。「上部固定」「スムーズなアニメーション付き」という具体的な要件を盛り込むことで、CSSのposition固定とtransitionプロパティを組み合わせた実用的な実装をワンプロンプトで得られます。

フロントエンド開発の補助やコーディング学習の場面で特に役立ちます。ChatGPTやGeminiなど汎用モデルに投げると、HTML・CSS・JavaScriptの一式をまとめて出力してくれるため、そのままブラウザで動作確認が可能です。カラーや太さなど細部の調整条件を追記するとより自分好みの出力に近づけられます。