モデルに登録した値の大きさごとに色を変えたい

Question

###前提・実現したいこと
モデルに登録した値の大きさごとに色を変えたい。

###該当のソースコード
scoreに登録された値が０〜５０なら青、５１〜８０ならオレンジ、８１〜１００なら赤でscore変数の値を表示させたい。
models.pyに

class TestScore(models.Model):
    score = models.IntegerField(max_length=100, null=True)

views.pyに

def test_result(request):
    test_score = TestScore.objects.all()
    return render(request, 'detail.html', {'test_score': test_score})

htmlに

    <div class="col-sm-8">
        {% for score in test_score.all %}
           <h4> {{ score.score }}</h4>
        {% endfor %}
    </div>

と書いた。

###試したこと
if-else文で、０〜５０なら青、５１〜８０ならオレンジ、８１〜１００なら赤で表示するというものを書こうとしたが、htmlにどう書けばいいのかわからなかった。
jQueryでそのように値により色を変える方法を見つけ、自分はhtmlだけでできると思っていたが、jQueryなどを使う必要があるのかもしれないとも思った。http://y0m0r.hateblo.jp/entry/20120621/1340291543

Answer 1

if-else文で、０〜５０なら青、５１〜８０ならオレンジ、８１〜１００なら赤で表示するというものを書こうとしたが、htmlにどう書けばいいのかわからなかった。

いい感じです。多分私もそうします。

こんな感じでしょうか。

<link rel="stylesheet" type="text/css" href="score.css">
    <div class="col-sm-8">
        {% for score in test_score.all %}
           {% if score.score > 80 %}
               <h4 class="high"> {{ score.score }} </h4>
           {% else %}
               {% if score.score > 50 %}
                   <h4 class="middle"> {{ score.score }} </h4>
               {% else %}
                   <h4 class="low"> {{ score.score }} </h4>
               {% endif %}
           {% endif %}
        {% endfor %}
    </div>

これだけだと色付けしないので、ちゃんとCSSを準備します。

/* score.css */

.high h4 {
    color: red;
}
.middle h4 {
    color: orange;
}
.low h4 {
    color: blue;
}

Django テンプレート言語 — Django 1.4 documentation

P.S.

• なんかもう少しスマートに書けそうなのだけどなあ……。
• 生のCSSを空で書くのが久々なので、間違っていたらご容赦ください。