
文字横の間隔を空けてみよう
問題
文字横の間隔を空けてみましょう!
見本画像を参考にしてCSSに記述し実装してください。
見本画像を参考にしてCSSに記述し実装してください。
自分の環境に書くコード
<h1 style="font-weight:bold;font-size:20px;">この文字の感覚を空けましょう!</h1>
¥HTML¥
期待する画面

解答ソースコード
<h1 style="font-weight:bold;font-size:20px;">この文字の感覚を空けましょう!</h1>
¥HTML¥
h1 {
letter-spacing: 16px;
}
¥CSS¥
解答では数値の単位をpxで指定しましたが、emやremを使ったケースもよく目にします。
emやremで指定をするメリットは、親要素やhtmlタグ指定値を基準に間隔を設定してくれるので、ページ全体の文字間隔に統一感が出る点です。
文字横の間隔を空ける際、ボタンだと自由な間隔で設定しても問題ありませんが、通常の説明文などでは0.05em~0.1emくらいで設定するのがおすすめです。
0.1emより大きいと少しスカスカな印象になってしまいやすいです。
また類似したプロパティにword-spacingというものも存在します。
このプロパティは1文字ごとではなく、単語間の間隔を調整するプロパティです。
例えば「忍者 手裏剣 まきびし」と入力すると、通常の空白分しか反映されませんがword-spacingを1.5emなどで指定すると1.5倍の空白に変更されます。
あまり活用頻度の少ないプロパティにはなりますが、豆知識程度に覚えておくといいと思います。
emやremで指定をするメリットは、親要素やhtmlタグ指定値を基準に間隔を設定してくれるので、ページ全体の文字間隔に統一感が出る点です。
文字横の間隔を空ける際、ボタンだと自由な間隔で設定しても問題ありませんが、通常の説明文などでは0.05em~0.1emくらいで設定するのがおすすめです。
0.1emより大きいと少しスカスカな印象になってしまいやすいです。
また類似したプロパティにword-spacingというものも存在します。
このプロパティは1文字ごとではなく、単語間の間隔を調整するプロパティです。
例えば「忍者 手裏剣 まきびし」と入力すると、通常の空白分しか反映されませんがword-spacingを1.5emなどで指定すると1.5倍の空白に変更されます。
あまり活用頻度の少ないプロパティにはなりますが、豆知識程度に覚えておくといいと思います。
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
解説
UIを構築する際、よく使用しますので覚えておきましょう!