読み進み度バー

読み進み度バー: 用途

読み進み度バーは、記事を読むにつれて満たされていくページ上部の細い線で、あとどれくらいかを示します。

色またはグラデーション、高さ、上部か下部かを選べます。

使い方

1. 色、高さ、位置を選びます。
2. プレビューをスクロールして動作を確認します。
3. コードをコピーして、記事のページに貼り付けます。

使うタイミング

• ブログや長い記事。
• レシピやチュートリアル。
• ドキュメントのページ。

よくある質問

CSSだけでどう動くのですか？

スクロール連動アニメーション（animation-timeline: scroll()）を使うと、スクリプトなしで、スクロールを重くすることなく、ページのスクロールに合わせてバーが伸びます。ChromeとEdgeはバージョン115から、Safariは26から対応しています。それ以外のブラウザでは、コードが予備のJavaScriptを使います。

どこで使うと効果的ですか？

長い記事、レシピ、ガイドなど、あとどれくらいかが分かると読み続けやすいページです。短いページではバーがほとんど動かず、効果はありません。

バーはスクリーンリーダーで読み上げられますか？

いいえ。装飾なので aria-hidden が付いており、スクロールのたびに読み上げられることはありません。スクリーンリーダーを使う人には、テキスト内の位置を知る別の方法があります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール