[23] b要素、i要素、small要素も まだ使えます

最終更新日:2017年11月02日  (初回投稿日:2011年09月08日)

<b>要素はブラウザのデフォルトスタイルで太字になり、<i>はイタリックになります。
まえにやった<strong>も太字になり、<em>もイタリックになりましたよね。
でも <b> と <strong>、<i> と <em>では、用途がちがうんです。

また、<small>要素はブラウザのデフォルトで文字が小さくなりますが、ただ小さくなるだけでなく、これにも意味があります。
今回はここらへんを整理します。

使用する要素 <b> 〜 </b>
<i> 〜 </i>
<small> 〜 </small>

「まだ使えます」と言うわけは

HTML5から「見た目のスタイルはCSSで指定」することを徹底させるため、見た目のスタイルのためのHTML要素は廃止されました。
で、<big>要素、<font>要素、<strike>要素などは使えなくなりました。

<b> <i> <small> は、かつては文字を「太字にする」「イタリックに」「小さく」という定義で使われてきましたが、HTML5からは役割が変わりました
スタイル以外の ほかのお役目を与えられたので残っているってわけです。
(ちなみに b は boldの、i は italic の略です。もう気がついてたと思うけど。)

「前後の内容と区別したいテキスト」に使用する<b>要素

<b>要素は、特に重要性の意味合いもなく、前後の他のテキストと区別したいときに使います。
例えば、キーワード、レビュー記事の中の製品名、記事のリードとかだそうです。

<b>要素は、他にちょうどいい要素がないときに使います。
ヘッダーには h1 〜 h6 を、強調は em要素を、重要性は strong要素を、マーク(ハイライト)したいテキストは、mark要素を使うべきです。
このどれにも当てはまらないけど、前後のテキストと区別したいときに使います。

サンプルは ある日の持ち物がキーワードになってる文章です。

急いでポケットの中身を確認した。いつものように財布携帯は入っている。
しかし肝心のポケットティッシュが今日に限って無いのだ。さてどうするか…。

HTMLはこちらです

<p>
急いでポケットの中身を確認した。いつものように<b>財布</b>と<b>鍵</b>と<b>携帯</b>は入っている。<br>
しかし肝心の<b>ポケットティッシュ</b>が今日に限って無いのだ。さてどうするか…。</p>

ブラウザでのデフォルトスタイルは太字になります。
でも これによってその箇所が重要だったり強調されたりしません。

「イタリック体で表しそうなもの」に使用する<i>要素

欧米のテキスト文化では(ウェブとか関係ない紙の文書でも)、
・分類学上の意味や名前(動植物とかの)
・技術(専門)用語
・別の言語の慣用句
・心の声(気分)
・船の名前
などを「イタリック体」で表現するんだそうです。
<i>要素は、これを担当する要素…なんだって。

たぶんこれ 私はめったに使わないないかも。日本人だなあ。
英文サイトの編集の機会があるとき用に、知識として知ってたららいいんじゃないかな?って程度。

とにかくサンプルを見てください。フランス語の慣用句を <i>要素 でマークアップしています。

There is a certain je ne sais quoi in the air.
(直訳です。 → 空気中に「何とも言いがたいもの」が確実にあります。)

HTMLはこちらです

<p>There is a certain <i lang="fr"> je ne sais quoi </i> in the air.</p>

上のソースのように、主となるテキストと異なる言語の用語は、lang属性を使います。
(lang="fr" は「フランス語」)

<i>要素はブラウザのデフォルトスタイルで イタリック体になります。
これは<em>要素と同じですが、<i>要素はその箇所を強調する役割はありません。

「付帯情報」に使用する<small>要素

<small>要素は、注釈、細目などの「付帯情報」を表すのに使用します。

このサンプルは、ホテルの料金表で、税込みかどうかを <small>で表示してます。

シングル
¥15,750(消費税込み 朝食は含まれておりません)
ダブル
¥26,250 (消費税込み 朝食は含まれておりません)

HTMLはこちらです

<dl>
	<dt>シングル</dt>
	<dd>¥15,750 <small>(消費税込み 朝食は含まれておりません)</small></dd>
	<dt>ダブル</dt>
	<dd>¥26,250 <small>(消費税込み 朝食は含まれておりません)</small></dd>
</dl>

注釈、細目などの「付帯情報」とは具体的には、
免責条項、著作権表記(コピーライト)、警告、法的制約などや、帰属、ライセンス要件など法的な情報
大事だから書いとかなきゃいけないけど、別にデカく表示する程でもないモノですね。

<small>でマークアップすると、ブラウザのデフォルトで文字が小さくなります。
でもこれは意味が小さく軽くなったって意味ではありません。
<strong>で重要を示したり<em>で強調したフレーズを<small>で囲んでも、その意味がちっちゃくなったりしません。

あと、注意点は、ブロック全部が免責事項のとき、ブロック全部を<small>だけで囲んで済ますのは間違い。<small> はセクショニングの要素ではないので。
きちんと <section>などの適切な要素で囲んで、その内側に <small>要素を使います。

次回予告

いかがでしたか?
W3Cのサイトでは「 i と b 要素は、CSSでいくらでもスタイル変更していい」みたいなことが書かれていました。
イタリックやボールドのスタイルを表示するものではないって意味でしょう。

次回は「HTML5で廃止される要素」を、この機会にまとめておきたいと思います。

その次になりますが、「後で追加された」ことを示す<ins>要素と「後で削除された」ことを示す<del>要素を紹介します。これもずいぶん前からある要素です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

No title

「i と b 要素はイタリックやボールドのスタイルを表示するものではない」のであるとすると,実際にボールドやイタリックは何で表せばよいのでしょうか?

Re: No title

早坂さん、コメントありがとうございます。

記事本文にもある通り「見た目のスタイルはCSSで指定」するというルールがあります。
フォントをボールド体にしたいなら、CSSの font-weightプロパティを、
イタリック体にしたいなら、font-styleプロパティを使います。
CSSのフォントに関する指定は、いずれ記事にまとめる予定です。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 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 - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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