WEBVTT

1
00:00:00.000 --> 00:00:00.749
こんにちは。

2
00:00:00.749 --> 00:00:03.496
エイチティーエムエル、リファレンス解説です。

3
00:00:03.496 --> 00:00:07.241
エイチティーエムエルタグ編の四十九本目は、メータータグです。

4
00:00:07.241 --> 00:00:11.486
メーターは、あらかじめ範囲が決まっている測定値を表すためのタグです。

5
00:00:11.486 --> 00:00:15.482
たとえば、ゼロから百までのうち今は六十五、というような数値です。

6
00:00:15.482 --> 00:00:21.724
ブラウザーはこの数値をゲージのような見た目で表示してくれるので、どれくらいなのかが一目で伝わります。

7
00:00:21.724 --> 00:00:24.971
今回は基本の書き方から、範囲を三つに分ける属性、よく似たプログレスとの違いまで、

8
00:00:24.971 --> 00:00:28.217
順に学んでいきましょう。

9
00:00:28.217 --> 00:00:32.212
身近な表示を思い浮かべながら聞くと、役割がつかみやすくなります。

10
00:00:32.212 --> 00:00:34.106
使いどころを整理します。

11
00:00:34.106 --> 00:00:40.420
代表例は、保存領域の使用量や電池の残量のように、上限が決まっている量の表示です。

12
00:00:40.420 --> 00:00:45.471
テストの点数、商品の評価、ディスクの空き容量なども向いています。

13
00:00:45.471 --> 00:00:48.944
大切なのは、分母がはっきりしていることです。

14
00:00:48.944 --> 00:00:54.311
最大値が分からない数値や、どんどん増えていく途中の量には向きません。

15
00:00:54.311 --> 00:01:01.572
また、作業がどこまで進んだかを示す進捗には、後で紹介するプログレスという別のタグを使います。

16
00:01:01.572 --> 00:01:07.413
メーターは今の状態の測定値、プログレスは作業の進み具合、と覚えてください。

17
00:01:07.413 --> 00:01:12.464
身の回りの数値表示を思い浮かべると、候補が見つけやすくなります。

18
00:01:12.464 --> 00:01:14.829
基本の書き方を確認します。

19
00:01:14.829 --> 00:01:19.196
メーターには開始タグと終了タグの両方が必要です。

20
00:01:19.196 --> 00:01:23.926
一番シンプルな形は、バリュー属性だけを書く方法です。

21
00:01:23.926 --> 00:01:32.113
画面の一つ目は、ゼロから一までの割合として〇・六を指定し、六十パーセントと表示しています。

22
00:01:32.113 --> 00:01:40.119
二つ目は、ミンで最小値ゼロ、マックスで最大値百を指定し、バリューに六十五を入れた形です。

23
00:01:40.119 --> 00:01:50.489
タグの中にも六十五パーセントと文章で数値を書いておくのがポイントで、ゲージが表示できない環境でも内容が伝わります。

24
00:01:50.489 --> 00:01:54.128
まずはこの形を書けるようになりましょう。

25
00:01:54.128 --> 00:02:00.132
書いたらブラウザーで開いて、ゲージが表示されるか確かめてください。

26
00:02:00.132 --> 00:02:03.375
範囲を決める三つの属性を整理します。

27
00:02:03.375 --> 00:02:07.159
ミンは最小値で、省略するとゼロになります。

28
00:02:07.159 --> 00:02:11.124
マックスは最大値で、省略すると一になります。

29
00:02:11.124 --> 00:02:14.187
バリューは今の測定値そのものです。

30
00:02:14.187 --> 00:02:21.755
たとえば試験の点数なら、ミンがゼロ、マックスが百、バリューが七十二、という具合です。

31
00:02:21.755 --> 00:02:27.881
注意点として、バリューはミン以上マックス以下の範囲に収めてください。

32
00:02:27.881 --> 00:02:35.269
範囲から外れた値を書くと、ブラウザーが端の値に丸めて表示してしまうことがあります。

33
00:02:35.269 --> 00:02:43.378
単位は属性には書かず、パーセントなどの単位はラベルや文章の側で伝えるのが正しい書き方です。

34
00:02:43.378 --> 00:02:49.144
実際の数値で置き換えて考えると、それぞれの役割がはっきりします。

35
00:02:49.144 --> 00:02:53.489
メーターらしい機能が、範囲を三つに分ける三つの属性です。

36
00:02:53.489 --> 00:02:57.989
ローは低い範囲との境界、ハイは高い範囲との境界を示します。

37
00:02:57.989 --> 00:03:01.868
画面の例では、二十未満が低い範囲、二十から八十が中くらい、八十を超えると高い範囲、

38
00:03:01.868 --> 00:03:05.747
という分け方です。

39
00:03:05.747 --> 00:03:10.247
そしてオプティマムは、望ましい値がどこにあるかを示します。

40
00:03:10.247 --> 00:03:17.850
保存領域なら空いている方が望ましいのでゼロ寄り、逆に点数なら高い方が望ましいので百寄りに置きます。

41
00:03:17.850 --> 00:03:25.453
ブラウザーはバリューが望ましい範囲にあるかどうかで、ゲージの色合いを変えて表示することがあります。

42
00:03:25.453 --> 00:03:30.884
色の変化はブラウザーによって違うため、数値の確認も忘れないでください。

43
00:03:30.884 --> 00:03:33.625
記事の活用事例を読み解きます。

44
00:03:33.625 --> 00:03:42.945
保存領域の使用量を表す例で、ラベル要素が何の数値かを示し、メーター本体がアイディーで結びついています。

45
00:03:42.945 --> 00:03:47.331
値は百のうち六十五、つまり六十五パーセントです。

46
00:03:47.331 --> 00:03:53.179
ローが二十、ハイが八十なので、六十五は中くらいの範囲に入ります。

47
00:03:53.179 --> 00:03:59.758
オプティマムはゼロで、これは使用量は少ない方が望ましい、という意味です。

48
00:03:59.758 --> 00:04:08.530
もし値が九十五のように高い範囲に入ると、残りが少ない状態として色が変わって見える場合があります。

49
00:04:08.530 --> 00:04:12.551
数値と意味がセットで伝わる、良いお手本です。

50
00:04:12.551 --> 00:04:18.216
ラベルとゲージと数値がそろうと、初見の人にも迷わず伝わります。

51
00:04:18.216 --> 00:04:20.535
読み手への配慮も大切です。

52
00:04:20.535 --> 00:04:27.492
一つ目は、ラベル要素や見出しで、何を測った数値なのかを必ず言葉で示すことです。

53
00:04:27.492 --> 00:04:34.270
ゲージだけがぽつんと置かれていても、それが容量なのか評価なのか分かりません。

54
00:04:34.270 --> 00:04:42.476
二つ目は、タグの中や前後の文章に、三十五パーセントのように数値と単位を文章でも書くことです。

55
00:04:42.476 --> 00:04:48.184
ゲージの色の違いだけで良い悪いを判断させる作りは避けてください。

56
00:04:48.184 --> 00:04:53.892
色の見え方には個人差があり、読み上げツールでは色は伝わりません。

57
00:04:53.892 --> 00:04:59.422
数値を言葉でも添えることが、誰にでも伝わる表示につながります。

58
00:04:59.422 --> 00:05:05.308
自分が読み手になったつもりで、情報が足りるか見直してみてください。

59
00:05:05.308 --> 00:05:08.548
よく混同されるプログレスとの違いを整理します。

60
00:05:08.548 --> 00:05:15.590
プログレスは、ダウンロードやアップロード、読み込み中といった、作業がどこまで進んだかを示すタグです。

61
00:05:15.590 --> 00:05:20.943
これに対してメーターは、容量や評価など、今この瞬間の状態の測定値を示します。

62
00:05:20.943 --> 00:05:27.140
見た目が似ていても意味は別物なので、読み上げツールを使う人への伝わり方が変わってきます。

63
00:05:27.140 --> 00:05:33.479
判断に迷ったら、時間が経てば百パーセントに向かって増えていくものかどうかを考えてください。

64
00:05:33.479 --> 00:05:37.563
増えていく作業ならプログレス、時点の状態ならメーターです。

65
00:05:37.563 --> 00:05:41.648
この区別はセマンティックな書き方の大切な練習にもなります。

66
00:05:41.648 --> 00:05:43.658
見た目について確認します。

67
00:05:43.658 --> 00:05:51.389
メーターの標準表示はブラウザーごとに異なり、色や形はそれぞれのブラウザーのデザインに任されています。

68
00:05:51.389 --> 00:05:56.955
シーエスエスでは、画面の例のように幅や高さを指定するのが手軽で確実です。

69
00:05:56.955 --> 00:06:01.981
一方、ゲージ内部の色まで細かく変えようとすると、ブラウザーごとに異なる専用の指定が必要になり、

70
00:06:01.981 --> 00:06:07.006
初心者のうちは手間がかかりすぎます。

71
00:06:07.006 --> 00:06:11.876
まずは標準の見た目で意味を正しく伝えることを優先し、凝った配色が必要なら、

72
00:06:11.876 --> 00:06:16.747
数値を文章で添えるなど別の工夫と組み合わせましょう。

73
00:06:16.747 --> 00:06:21.540
表示の違いを前提に、どの環境でも意味が伝わる作りにしましょう。

74
00:06:21.540 --> 00:06:23.549
ブラウザー互換性を確認します。

75
00:06:23.549 --> 00:06:29.576
記事が参照するエムディーエヌの記録では、メータータグはクロームが六以降、

76
00:06:29.576 --> 00:06:35.604
エッジが十三以降、ファイアフォックスが十六以降、サファリが六以降と、主要ブラウザーで古くから対応しています。

77
00:06:35.604 --> 00:06:39.086
今回扱った六つの属性も、同じバージョンから使えます。

78
00:06:39.086 --> 00:06:43.573
作ったあとの確認では、三百二十ピクセル程度の細い画面幅や文字を拡大した状態でも、

79
00:06:43.573 --> 00:06:48.060
ラベルとゲージと数値が欠けずに読めるかを見てください。

80
00:06:48.060 --> 00:06:52.346
色だけでなく数値でも状態が分かるか、あわせて確かめると安心です。

81
00:06:52.346 --> 00:06:56.632
新しい属性を使うときは、本体とは別に対応状況も確認してください。

82
00:06:56.632 --> 00:06:58.039
最後にまとめです。

83
00:06:58.039 --> 00:07:04.290
メータータグは、最小値と最大値が決まった範囲の中で、今の測定値を示すタグでした。

84
00:07:04.290 --> 00:07:05.853
ポイントは三つです。

85
00:07:05.853 --> 00:07:10.228
一つ目、ミン、マックス、バリューで範囲と値を決めること。

86
00:07:10.228 --> 00:07:14.683
二つ目、ロー、ハイ、オプティマムを使うと、低い、中くらい、高いという状態と、

87
00:07:14.683 --> 00:07:19.137
どちらが望ましいかまで伝えられること。

88
00:07:19.137 --> 00:07:25.700
三つ目、作業の進捗にはプログレスを使い分け、数値は色だけでなく文章でも示すことです。

89
00:07:25.700 --> 00:07:31.326
練習として、自分のページに保存領域や達成率のゲージを作ってみてください。

90
00:07:31.326 --> 00:07:32.733
お疲れさまでした。

91
00:07:32.733 --> 00:07:34.140
次回もお楽しみに。

92
00:07:34.140 --> 00:07:38.828
小さな例から試すことが、正しい使い分けを身につける近道です。