mark/menu/meter/nav - 徹底的にHTML5宣言

mark要素は、他のコンテキストとの関連性に起因して、参照を目的にマークまたはハイライトされる、あるドキュメントの中の一連のテキストを表します。この要素が、引用で使われるときや、散文から参照されたテキストのブロックで使われるとき、それはハイライトを意味します。この要素は、もともとは存在していないもので、読者の注意を引くために追加されるものです。もともとの著作者がそのブロックを書いたときには、そのテキスト部分は重要と見なされていなかったのでしょう。しかし、今は、mark要素が加えられたことで、著者の意に関係なく注目の的とされているのです。この要素がドキュメントの主たる散文で使われたとき、それは、ユーザーの現在の行動との関連に起因して注目されそうなドキュメントの一部を指し示します。

HTML5コーディングならココ！

<h3>バタコ の検索結果</h3>

【07:12】 バタコの笑い声で起床。まだ眠い。 
顔を洗う。 
顔が濡れて力が出ない。 
歯はみがかない。俺には歯がない。
【07:22】朝食のかわりに顔にアンコをつめる。 
頭が重い。イヤになる。 
「パトロールに行っておいで」 
ジャムの言葉だ。 
うるさいんだよ。俺は警察じゃないただのパンなんだよ。 
「気を付けて！」 
うるせぇんだよ、このバタコが。 
【07:35】ダルいパトロール出発。 
庭ではうるせぇ犬がわめいている。殺すぞ。
【07:43】「助けて～！」 
カレーが叫んでいる。 
俺にどうしろっていうんだよ。 
【07:50】カレー救出。 
バタコにビーフシチューを入れられたらしい。 
うだつの上がらない奴だ。 
【08:03】今日は曇りだ。 
気分が盛り上がらない。 
早く工場へ帰りたい。 
【08:46】 バタコがニヤニヤしている。
【09:30】早朝パトロール終了。
【09:40】帰宅。
【09:45】お腹がすいた。 
頭にアンコを詰める。 
また頭が大きくなる。 
【10:11】みんなで談笑。 
バタコの笑い声にみんながいらつく。
【11:20】バイキン男登場。
【11:22】「よ～く来たな、アンパンマン！」 
相変わらず元気な奴だ。 
「やめろ～！カバ子ちゃんを離すんだ！」 
本当はどうでもいい。 
カレー早くこい。 
【11:40】カビルンルンに襲われる。 
臭い。 
顔が湿って力が出ない。 
【11:42】「アンパンマーン、大丈夫～！？」 
バタコだ。 
タイミングが良すぎる。 
どこから見ていたんだ？ 
【11:43】「新しい顔よ～！」 
さようなら、アンパンマン127号、 
こんにちは、アンパンマン128号。 
バタコがニヤニヤしている。 
【11:45】「いくぞ～！あ～んぱ～んち！！」 
ただの右ストレートだ。 
「バァイバァイキ～ン～…！」 
このセリフには飽き飽きしている。 
【11:49】戦闘終了。 
「大丈夫？」 
格好だけ聞いてみる。 
【11:53】カレーが来た。 
「アンパンマン！助けに来たよ！」 
遅すぎる。帰れ。 
うだつの上がらない奴だ。 
【12:30】帰宅。 
工場前で犬が127号を食べていた。 
バタコがニヤニヤしてこっちを見ている。 
いやがらせか？殺すか？ 
【12:50】仮眠。
【14:30】起床。 
蟻に襲われる。 
「だ、誰か助け…！」 
こんな姿見せれない。 
【15:49】完食。
【17:21】カレーに発見される。 
遅すぎる。帰れ。 
今更どうにもならない。 
うだつの上がらない奴だ。 
【17:30】 バタコがニヤニヤしている。
【18:00】いくら頭を取り替えられても 
記憶喪失にはなっていない事に気付く。 
頭のアンパンは単なる動力源で 
体の方が本体なのか？ 
【18:13】ジャムが何か隠しているとにらみ、様子をうかがう。 
そういえばアンコを作っている姿は見たことがない。
【18:21】ニコニコしながらアンパンより腹の中が黒そうだ。 
隙を見せたら殺られる。
【18:30】 バタコがニヤニヤしてこっちを見ている。 
殺すか？

↓表示例

【07:12】バタコの笑い声で起床。まだ眠い。
顔を洗う。
顔が濡れて力が出ない。
歯はみがかない。俺には歯がない。

【07:22】朝食のかわりに顔にアンコをつめる。
頭が重い。イヤになる。
「パトロールに行っておいで」
ジャムの言葉だ。
うるさいんだよ。俺は警察じゃないただのパンなんだよ。
「気を付けて！」
うるせぇんだよ、このバタコが。

【07:35】ダルいパトロール出発。
庭ではうるせぇ犬がわめいている。殺すぞ。

【07:43】「助けて～！」
カレーが叫んでいる。
俺にどうしろっていうんだよ。

【07:50】カレー救出。
バタコにビーフシチューを入れられたらしい。
うだつの上がらない奴だ。

【08:03】今日は曇りだ。
気分が盛り上がらない。
早く工場へ帰りたい。

【08:46】バタコがニヤニヤしている。

【09:30】早朝パトロール終了。

【09:40】帰宅。

【09:45】お腹がすいた。
頭にアンコを詰める。
また頭が大きくなる。

【10:11】みんなで談笑。
バタコの笑い声にみんながいらつく。

【11:20】バイキン男登場。

【11:22】「よ～く来たな、アンパンマン！」
相変わらず元気な奴だ。
「やめろ～！カバ子ちゃんを離すんだ！」
本当はどうでもいい。
カレー早くこい。

【11:40】カビルンルンに襲われる。
臭い。
顔が湿って力が出ない。

【11:42】「アンパンマーン、大丈夫～！？」
バタコだ。
タイミングが良すぎる。
どこから見ていたんだ？

【11:43】「新しい顔よ～！」
さようなら、アンパンマン127号、
こんにちは、アンパンマン128号。
バタコがニヤニヤしている。

【11:45】「いくぞ～！あ～んぱ～んち！！」
ただの右ストレートだ。
「バァイバァイキ～ン～…！」
このセリフには飽き飽きしている。

【11:49】戦闘終了。
「大丈夫？」
格好だけ聞いてみる。

【11:53】カレーが来た。
「アンパンマン！助けに来たよ！」
遅すぎる。帰れ。
うだつの上がらない奴だ。

【12:30】帰宅。
工場前で犬が127号を食べていた。
バタコがニヤニヤしてこっちを見ている。
いやがらせか？殺すか？

【12:50】仮眠。

【14:30】起床。
蟻に襲われる。
「だ、誰か助け…！」
こんな姿見せれない。

【15:49】完食。

【17:21】カレーに発見される。
遅すぎる。帰れ。
今更どうにもならない。
うだつの上がらない奴だ。

【17:30】バタコがニヤニヤしている。

【18:00】いくら頭を取り替えられても
記憶喪失にはなっていない事に気付く。
頭のアンパンは単なる動力源で
体の方が本体なのか？

【18:13】ジャムが何か隠しているとにらみ、様子をうかがう。
そういえばアンコを作っている姿は見たことがない。

【18:21】ニコニコしながらアンパンより腹の中が黒そうだ。
隙を見せたら殺られる。

【18:30】バタコがニヤニヤしてこっちを見ている。
殺すか？

<menu>

menu要素は、コマンドのリストを表します。

type属性は列挙属性で、宣言されているメニューの種類を示します。この属性は3つの状態を持ちます。contextキーワードは、context menu状態に相当し、この要素はコンテキスト・メニューであると宣言するものです。toolbarキーワードは、tool bar状態に相当し、この要素はツールバーであると宣言するものです。この属性は省略することもできます。省略された場合のデフォルトはlist状態となり、この要素はただ単にコマンドのリストに過ぎず、コンテキスト・メニューを宣言するものでも、ツールバーを定義するものでもありません。

menu要素のtype属性がcontext menu状態にあるなら、この要素はコンテキスト・メニューのコマンドを表します。ユーザーは、そのコンテキスト・メニューが有効となっているなら、そのコマンドを実行することができます。

menu要素のtype属性がtoolbar状態にあるなら、この要素は、ユーザーがすぐに実行することができる有効なコマンドのリストを表します。

menu要素のtype属性がlist状態にあるなら、この要素は非順序の項目リストを表します（それぞれの項目はli要素で表されます）。それぞれの項目は、ユーザーが実行したり、有効化することができるコマンドを表します。この要素の子要素にli要素がなければ、利用可能なコマンドを説明するフロー・コンテンツを表します。

label属性は、メニューのラベルを与えます。これは、ユーザーエージェントがUIでネストされたメニューを表示するために使われます。例えば、コンテキストメニューに、もう一つメニューを含んでいる場合、ネストされたメニューのlabel属性を、サブメニューのラベルとして使うでしょう。

属性

type属性: メニューの種類を指定する(context、toolbar)
label属性: メニューにラベル（項目名）を付ける

<meter>

meter要素は、既知の範囲にある数量や、割合を表すような値を表します。例えば、ディスク使用量、検索結果の関連性、特定の候補者を選定した投票人口の割合です。

<meter>タグは、下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用します。例えば、ディスク使用量、検索結果の関連性、候補者の得票などです。測定値は、必須属性のvalue属性で指定します。

value属性以外にも、下限・上限・低い・高い・最適とされる値を指定する属性が用意されています。これらの属性は必須属性ではありませんが、下限と上限を指定しない場合には範囲が0～1と見なされます。この場合、value属性で指定する値を0～1の範囲内にする必要があります。

測定値は<meter>タグのvalue属性で指定しますが、<meter>タグをサポートしていないブラウザを使用しているユーザーにも分かるように、<meter>～</meter>の中にも、測定状況をテキストで記述することが推奨されています。

尚、<meter>タグは、進行状況を示すのに使用するべきではありません。そのような目的には<progress>タグを使用してください。また、最大値が分かっていない場合の体重や身長など、範囲がはっきりしない値に<meter>タグを使用するのも誤りです。

属性

value属性: 測定された実際の値（※必須属性）
min属性: 下限の値
max属性: 上限の値
low属性: 「低い」とされる境界
high属性: 「高い」とされる境界
optimum属性: 「最適」とされる値

先生「キャシー、あなたがリンゴが10個入る箱<meter value=”0″ max=”10″>（全10個中0個）</meter>を持っているとするわよ。 
あなたは最初、その箱にリンゴを5つ<meter value=”5″ max=”10″>（全10個中5個）</meter>持ってたとするわね？ 
そしてメアリーにリンゴを3つちょうだいといってもらったとします。<meter value=”8″ max=”10″>（全10個中8個）</meter> 
そのあと私がリンゴを4つちょうだいって言ったら、<meter value=”4″ max=”8″>（全10個中3個）</meter> 
あなたの持ってるリンゴは一体いくつ？」 
キャシー「8つです<meter value=”8″ max=”10″>（全10個中8個）</meter>」

です。
最初に持っていたリンゴの割合では
<meter value=”50″ min=”0″ max=”100″>5割</meter>
となります。

↓表示例

先生「キャシー、あなたがリンゴが10個入る箱を持っているとするわよ。
あなたは最初、その箱にリンゴを5つ持ってたとするわね？
そしてメアリーにリンゴを3つちょうだいといってもらったとします。
そのあと私がリンゴを3つちょうだいって言ったら、
あなたの持ってるリンゴは一体いくつ？」
キャシー「8つです」です。最初に持っていたリンゴの割合ではとなります。

<nav>

nav要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。

よく、ウェブページの下部に、利用規約ページ、著作権ページ、トップページへ戻る、などのリンクが配置されることがありますが、このような場合には<nav>を使用せず、<footer>のみで十分です。

WEB制作でお困りのあなたに朗報

<nav>
<h2>スタバメニュー</h2>
<ul>
<li><a href=”sutaba01.html”>ベンティアドショットヘーゼルナッツバニラアーモンドキャラメルエキストラホイップキャラメルソースモカソースランバチップチョコレートクリームフラペチーノ</a></li>
<li><a href=”sutaba02.html”>ベンティアドショットへーゼルナッツキャラメルエキストラホイップキャラメルソースモカソースランバチップチョコレートクリームフラペチーノ</a></li>
<li><a href=”sutaba03.html”> ベンティサイズのマンゴーパッションティーフラペチーノにクラシックシロップとキャラメルシロップとバニラシロップとアーモンドシロップと
ヘーゼルナッツシロップとチョコソースとキャラメルソースとホイップクリームを全部多目に追加で、コーヒージェリーも追加で、4ショット追加で、パッションティー抜きで、ゆるめで！ </a></li>
</ul>
</nav>

<mark>

HTML5コーディングならココ！

↓表示例

<menu>

属性

<meter>

属性

↓表示例

<nav>

WEB制作でお困りのあなたに朗報