重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

詳しい人求む！

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

解決済

  • 質問者：jun123.
  • 質問日時：
  • 回答数：3件

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

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

通報する

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

質問の本文を隠す

A 回答 (3件)

参考程度に

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞簡単に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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2021/01/01 22:57

No.4

  • 回答者： fujillin
  • 回答日時：

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 + '%';
});
});
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速ありがとうございます。やってみたところ問題なく実装できているように見えます！！間違いなくベストアンサーです。
最後に差し支えなければ、「終了済」ボタンの色などを変え、終わった感じを出したいのですが、これは難しいでしょうか？

通報する
お礼日時：2021/01/02 00:58

No.1

https://techacademy.jp/magazine/21418
どんなでしょ
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！参考になります。

通報する
お礼日時：2021/01/01 22:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報