
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
ITコラム
2017.03.02
HTML5からの新要素にmeter要素があります。meter要素は、特定の量(範囲)に対する現在量(位置)を表示する要素です。
今回は、このmeter要素についてまとめたいと思います。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)( 本ページ )
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える
1.meter要素
2.ゲージの作成
3.optimum属性で最適領域を決定
meter要素は、特定の範囲内で現在の分量を表示する要素です。
全体に対する割合を、位置で示します。
output要素と同じく、データの送信は行わず、ただ表示することが目的の要素です。
meter要素で作られる部品は、次のように表示されます。
現在量を示している部分をゲージと言います。
同じような表示ですが、ダウンロードを行う時等、進捗状況を表示する場合は、その目的のためのprogress要素があるので、meter要素ではなくprogress要素で作成します。
また、meter要素は、確定している全体量に対する現在量を表示するための要素なので、全体量(範囲)が定まっていない場合には使えません。
使用する要素 : <meter>~</meter>
meter要素の属性 value属性 指定が必須
現在の位置を指定min属性 最小値を指定 max属性 最大値を指定 low属性 低い値の境界点を指定 high属性 高い値の境界点を指定 optimum属性 最適な値を指定 form属性 親のform要素のid名を呼び出して関連付ける グローバル属性 id属性、class属性、title属性、style属性など
●何の属性も指定しない場合、次のような表示になります。
ゲージの表示がなく、バーだけが表示されました。
上の表示に対するhtmlコードは、以下の通りです。
<meter></meter>
value属性はデフォルト値が0ですが、value属性は指定が必須ですので、実際には、value値が0の場合でも略さずに指定した方が良いです。
●value属性のみを指定して、ゲージを作成します。
上の表示に対するhtmlコードは、以下の通りです。
<meter value="0.3">30%</meter>
meter要素が未対応のブラウザ対策として、<meter>と</meter>の間に表示したい現在量(位置)がわかるテキストを書いています。
meter要素に対応しているブラウザでは、このテキストは表示されません。
min属性のデフォルト値が0、max属性のデフォルト値が1のため、value=”0.3″という指定の仕方をしています。
●min属性とmax属性を指定して、ゲージを作成します。
上の表示に対するhtmlコードは、以下の通りです。
<meter min="0" max="100" value="40">40%</meter>
min属性のデフォルト値は0なので、上の例では、min属性を指定しなくても結果は同じになります。
●属性にはマイナスの数値を指定することもできます。
上の表示に対するhtmlコードは、以下の通りです。
<meter min="-100" max="100" value="-50">-50%</meter>
●low属性、high属性、optimum属性で低領域、高領域、最適領域を指定します。
low属性は、低い領域の上限を指定します。
high属性は、高い領域の下限を指定します。
optimum属性は、最適な領域のある1点を指定します。
low属性のデフォルト値は、min属性値と同じです。
high属性のデフォルト値は、max属性値と同じです。
optimum属性のデフォルト値は、minからmaxまでの範囲のど真ん中です。
value属性以外の属性を指定しない場合は、それぞれのデフォルト値で、minは0、maxは1、lowは0、highは1、optimumは0.5、になります。
optimum属性は、ピンポイントで1点を指定しますが、ブラウザでは1点がある領域全体が表示されます。
optimum属性がある領域は、最適領域(optimum)として扱われ、ゲージの色はグリーンで表示されます。
この最適領域の隣の領域は、準最適領域(suboptimal)として、ゲージの色はイエローで表示されます。
このまた隣の最適領域から遠い領域は、非最適領域(less good)として、ゲージの色はレッドで表示されます。
●low属性とhigh属性を指定しないと、次のような表示になります。
htmlコードは、以下の通りです。 <meter max="100" value="10">10%</meter> <meter max="100" value="50">50%</meter> <meter max="100" value="90">90%</meter> 上の例では、lowが0、highが100になるため、ゲージ全体が1つの領域になっています(領域が分けられていません)。 |
●low属性を20、high属性を80に指定すると、次のような表示になります。
htmlコードは、以下の通りです。 <meter max="100" low="20" high="80" value="10">10%</meter> <meter max="100" low="20" high="80" value="50">50%</meter> <meter max="100" low="20" high="80" value="90">90%</meter> lowとhighで領域が3つに分けられました。 |
●high属性は80のまま、low属性を60に指定すると、次のような表示になります。
htmlコードは、以下の通りです。 <meter max="100" low="60" high="80" value="10">10%</meter> <meter max="100" low="60" high="80" value="20">20%</meter> <meter max="100" low="60" high="80" value="50">50%</meter> <meter max="100" low="60" high="80" value="80">80%</meter> <meter max="100" low="60" high="80" value="90">90%</meter> optimumはデフォルト値の50で、この1点がある領域が最適領域なので、低い領域(1~60)が最適領域になりました。 |
optimum属性は、low属性値とhigh属性値の範囲の真ん中の1点がデフォルト値となります。
そして、optimum属性値、low属性値、high属性値をそれぞれ指定すると、グリーン、イエロー、レッドで表示される領域を自由に決めることができます。
meter要素を使って「何を表示させるのか」によって、「どこが最適な領域なのか」も変わります。
ディスクの使用量等は少ない方が最適領域になりそうですし、投票率等は多い方が最適領域になりそうです。
このように、最適領域を自由に指定するためにoptimum属性があります。
●min=0、max=100、low=20、high=80として、optimum属性を90に指定すると、次のような表示になります。
htmlコードは、以下の通りです。 <meter max="100" low="20" high="80" optimum="90" value="10">10%</meter> <meter max="100" low="20" high="80" optimum="90" value="20">20%</meter> <meter max="100" low="20" high="80" optimum="90" value="50">50%</meter> <meter max="100" low="20" high="80" optimum="90" value="80">80%</meter> <meter max="100" low="20" high="80" optimum="90" value="90">90%</meter> |
●min=0、max=100、low=20、high=80として、optimum属性を10に指定すると、次のような表示になります。
htmlコードは、以下の通りです。 <meter max="100" low="20" high="80" optimum="10" value="10">10%</meter> <meter max="100" low="20" high="80" optimum="10" value="20">20%</meter> <meter max="100" low="20" high="80" optimum="10" value="50">50%</meter> <meter max="100" low="20" high="80" optimum="10" value="80">80%</meter> <meter max="100" low="20" high="80" optimum="10" value="90">90%</meter> |
●携帯電話の電池残量を表示してみました。
AM6:00~AM9:00:90% htmlコードは、以下の通りです。 AM6:00~AM9:00:90% <meter max="100" low="30" high="70" optimum="80" value="90">90%</meter> AM9:00~PM0:00:70% <meter max="100" low="30" high="70" optimum="80" value="70">70%</meter> PM0:00~PM3:00:50% <meter max="100" low="30" high="70" optimum="80" value="50">50%</meter> PM3:00~PM6:00:30% <meter max="100" low="30" high="70" optimum="80" value="30">30%</meter> PM6:00~PM9:00:20% <meter max="100" low="30" high="70" optimum="80" value="20">20%</meter> |
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.