01 / 05
うっすら透かす
opacity（不透明度）はどれくらい濃く見せるかの指定。
1… そのまま（初めからこの値）0.5… 半分の濃さ0… 完全に透明で見えない
背景の絵をやわらげたいときによく使うよ。
.photo { opacity: 0.6;}見た目を作り込む
INPUT · スライド
透明度と字間で質感を上げる
01 / 05
うっすら透かす
02 / 05
opacity は中身ぜんぶに効く
気をつけたいのが、opacity はその箱の中身も全部薄くしてしまうこと。
背景だけ透かしたつもりでも、上に乗せた文字まで薄くなって読みにくくなるんだ。
.box { background-color: #333333; opacity: 0.5;}03 / 05
背景だけ透かす rgba
色は rgba(赤, 緑, 青, 濃さ) という形でも書ける。4つ目の数字が濃さ（0〜1）だよ。
これなら背景色だけが透けて、中の文字はしっかり濃いまま残る。
.panel { background-color: rgba(255, 255, 255, 0.8); padding: 24px;}04 / 05
字と字のあいだを広げる
letter-spacing（字間）は1文字ずつの間隔を足す指定。
少し広げるとゆったり落ち着いて見えるので、ロゴや見出しに向いている。本文に入れすぎると逆に読みにくいから、1px〜4px くらいがめやすだよ。
.logo { font-size: 28px; letter-spacing: 3px;}05 / 05
行間と合わせて調整する
line-height が行と行のあいだ、letter-spacing が字と字のあいだ。
2つをそろえて広げると、同じ文章でもぐっと読みやすくなる。内容を変えずに印象を変えられるのがこの回の面白さだよ。ここから書いてみよう。
.text { line-height: 2; letter-spacing: 1px;}