HTML5 の「進捗」や「メーター」の適切な使い方は? 質問する

HTML5 の「進捗」や「メーター」の適切な使い方は? 質問する

10 ページ (1 ページに 1 つの質問) のアンケートがあるとします。各ページの先頭に、「10 問中 2 問目」というテキストを含めます。このようなものは、「進捗" または "メートル「?」

意味的に言えば、「progress」が最初は最も適しているように思えます。しかし、例文を読んで見れば見るほど、「meter」の方が適切かもしれないと思うようになりました。

<meter max="10" value="1">Question 1 of 10</meter>
<progress max="10" value="1">Question 1 of 10</progress>

ベストアンサー1

による最新の HTML5 ワーキングドラフト、このprogressタグは、現在実行中の特定のタスクの進行状況を表示するのに最適です。 は、meterディスク容量やメモリ使用量など、タスクに関係のないゲージに最適です。

このprogress要素は、タスクの完了の進行状況を表します。

一方

このmeter要素は、既知の範囲内のスカラー測定値、または小数値を表します。たとえば、ディスク使用量、クエリ結果の関連性、特定の候補者を選択した投票人口の割合などです。

編集- レンダリングとスタイル設定に問題があるようなので、他のタグを使用するとうまくいくかもしれません。たとえば、魅力的な進行状況ナビゲータは次のようにコーディングできます。

<nav class="progress">
    <ol>
        <li class="active">Your Info</li>
        <li>General</li>
        <li>Detailed</li>
        <li>Last Step</li>
    </ol>
</nav>

そして何かでスタイリングするこのような

おすすめ記事