html - 10進値をHTMLボックスとして表示する

Question

上記の画像のように表現したい1から5までの10進数を取得します。たとえば、この画像は値を示しています3.7

を使用してそれを表示するための最良の方法は何でしょうかhtml + css

Answer 1

これは、ULといくつかのDIVで行うことができます。

<ul>
<li>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
</li>

簡単な例を次に示します。

http://jsfiddle.net/EfpPr/5/

明らかに、必要に応じてDIVをオン/オフに設定するには、ほんの少しのjavascript/jQueryが必要です。

Answer 2

まだ投稿していないマークアップにもよりますが、2枚の背景画像を選びます。1つは赤いバーが入っており、もう1つはすべてのボックスがあり、中央が透明です。次に、少し計算して（1〜5の範囲をパーセントまたはピクセルのいずれかにマッピングします）、赤いバーを。で移動しbackground-positionます。

バーが不透明な領域の1つの後ろにある場合、違いはわかりませんが、それほど悪くはありませんか？

Answer 3

小数をパーセンテージに変換できると仮定すると、これは純粋なCSSで実行できます。または、JavaScriptの小さなスニペットを使用して、パーセンテージ値を設定/調整できます。

IE7 +、Chromeなど。

例1

簡単な例、スクリプトなし、最小限のマークアップ：http: //jsfiddle.net/GqK6p/6/

HTML

<div id="progress"></div>
<ul id="mask">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

#wrapper { position: relative; height: 30px; width: 180px; }
#progress { position: absolute; top: 0; left: 0; z-index: 0; background-color: red; width: 74%; height: 100%; }
#mask { position: absolute; z-index: 1; height: 100%; }
LI { float: left; border: 4px solid #aaa; height: 22px; width: 22px; }

例2

もう少し洗練された例で、各ボックスの内側のスタイリングを可能にします：http: //jsfiddle.net/GqK6p/2/

これは、バーのパーセンテージベースの幅の使用法も示しています。

HTML

<div id="wrapper">
    <div id="progress"></div>
    <ul id="mask">
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>  
</div>

CSS

#wrapper { position: relative; height: 30px; width: 180px; }

/* set width to whatever percentage makes sense based on decimal value */

#progress { position: absolute; top: 0; left: 0; z-index: 0; background-color: red; 
    width: 59%; height: 100%; }

#mask { position: absolute; z-index: 1; height: 100%; }
LI { float: left; border: 4px solid #aaa; height: 22px; width: 22px; }
LI > DIV { border: 1px solid #555; height: 20px; }

例3

これは、JavaScriptを使用してプログレスバーの幅を動的に調整する方法を示すアニメーションのバリエーションです。http：//jsfiddle.net/GqK6p/4/

var progress = $("#progress");
var width = 0; // use whatever starting value makes sense

setInterval(function(){

    // increment/process as desired
    if( ++width > 100 ){
         width = 0;
    }        

    progress.css("width",  width + "%");       
}, 25);​

HTML5進捗要素

progressちなみに、このタイプの情報のセマンティックな選択はHTML 5要素である可能性がありますが、ブラウザーのサポートはまだ完了しておらず、スタイルを設定する機能はないと思いますprogress。