HTML テキスト ハイライト「mark要素」と縮小「small要素」

<ここからハイライト表示>ハイライト表示した文章<ここまでハイライト表示>
<ここから縮小表示>縮小表示した文章<ここまで縮小表示>

蛍光ペンでマークしたような表示「mark要素」

 教科書や参考書に、重要な部分やキーワードを蛍光ペンでマークしたことはありませんか?
HTML文章も蛍光ペンでマークしたように文章の重要部分をハイライト表示することができます。
<mark>と</mark>で囲んだ範囲のテキストに下線を引きます。

 ほとんどのブラウザでは、文字を黄色い蛍光ペンでマークしたような表示になります。

 ちなみに、「mark」の意味はそのまんま、目印という意味や、印をつけるという意味です。

テキストを小さく書く「small要素」

 補足説明や、著作権表記など、文字を小さく表示してあることがあります。
HTMLで文章の文字を小さく書くには、「small要素」使います。
<small>と</small>で囲んだ範囲のテキストを小さく表示します。

 「small要素」の使いどころは・・・
専門用語の説明、著作権表記等の細かいことを書くときに使えるかと思います。

 ちなみに、「small」の意味そのままで、小さいというです。

「small要素」があるのに「big要素」はない?

 「small要素」があるのに「big要素」はないのか?と思うかもしれません。
「big要素」はあります。正確にいうと、「big要素」はHTML5で廃止です。

 HTMLは、文章の構造や意味を持たせることが目的で、体裁などの見た目はスタイルシートというもので行うことになるからです。
「big要素」は、見た目以外の効果はないので廃止ですが、「small要素」は、補足説明など、文章に意味を持たせることができるので残りました。
ですので、当サイトでは「big要素」の説明は行いません。(スタイルシートの説明は一つのカテゴリとして連載予定です。)

サンプル

 今回説明した、「mark要素」と「small要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

この文は、通常に表示しています。<br>
この文は、<mark>ここからハイライト表示をしています。</mark><br>
この文は、<small>ここから縮小表示しています。</small><br>
この文は、<mark>ここからハイライト表示をし、<small>ここから縮小表示しています。</small></mark><br>

 (<br>とは「改行」を意味する要素です。)

表示結果

この文は、通常に表示しています。
この文は、ここからハイライト表示をしています。
この文は、ここから縮小表示しています。
この文は、ここからハイライト表示をし、ここから縮小表示しています。

「mark要素」と「small要素」のまとめと次回記事について

 今回説明した「mark要素」と「small要素」は、使い方は簡単ですが、どこでつかうのか?使いどころが難しい要素ですね。

 次回は上付文字「sup要素」と下付文字「sub要素」の説明します。
以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>