詳しい人求む！

Webサイト作成プログレスバー HTML・CSS・JS

解決済

質問者：jun123.
質問日時：2021/01/01 00:28
回答数：3件

こんばんは。
表題の件、教えて欲しいです。
電子教材を作っているのですが、進捗がわかるプログレスバーを現在作っているサイトに組み込みたいです。具体的には、ページ内に「理解できた」ボタンを５つ作成し、一つ目の「理解できた」ボタンが押されるとページ上部に作られたプログレスバーの進捗が２０％まで、２つ目が押されると４０％まで、、、、、５つ押されると１００％まで進捗するというバーを作りたいです。
簡単にHTML・CSS・JSのコードを教えていただけないでしょうか。もしくは参考になるサイトがあればご紹介いただけないでしょうか。

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.3ベストアンサー

回答者： fujillin
回答日時：2021/01/01 18:20

こんにちは

＞簡単にHTML・CSS・JSのコードを教えていただけないでしょうか。
すでに紹介がありますが、プログレスバーを実現するjsライブラリは数多くありますので、検索して、お好みのものを利用するのが簡単だと思います。

一方で、表示がブラウザ依存になることをかまわなければ、<input type="range">がスライダー状の表示になることを利用することで、ライブラリ等を利用せずとも簡単に似たような表示ができます。

以下は、そのような一例ですが、ご参考までに。
※ <input type="range">は入力用なのでユーザが変更できますが、disabledにすると表示がグレーアウトしてしまうので、上からカバーをすることで変更できないようにしてあります。
※ 体裁を整えるために、直接関係のない処理も加えていますが、最低限では、input要素のvalue値を設定すれば表示にその値が反映されますので、他の部分はご参考まで。
※ ボタンは、順序通りでないと押せないのか、ランダムに押しても良いのか不明でしたので、特に制御は行っていません。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#progress { width: 18em; }
#progress p { margin: 0.5em 1em; padding: 0; }
#progress p button { width:8em; margin-left: 2em; }

#progress .slid_wrap { margin: 1em 0 1em 1em; position: relative; }
#progress .slid_wrap input { width: 11em; }
#progress .slid_wrap span { font-size: .8em; font-weight: bold; }
#progress .slid_wrap .cover {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
</style>

<script>
window.addEventListener('DOMContentLoaded', ()=>{
let p = document.getElementById('progress');
p.querySelector('fieldset').addEventListener('click', (e)=>{
let t = e.target;
if(e.target.nodeName != 'BUTTON') return;
t.value = 'done', t.textContent = '終了済';
t.disabled = 'disabled';
let n = p.querySelectorAll('button[value="done"]').length * 20;
p.querySelector('.slid_wrap input').value = n;
p.querySelector('.slid_wrap span').textContent = n + "%";
});
});
</script>
</head>
<body>
<div id="progress">
<div class="slid_wrap">
<label>理解度:</label>
<input type="range" min="0" max="100" value="0" />
<span>0%</span>
<div class="cover"></div>
</div>
<fieldset>
<legend>理解状況チェック</legend>
<p>第１章：<button type="button">理解できた</button></p>
<p>第２章：<button type="button">理解できた</button></p>
<p>第３章：<button type="button">理解できた</button></p>
<p>第４章：<button type="button">理解できた</button></p>
<p>第５章：<button type="button">理解できた</button></p>
</fieldset>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！本当にこのようなものが作りたかったのでドンピシャです。大変助かりました。
よろしければもう一点教えて欲しいのですが、「'終了済'」ボタンを押すと「理解できた」ボタンに再び戻り、かつプログレスバーの進捗も戻るようにするにはどのようなコードを追加すれば良いでしょうか。
よろしくお願い致します。

通報する

お礼日時：2021/01/01 22:57

No.4

回答者： fujillin
回答日時：2021/01/02 00:37

No3です。

＞「'終了済'」ボタンを押すと～～コードを追加すれば良いでしょうか。
追加というよりも、一部修正することで可能です。
修正部分だけを記述しても伝わらない可能性がありそうなので、修正後のスクリプト全体を参考までに以下に記しておきます。

とは言え、No3はあくまでも要領としての例ですので（汎用的なものではない）、質問者様の環境に合わせた調整ができないと、実装できないのではないかと懸念しますけれど・・・

window.addEventListener('DOMContentLoaded', ()=>{
let p = document.getElementById('progress');
p.querySelector('fieldset').addEventListener('click', (e)=>{
let n, t = e.target;
if(e.target.nodeName != 'BUTTON') return;
t.textContent = t.value?'理解できた':'終了済';
t.value = t.value?'':'done';
n = p.querySelectorAll('button[value="done"]').length * 20;
p.querySelector('.slid_wrap input').value = n;
p.querySelector('.slid_wrap span').textContent = n + '%';
});
});