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

使っているフォントが太字用のデータを持っていないことがあります。特に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（インヘリット）は「親から受けつぐ」という意味の値。リンクにだけ特別な色をつけるのをやめて、まわりの文字と同じ色にそろえます。ナビゲーションのリンクなどを、文字の一部のように自然になじませたいときによく使う手です。