お疲れ様です！るーぷのコーダー、三木です。
今回も初心者向けのCSS記事になります。
難しい話をしようとすると記事のボリュームが膨大になるので…
よろしくお願いいたします！
目次
字間を調整するCSS【letter-spacing】
今回は、「letter-spacing」について勘違いしていた。というお話です。
まずは前提として、「letter-spacing」とは、1文字と1文字の間、字間を設定するCSSです。
・字間が0pxの文章です
・字間が2pxの文章です
・字間が0.1文字分の文章です
・字間が1文字分の文章です
letter-spacing: .1em; の「em」は、子要素でも変わると思っていた
以前、サイト全体の文字間を少し広げるために、以下のようなCSSを書いていました。
font-size: 16px;
letter-spacing: .1em;
}
ちなみに、「em」は要素自身のフォントサイズを基準にした単位なので、上記の場合
本文の文字サイズが16pxで、字間が1.6pxになります。
そしてサイト内にはもちろん、16pxの文字ばかりでなく、24pxや30pxの見出しなどもありますよね？
letter-spacing: 1.6px;
}
と書かずに、「その文字の0.1倍」と指定する
letter-spacing: .1em;
}
と書いているので、当然
「本文の文字サイズが16pxなら、文字間は1.6px。見出しが24pxなら、文字間は2.4pxになるだろう」
と考えていました。
ところがある日、目視でついに間違いに気づいてしまいました。
なんか広くね…？と。
24pxという大きい文字では気づけなかったのですが、小さい文字を見た時にやっと気がつきました。
どうも字間が広い気がします。
急いでGoogleで調べました。この時は生きた心地がしなかったです。
当時の私は「em」という単位を使ってるオレ…Fuuuuuu!と調子に乗って、目視での確認を疎かにしてしまったのだと…
letter-spacing は、親要素で計算された値が継承される
やはり、私は今まで勘違いしていました。
「親要素で計算された値が継承される」ということはつまり、
font-size: 16px;
letter-spacing: .1em;
}
と書くと、「字間はその文字の0.1倍にしてね。」と指定したつもりが、字間1.6pxとなります。
なので、
font-size: 24px;
}
だけでは、この見出しの字間は1.6pxのままです。
font-size: 24px;
letter-spacing: .1em;
}
このように、文字サイズ16px以外の要素は常に丁寧に、字間を指定してあげる必要があります。
じゃあ、いちいちh2やpに指定しないといけないの？
全部の要素に逐一指定するのは、結構手間ですよね。
対策、考えました。
子孫要素すべてに指定しましょう。
letter-spacing: .1em;
}
このようにbodyの子孫要素すべてに指定します。
こうすると、body参照の数値ではなく、あくまで「その要素」を参照した数値になります。
ただし少しだけ、注意点があります。
CSSファイルのできるだけ上に書きましょう
下の方に書いているCSSで上書きされてしまうので、
例えば「h2は0.15emにしたいな」という時に、誤って
letter-spacing: .15em;
}
body *{
letter-spacing: .1em;
}
という順番で書いてしまうと、下の方に書いている「body *」への指定0.1emがh2に適用されてしまいます！
ちなみに「*」ユニバーサルセレクタには優先順位の点数加算がありませんので、
「body *」も「h2」も、優先順位は同じです。
「更に中にある要素」への注意
例えば
というHTMLに対して、
letter-spacing: .1em;
}
.text{
letter-spacing: .2em;
}
と指定してしまった場合、
<p class=”text”>には0.2emが適用されますが、
その中の<span>は、.textではなくbodyの子孫要素「body *」であるという判定なので、
0.1emの字間になってしまいます！
以上の点に細心の注意を払いながら、「body *」への指定をご活用ください！
これでletter-spacing問題は解決です！
そしてここからはちょっと言い訳タイムです。。。
【line-height】と同じ感覚で考えていた
「letter-spacing」について勘違いをしていた理由の一つが「line-height」です。
ちなみにline-heightは文字の上下、つまり行間です。
font-size: 16px;
line-height: 1.75;
}
とすると、見出しなどサイズが違う文字でもその要素自身のフォントサイズを基準にした行の高さになります。
じゃあ似たような「letter-spacing」もそういう感じでいけると思いますやん…
あとついでに「line-height」はpxとかemとか単位つけなくていいのなんでなん…？
まとめ
今回の件で、「em を使っているから、子要素でもその要素のフォントサイズを基準に再計算される」とは限らないことを知りました。
サイト全体に letter-spacing を指定する場合、見出しなどで文字サイズが変わるなら、必要に応じてそれぞれ指定する必要があります。
font-size: 16px;
letter-spacing: .1em;
}
h2{
font-size: 24px;
letter-spacing: .1em;
}
CSSは「なんとなくこうだろう」で書いていると、思わぬところで「あれ？」となることがあります。
実際の表示をよく確認してみたことで、自分の思い込みに気づくことができました。
皆さんも、思い込みで確認を疎かにしないよう、充分にご注意くださいませ！
PREV