CSSで文字を装飾する

font-family

役割＆特徴

文字の書体を指定します。

font-familyを指定しないと、WEBサイトはすべての文字をゴシック体で作成します。
明朝体を利用して和風なサイトを作成したい時はもちろん、ゴシック体でもこだわりの書体があるときに設定します。

CSSで書体を書いた順に適応されていき、適応できない場合はその次に書かれている書体が適応されていきます。
すべての書体を適用できなかった場合は、パソコンやスマホなどに最初から設定されているゴシック体が適用されます。

最近はインターネットも高速化していて昔ほど騒がれなくなりましたが、こだわりの書体は表示に時間がかかるものです。
WEBサイト全体の雰囲気と、表示速度とよく考えて製作しましょう。
※WEBフォントなどを話し始めるとそれだけで1ページ使ってしまうほど歴史ある問題なのです。

body {
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}

color

役割＆特徴

文字の色を変える時に使用します。

文字の色を変えるHTMLタグは昔はありましたが、今はありません。
文字の色を変える時は必ずCSSのcolorを設定することになります。

実際に使う時ですが、HTMLのclassに直接色味を設定することはお勧めしません。
<span class=”red”>サイトは赤を基調とします</span>という書き方をしてしまうと、赤文字を緑文字に変えてほしいと言われた時に、CSSを修正して、さらにWEBサイト全ページの<span class=”red”>を<span class=”green”>に変更しなければならないからです。
注目してほしい部分には最初から<span class=”theme-color”>などと設定しておき、CSSを修正するだけで済むようにしておきましょう。

.theme-color {
  color: red;
}

text-align

役割＆特徴

文字の配置を設定します。

左寄せ、中央寄せなどです。
計算結果を表示する表では、1の位の位置を揃えるために右寄せを使用することになると思います。

個人的にはHTMLのpタグには標準でtext-align: justifyを設定することをお勧めします。
理由は見た目がきれいだからです。
ページを作成していくと、文章の右端の折り返しが微妙に揃ってなくてガタガタなことに気づく日が来るでしょう。
その時にjustifyを設定してあると、文字間の余白を自動的に調整して、右端をきれいに揃えることができます。
神は細部に宿ります。

.price {
  text-align: right;
}

p {
  text-align: justify;
}

font-weight

役割＆特徴

文字を太字にします。

文字を太字にしたい時はHTMLのstrongタグの検討を最初にしてみましょう。
重要ではないけど太字にしたい時はbタグもあります。

CSSでfont-weightを指定する時は、おもにtableのthを一括で太字にしたり、標準に戻したりする時に使うことになるでしょう。

table th {
  font-weight: bold;
}