強調、上付き・下付き文字など(em,strong, del, ins, sup, sub,..)
【本節の目的】
その他の主なインライン要素の意味と使い方を習得する。
強調 (em要素、strong要素) と 削除文/追加文 (del要素、ins要素)
強調 (em要素、strong要素)
- 要素の説明
-
特定のテキスト(語や文章)を強調するには、em要素や strong要素を用います。
em要素は一般的に強調 (emphasis)を行なうときに用い、strong要素は
em要素より更に強調 (strong emphasis)するときに用います。
どちらもインライン要素であり、
インライン要素やテキストを含むことができます。
多くのWebブラウザでは、em要素で定義したテキストは「斜体 (italic)」で、
strong要素で定義したテキストは「太字 (bold)」で表示されます。
ただし、単にテキストを斜体や太字にしたいためだけに、
これらの要素を使うのはやめましょう。
文字のスタイルを変更したいときは、
第9回以降に説明する CSS を利用して下さい。
- サンプルHTML
-
<p>
基盤的情報処理論では、毎回<em>確認テスト</em>を提出してください。
あと、課題を
<strong>忘れずに提出するようにしてください。</strong>
</p>
- Webブラウザでの表示結果
-
削除文と追加文 (del要素、ins要素)
- 要素の説明
-
テキストを削除文 (deleted text) や追加文 (inserted text)
として定義することで、
文書の中のどの部分が改変されたかをWebページを見てくれる人に伝えることができます。
削除文として定義するには del要素を、追加文として定義するには
ins要素を利用します。多くのWebブラウザでは、
del要素で定義したテキストは「打ち消し線」が、
ins要素で定義したテキストには「下線」が自動的に引かれます。
ただし、単に打ち消し線や下線を引くためだけに、
これらの要素を使うのはやめましょう。
文字に修飾を行ないたいときは、
第9回以降に説明する CSS を利用して下さい。
del要素とins要素は、
状況によりブロックレベル要素になったりインライン要素になる特殊な要素です。
つまり、ブロックレベル要素の中で使うとインライン要素になり、
ブロックレベル要素しか書くことのできないところで利用すると、
ブロックレベル要素になります。
ブロックレベル要素として利用しているときは、
どんな要素でも含むことができますが、インライン要素として使っているときは、
インライン要素かテキストしか含むことができません。
- サンプルHTML
-
<p> 次の例は、インライン要素としての利用例で、一般的な使い方です。 </p>
<p>
本日限りの特別割り引き
<del>2割り引き</del><ins>4割引き</ins>
の大奉仕です!!
</p>
<p>
まとまった文章を一挙に修正するときには、ブロックレベル要素として使います。
</p>
<del>
<p>
2ブロックの開始日は5月15日です。
</p>
</del>
<ins>
<p>
3ブロックの開始日は6月12日です。
</p>
</ins>
- Webブラウザでの表示結果
-
その他の主なインライン要素 (sup/sub要素、abbr要素、acronym要素)
[演習:その他の主なインライン要素]
以下に説明する要素について学習して下さい。
まずはテキストをしっかり読んで、それぞれの要素の意味を理解下さい。
次に、今までの演習で使った
「week07\ex1.html」を秀丸エディタで開き
(既に開いてあれば、改めて開く必要はありません)、
以下のサンプルを参考にしながら、
本文(body要素の内容)に、
説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、
各要素の動作を理解して下さい。
上付き文字と下付き文字 (sup要素、sub要素)
- 要素の説明
-
テキストの一部を上付き文字 (superscript) として定義するには sup要素を、
下付き文字 (subscript) として定義するには sub要素を使用します。
sup要素もsub要素もインライン要素であり、
インライン要素やテキストを含むことはできます。
例えば、8のX乗「8X」の「X」は上付き文字で、
水の分子式「H2O」の「2」は下付き文字で表現したいですが、
このようなときに sup要素や sub要素を使うことになります。
- サンプルHTML
-
<p> 8のX乗 → 8<sup>X</sup> </p>
<p> 水の分子式 → H<sub>2</sub>O </p>
- Webブラウザでの表示結果
-
省略語と頭字語 (abbr要素、acronym要素)
- 要素の説明
-
テキスト中の省略語 (abbreviated
form) として定義するには abbr要素を、また頭文字 (acronym)
として定義するには acronym要素を使います。 abbr要素は
「HTML(エイチ ティー エム エル)」「URI(ユー アール アイ)」などのように
一文字ずつ発音する語を、acronym要素は「LAN(ラン)」「SOHO(ソーホー)」
などのように一つの単語として発音する語を定義する点に違いがあります。
通常は、title属性で、省略前の語を属性値として指定しておきます。
これらの要素は、インライン要素であり、
インライン要素やテキストを含むことはできます。
これらの要素の内容は、多くのWebブラウザで、点線の下線などが引かれ、
その上にマウスポインタを重ねると、title属性の値が表示されます。
- サンプルHTML
-
<p>
ブロードバンドネットワークの普及により、大容量データでも
<abbr title="File Transfer Protocol">FTP</abbr>
等が容易に行なえるようになった。そのため、
主婦などの働く場として
<acronym title="Small Office/Home Office">SOHO</acronym>
が更に有効に機能するようになった。
</p>
- Webブラウザでの表示結果
-
(註) 上図は、「SOHO」の上にマウスポインタを置いたところです。
title属性で指定した「Small Office/Home Office」が
ポップアップしているのを確認できますね。