もくじ

一部の強調

文章の一部を強調したい

h1やpタグがで囲まれた部分は見出しや段落を表します。たとえ短い文字列でも新しいブロックを作ります。ではその中の一部の文字や単語に特別に扱い他と区別したい場合はどうしたらよいでしょうか。たとえば,

文章中の強調したい文字の色を変えたりする。

というときにどうするかということです。

このために、emstrong の2つのタグが用意されています。

このようなタグに囲まれた部分は新たなブロックを作らないで行の中にそのまま存在します。そこでInline(行の中の要素)と呼ばれます。当然、h1,h2,pなどブロックを作るタグの中で使わなければなりません。

em

<p>文章中の<em>強調したい文字</em>の色を変えたりする。</p>

などと使います。ただ、これだけでは文字は赤くなりません。「ここは大事なんだよ」と指定しただけです。ほとんどのブラウザは気を利かせて斜体で表示します。日本語の場合これは読みにくいものになります。

em の例
文章中の強調したい文字の色を変えたりする。

em の語源は emphasis (強調, 重要視,重点)です。

strong

<p>文章中の<strong>強調したい文字</strong>の色を変えたりする。</p>

などと使います。これは em よりももっと強くいいたい時に使います。ほとんどのブラウザは気を利かせて太字で表示します。

strong の例
文章中の強調したい文字の色を変えたりする。

strong の語源は strong emphasis です。

CSSで見え方を変える

これをどう表示するかはCSSで指定します。たとえば、

em {
  color:#ff0000;            ←赤くする
  font-style:normal;        ←斜体をやめる
}

こうすると em で囲まれたところは、次のようになります。

CSSで赤,斜体なしを指定。
文章中の強調したい文字の色を変えたりする。

他に使えそうなものをあげておきます。color などと同じく、h1,h2,pなどのブロックを作るタグにも指定することができます。

  font-weight:bold;        ←太字にする
  font-weight:normal;       ←太字をやめる
  font-style:italic;       ←斜体にする
  font-size:150%;          ←文字の大きさを1.5倍にする

ウェブページ(Mar.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2005 改訂