[22] HTML5の新要素<mark>を使ってみよう

HTML5から新たに加わった <mark>要素を使ってみましょう。

使用する要素 <mark> 〜 </mark>

<mark>要素は、前回の <strong> <em> と似たかんじですが、下記のように区別されます。
●<strong>は「重要性」を表す。すっごい重要だとアピールする所に使用。
●<em>は「強調」を表す。話し言葉で強く言うように意味あいを強めるために使います。
●<mark>は「注目して欲しい部分」を表します。重要でも強調でもなく、ほかのどこかから関連づけられている文章のある部分を、読者に注目して欲しいときに使います。

なんつっても、いまひとつピンとこないですよね。
色々資料を読んで私なりに理解したことをまとめておこうと思います。

サンプルのダウンロードはこちら

サンプルを用意しました。
★左のサンプル画像をクリックするとHTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample22set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

mark要素は「注目させたい」ところに使う

mark要素は、重要性や強調性の意味はなく、定義上は、他の文章から参照される文書内の 目立たせたい(注目させたい)テキストに使用する、となっています。
ブラウザのデフォルトでは、ハイライト表示(蛍光マーカーで塗ったみたいな表示)になります。

使い方は、注目させたいところを<mark>と</mark>で囲むだけ。

<mark>注目させたいテキスト</mark>

markは日本語でも「マークする」って使う「注目する」とか「印を付ける」って意味です。

mark要素って具体的にどこに使う?

mark要素は具体的に、次のようなところに使われています。
★検索システムが出した検索結果内で、該当キーワードをハイライトさせる
★引用文の中で、特に注目して欲しいテキストに使う。
★コンピューターのプログラムコードで注目してほしい部分をハイライトさせる。
「パンくずリスト」で現在地をハイライトさせる。

具体例を見ると、なんとなくわかってきますよね。
検索キーワードを書いて、表示されたページで、自分が書いたキーワードが太字になったりハイライトになったりしてますよね。あれがmark要素で特化されてるところ。

2番目の「引用文の中で特に注目して欲しいテキストに」っていうのは、具体的に言うと、
人に見せる文書で、注意して欲しいところに「蛍光マーカーペン」使って目立たせる、あの感覚です。これは3番目のプログラムコードでも同じことですね。

4番目の「パンくずリスト」はまだ紹介してませんね。よくサイトの上の方にある「HOME > 親ページ > 子ページ > 孫ページ」と階層を示しながら現在位置を表示しているアレです。(ヘンゼルとグレーテルが由来です。パンくずをちぎって道しるべにした、あの「パンくず」)

整理しよう!<strong>と<em>と<mark>

それじゃ、3つの要素の使い分けを整理してみましょう。
●警告文など重要性の高いテキストには<strong>要素
●意味合いを強調したいテキストには<em>要素
●重要でも強調でもなく、読者の注目を引きたいテキストには<mark>要素
こんなかんじですね。

今までのHTML4やXHTML1までは、強調のための要素( strong と em )の定義の仕方が
かなりいいかげんだったので、HTML5からは「きちんと使い分けよう」ということになり、
「重要(strong)でも強調(em)したいわけでもない、ただ注目してもらいたい箇所には mark を使おう」ということで追加された要素なんじゃないかと思われます。
それだけに strong と em をしっかりと使い分けないと、markも使いこなせない…ってことですね。

ブラウザのデフォルトでの見た目の様子は、
●<strong>要素は「太字」
●<em>要素は「イタリック」
●<mark>要素は「背景が黄色」
になります。
CSSで文字の色や大きさなどを変えて、さらに分かりやすくすると良いのではないかな。

次回予告

いかがでしたか?
<strong><em><mark>は何だか説明が感覚的ですね。
色々な資料読みましたが、ほとんどこんなかんじで「感じ分けてね」ということです。
私は一応いまのところ「感じ分けた感(?笑)」があるんですが、みなさんいかがでしょうか...?

HTML4やXHTML1では使えてた big(文字を大きくする)、font(書体やフォントサイズや文字色を変える)、strike(取り消し線)など、見た目のスタイルを表す要素は、HTML5から削除されました。
「見た目はCSSで整える」ってルールができたからです。
ですが、small(文字を小さく)、b(太字)、i(イタリック)は残ってるんです。意外ですね。
これは、見た目以外の新しい役目を与えられたから。
というわけで次回は、<small><b><i>についてです。

HTML5から、<big> <font> <strike> のように今まであったけど、削除された要素もあります。
これらについては、いずれ「ちょっとメモ」でまとめておこうと思います。
「(ちょっとメモ)HTML5で廃止される要素一覧」でまとめましたのでご覧ください。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

Re: はじめまして

くるみさん、ありがとうございます!

Re: No title

あ、ホントだ〜!! 酢って…なんやねん。
ありがとうございます。さっそく直しました。恥ずかしい〜。
またなんかありましたら教えてください。よろしくお願いいたします〜
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.