この記事の目次
画像保管庫の使用量が増えて棒がいっぱいになった。アップロード完了のようにも見えますが、ここでは「空きがなくなった」状態です。一定範囲の測定値を示すときは、棒が伸びるほどよいのか、何を測っているのかを先に決めます。
題材は架空の画像保管庫で、上限100MBに対する使用量を表示する練習です。HTMLの属性が読める人を対象にします。実際のストレージへ接続せず、静的な値で表示の意味を組み立てます。エディターとブラウザーがあれば取り組めます。
棒の終点は「完了」か「容量の上限」か
meterは、範囲の分かっている量を示すHTML要素です。今回の100MBは作業の終了ではなく保管できる上限で、使った量が30MBから90MBへ増えても「よく進んだ」とは判断しません。低い使用量の方が空きに余裕がある、という見方になります。
作業の完了量を表す場合は、progressで進捗を示す記事の対象です。同じ横棒に見えても、送信済み件数と保管中の容量は別の情報です。一つの画面に両方があれば、名前も「送信の進み具合」「保管庫の使用量」と分けます。
また、上限自体が分からない量を、見栄えのため100に換算しません。比較する範囲が決まらなければ、まず「使用量30MB」という文章だけで示す案を選べます。meterを使う理由は、既知の範囲内の位置も伝えることです。
100MBの上限と、60・80の区切りを別に決める
この練習では、使用量60MB以下を余裕あり、60MBを超えて80MB以下を確認対象、80MBを超えたら整理候補を探す区間とします。これは架空の保管庫で決めた表示ルールで、一般のサービスに共通する警告基準ではありません。
| 属性 | 練習で使う値 | 何を表すか |
|---|---|---|
| min | 0 | 使用量の下限 |
| max | 100 | 保管庫の上限 |
| low | 60 | 低い区間の上端 |
| high | 80 | 高い区間を分ける境目 |
| optimum | 0 | 低い側を望ましい区間とする目印 |
| value | 30または90 | その見本の使用量 |
lowやhighは容量を増やす属性ではありません。maxが量の範囲を決め、その中をどう評価するかを区切っています。optimumも現在の値ではなく、望ましい側を表すための値です。MDNのmeterの属性説明で、それぞれの役割を確認できます。
この設定では0がlowより小さいため、低い使用量の側を望ましい区間にします。反対に、目標に近いほどよい測定なら判断は変わります。ただし、数値が大きいか小さいかだけで評価を決められないデータには、無理に区間の優劣を付けないでください。
二つの使用量を、数字付きの見本にする
次をcapacity.htmlとして保存します。30MBと90MBは同じ保管庫の別時点を比較する見本で、二つの実測値ではありません。読み取る単位はすべてMBで統一しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>保管庫の使用量｜練習</title>
<style>
body { margin: 1rem; color: #222; font-family: sans-serif; line-height: 1.8; }
main { max-width: 36rem; margin-inline: auto; }
section { margin-block: 2rem; }
meter { display: block; width: 100%; max-width: 24rem; height: 2rem; }
</style>
</head>
<body>
<main>
<h1>画像保管庫（架空の練習）</h1>
<section>
<h2>見本A</h2>
<label for="capacity-a">保管庫の使用量</label>
<meter id="capacity-a" min="0" max="100" low="60" high="80"
optimum="0" value="30" aria-describedby="note-a">30 / 100 MB</meter>
<p id="note-a">100MB中30MBを使用。空きは70MBで、余裕があります。</p>
</section>
<section>
<h2>見本B</h2>
<label for="capacity-b">保管庫の使用量</label>
<meter id="capacity-b" min="0" max="100" low="60" high="80"
optimum="0" value="90" aria-describedby="note-b">90 / 100 MB</meter>
<p id="note-b">100MB中90MBを使用。空きは10MBです。整理する画像を確認します。</p>
</section>
</main>
</body>
</html>
labelのforとmeterのidが対応し、何の値かを示します。補足はタグの外にも残し、aria-describedbyでその文章へ関連付けています。棒の色や形は環境によって異なるので、「緑なら合格」といった見た目だけの条件にしません。
完成例ではAが範囲の3割、Bが9割の量です。色が区別できなくても、外側の数字と空き容量から違いを読めます。区間を追加したから自動で整理が始まるわけではなく、ここで行うのは状態の表示だけです。
満杯に見える失敗と、単位の混在を直す
一つ目の失敗は、valueを30にしたままmaxを省くことです。maxの既定値は1なので、30MBを100MBの3割として表せません。修正ではmax="100"を戻し、上限と現在量を同じ単位でそろえます。再確認は属性の30と100、文章の30MBと100MBの四つを照合することです。
二つ目の失敗は、valueだけ0.9へ変え、外の文章を90MBのまま残すことです。maxが100のままなら、0.9は90%の意味になりません。修正ではvalueを90へ戻すか、全体を別の尺度へそろえます。この課題ではMBで統一し、Bの空きが10MBになることを再確認します。
棒が範囲に収まって見えても、元データが正しいとは限りません。上限100に対して使用量120を受け取ったときは、表示の見た目で済ませず、データや単位の誤りを調べる必要があります。入力を受け付ける実装へ進むなら、数値と範囲を確認する記事のように表示前の検査を別に設けます。
さらに、値が取れなかった場合を0へ置き換えると、空きに余裕があるという誤案内になります。静的な見本ではすべて既知の値ですが、取得できない画面なら「使用量を確認できません」と文章で伝える設計を加えます。meterに不明な値を推測して入れないことが境界です。
70MBへ変えた結果を、文章と属性から判定する
最後にAだけを使用量70MBへ変えます。10〜15分を目安に、value、内側の代替文、外の補足文を一組で更新してください。解答例は「100MB中70MBを使用。空きは30MBです。使用量を確認します」です。highの80は変更しません。
確認条件は、Aのvalueが70でmaxが100のまま、Aの空きが30MB、Bのvalueが90で説明も90MBのまま、二つのlabelが別々のidを指していることです。これで一つの見本だけを更新できたか、判断の基準まで書き換えていないかを調べられます。
幅320pxでも数字と説明の末尾が読めるか、読み上げ環境があれば名前と値を把握できるかも確認します。未実施の環境は分けて記録してください。無料レッスンで表示を組むときも、棒の長さに加えて「何を測り、どこから注意するか」を文章で説明できる状態を完成とします。
TRY A LESSON
記事の内容を、課題で確かめる
記載内容へのご質問や訂正のご連絡は、hello@junkbranding.comまでお願いします。
