問題
35文字間隔を広げてみよう
この問題では、文字間隔を広げる際に使用するCSSのプロパティを学習します。文字間隔を調整できるようになるとデザインの幅がまた少し広がります。問題に挑戦して学習しておきましょう。
HTML_CSSの問題に挑戦しよう！
問題
「文字間隔を広げてみよう」
見本画像を参考にしながら、文字の間隔を広げてみましょう！
あらかじめエディタに書くコード
<h1 style="font-weight:bold;font-size:20px;">この文字間隔を広げよう！</h1>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
文字間隔を調整するには、letter-spacingというプロパティを使用します。
UIを構築する際によく使用しますので覚えておきましょう!
補足
解答では数値の単位をpxで指定しましたが、emやrem単位を使ったケースもよく目にします。
emやremで指定をするメリットは、親要素やhtmlタグ指定値を基準に間隔を設定してくれるので、ページ全体の文字間隔に統一感を出すことができます。
文字間隔を広げる際、例えばボタンだと自由な間隔で設定しても問題ありませんが、通常の説明文などでは0.05em~0.1emくらいで設定する方が良いです。
0.1emより大きいと少しスカスカな印象になってしまい、人によっては読みにくいと感じてしまう可能性があります。
またletter-spacingと類似したプロパティにword-spacingというものが存在します。
このプロパティは1文字ごとではなく、単語間の間隔を調整するプロパティです。
例えば「忍者 手裏剣 まきびし」と入力すると、通常の空白分しか反映されませんがword-spacingを1.5emなどで指定すると1.5倍の空白に変更されます。
ですがあまり活用頻度の少ないプロパティなので、豆知識程度に覚えておくといいですよ！
