太字にしたのに太さが変わらないのはなぜ？

使っているフォントが太字用のデータを持っていないことがあります。特にGoogle Fontsは選んだ太さだけを読み込むので、太字も使いたいときは700（bold相当）も一緒に選びましょう。

リンクの下線は消してもいいの？

デザインによっては消して大丈夫です。ただし文章の中のリンクは、下線がないと押せることに気づいてもらえません。消すのはナビゲーションなど見るからにメニューと分かる場所にとどめ、太字や色などの合図を残しましょう。

text-decoration: line-through;で引けます。セール前の値段や、済んだやることリストなど「もう有効ではない」ことを示す線です。

大きさや色だけでなく、文字には太さや下線といった”かざり”もつけられます。大事なところを太くしたり、リンクの下線を消してすっきりさせたり。ちょっとした調整で、ぐっと読みやすくなります。

強調したい文字を太くするには font-weight を使います。ふつうは bold（太字）と normal（ふつう）の2つを覚えれば十分です。

.important {
  font-weight: bold;
}

class="important" をつけたところが太字になります。ここでも、クラスで狙い撃ちが役に立っていますね。

font-weight には、ことばのかわりに数字も使えます。

h1 {
  font-weight: 700;
}

数字は 100〜900 で、大きいほど太くなります。400 が normal、700 が bold と同じ太さ。太さを何段階も持つフォントなら、500（少しだけ太い）のような中間の太さも選べます。まずは「400＝ふつう、700＝太字」を基準にすれば十分です。

下線は text-decoration であやつります。引くなら underline、消すなら none。

.line {
  text-decoration: underline;
}
a {
  text-decoration: none;
}

リンク（a）には最初から下線がついていますが、none にすると消せます。デザインに合わせて、下線を出すか消すかを選べます。

太字と下線・打ち消し線を並べると、それぞれの”かざり”の効き方がわかります。

太さは font-weight、線のかざりは text-decoration——役割のちがう2つを組み合わせて、文字を飾ります。

text-decoration に入れられる値は、じつは下線だけではありません。

なかでも line-through は覚えておくと便利。セール前の値段や、済んだやることリストなど、「もう有効ではない」を目で伝えるときの定番です。

.done {
  text-decoration: line-through;
}

リンク（a）には、下線だけでなく色もついています。これもデザインに合わせて消したいことがよくあります。そんなときは color: inherit;。

a {
  text-decoration: none;
  color: inherit;
}

上のリンクは青＋下線でリンクらしく、下のリンクは色も下線も消えてまわりの文字と同じ見た目になじみます。

inherit（インヘリット）は「親から受けつぐ」という意味の値。リンクにだけ特別な色をつけるのをやめて、まわりの文字と同じ色にそろえます。ナビゲーションのリンクなどを、文字の一部のように自然になじませたいときによく使う手です。