単語に装飾を加える

この章で作る WEB サイトと学習内容

上記の WEB サイトを作ることで、以下を学ぶ。

• 強調する
• Span(スパン)
• ID(アイディ)とClass(クラス)

学習環境を用意する

CodeSandbox 右下のOpen Sandboxをクリックして編集ページを開こう。

強調する

文章を強調したいときは<b>や<strong>を用いる。bはBold(ボールド)の略だ。 「SW300-BH」と「本製品が故障してしまう可能性のある、またはお客さまの安全を脅かす操作」をそれぞれ以下のように書き換えよう。

<b>SW300-BH</b>
<strong
  >本製品が故障してしまう可能性のある、またはお客さまの安全を脅かす操作</strong
>

書き換えると以下のようになる。

表示結果を見るとどちらも文字が太くなっていることがわかる。同じ見た目になっているが HTML として解釈すると意味が異なる。bはボールドの略であるとおり単純に文字を太くするためのタグである。意味としては CSS でfont-weight: bold;と指定しているのと変わりがない。しかし、strongは HTML の解釈の上で「強調」という意味が加わっている。文章の中で強調したい文字がある場合はbではなくstrongを用いるのが適切である。

strongにも問題はある。なぜユーザーに強調されているのかが伝わらないということだ。したがって次で説明するSpan(スパン)タグを使用して見た目も変えることでなぜ強調されているのかがわかるようにするのが一般的だ。

Span(スパン)

<span>は文字を囲みひとかたまりにすることを目的にしているタグであり、それ自体に意味はない。文章中の「注意」「故障」を以下のように書き換えよう。

<span>注意</span> <span>故障</span>

書き換えると以下のようになる見た目上は変化していないことがわかる。<span>は CSS のID(アイディ)とClass(クラス)という仕組みを活用して見た目を変える必要がある。

ID(アイディ)とClass(クラス)

CSS で見た目を変えたいときタグにしかスタイルを当てることができない場合、同じタグには同じスタイルが当たってしまうという問題が生じる。
そこでその解決策としてあるのが ID と Class だ。タグに ID もしくは Class を指定することで同じタグでも異なるスタイルを当てられるようにしている。
ID と Class には 1 つだけ違いがある。ID は表示している WEB ページの中で 1 回しか使わない時に使える。
Class は表示している WEB ページの中で複数回使う時に使う。
それぞれの適材適所を考えてみよう。

コードに以下を書き加えてみよう。まずは注意と故障のspanを以下のように書き換える。

<span class="caution">注意</span> <span class="failure">故障</span>

<style>に以下のスタイルを書き加える。

.caution {
  border: 1px solid orange;
  background-color: rgb(255, 255, 200);
  color: orange;
}
.failure {
  border: 1px solid red;
  background-color: rgb(255, 200, 200);
  color: red;
}

書き加えた結果が以下になる。