[23] <b><i><small>もまだ使えます

最終更新日:2015年04月07日  (初回投稿日:2011年09月08日)

<b>はブラウザのデフォルトで太字になり、<i>はイタリックになります。
まえにやった<strong>も太字になり、<em>もイタリックになりましたよね。
でも<b>と<strong>, <i>と<em>では用途がちがうんです。
また、<small>はブラウザのデフォルトで文字が小さくなりますが、ただ小さくなるだけでなく、これにも意味があります。
今回はここらへんを整理します。

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

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

HTML5から「見た目のスタイルはCSSで指定」することを徹底させるため、見た目のスタイルのためのHTML要素は淘汰されます。で、テキストのスタイルのための要素(big、font、u、sなど)は使えなくなりました。(u、s要素はHTML5で復活。詳細はコチラで!
<b><i><small>は、かつては「文字を太字にする」「イタリックにする」「小さくする」という定義で使われてきましたが、HTML5からは役割が変わりました。
<b><i><small>は、ほかのお役目を与えられたので残っているってわけです。
(ちなみにbはboldの、iはitalicの略です。もう気がついてたと思うけど。)

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

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

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

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

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

HTMLはこちらです

<p>
ポケットの中身を確認した。いつものように<b>財布</b>と<b>鍵</b>と<b>携帯</b>は入っている。<br >
しかし肝心のポケットティッシュが今日に限って無いのだった。さてどうするか…。
</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で廃止される要素」を、この機会にまとめておきたいと思います。
( 追記です : 「HTML5で廃止される要素」をアップしました。)

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

No title

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

Re: No title

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

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

yuki★hata

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

メールフォームはこちら

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