CSS・見た目をもっと自由に

文字を太く・下線でかざる

大事なところは太く、リンクの下線は引いたり消したり。font-weightとtext-decorationで、文字そのものに"かざり"をつけよう。

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

太くする：font-weight

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

.important {
  font-weight: bold;
}

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

下線をつける・消す：text-decoration

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

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

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

HTML文字を強調しよう「意味の強調」はHTML、「見た目の太字」はCSS——役割のちがいを思い出そう

リンクの色を、まわりに合わせる：color: inherit

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

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

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

このレッスンのまとめ

  1. 文字の太さは font-weight（bold と normal）
  2. 下線などのかざりは text-decoration（underline と none）
  3. 太字は使いどころを絞ると、強調が生きる
  4. color: inherit; でリンクの色をまわりと同じにそろえられる

:::

やってみよう：ナビのリンクをすっきりさせる

ヘッダーの<nav>にclass="nav"をつけて、中のリンクの下線と色をリセットしましょう。「クラスを2つ並べる」書き方が、さっそく役立ちます。

.nav a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

.nav a で「class="nav"の中にあるaだけ」を狙い、下線と色を消して太字に。ふつうの文字のように見えつつ、太字で「押せそう」な気配だけ残ります。

ブラウザ表示。ヘッダーのメニュー文字から下線と青色が消え、まわりの文字と同じ色の太字になっている
リンクらしい青と下線が消えて、メニューらしいすっきりした見た目になりました。