#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. text-style1

Emphasize text

文字を強調する

テキストの一部分を強調するHTMLタグには『strong要素・em要素・b要素』がありますが、HTML4とHTML5では定義が少し変わります。

強調タグ HTML4 HTML5 見本
strong要素 より強調したいときに使う 強い重要性(HTML4とほぼ同じ) サンプル sample
em要素(英文は斜体) 強調したいときに使う アクセントを付ける箇所に使う サンプル sample
b要素 太字にするときに使う 太字にする(重要性は無し) サンプル sample

通常、CSSで何の指定もなければ<strong>や<em>、<b>は太字になりますが、強調したい文字を太字や斜体以外の方法で装飾する事もできます。
また、重要性を残したまま装飾を打ち消すcssも可能です。

/* 太字を普通にする場合 */
strong, b {
   font-weight: normal;
}

/* 斜体を普通にする場合 */
em {
   font-style: normal;
}

文字に色を付ける

例1:太字を普通にして文字色を青色にする。

太字を普通にして<strong class="sample1">文字色を青色</strong>にする。
.sample1{
   font-weight: normal;
   color:#0000ff;
}

文字の上下に線

例2:緑の太字で文字の上下に赤い線を引く。

緑の太字で<strong class="sample2">文字の上下に赤い線</strong>を引く。
.sample2{
   color:#009900;
   border-top: 1px solid #ff3333;
   border-bottom: 1px solid #ff3333;
}

背景に色を付ける

例3:緑の太字で文字の背景を黄色にする。

緑の太字で<strong class="sample3">文字の背景を黄色</strong>にする。
.sample3{
   background-color: #ffff66;
   color:#009900;
}