ログイン

問題35 文字横の間隔を空けてみよう

HTML_CSSの問題

HTML_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¥
            
答えのアイコン

解説

文字の横の間隔を開けるときはletter-spacingを使用します。

UIを構築する際、よく使用しますので覚えておきましょう!
ログインして解答を見る
解答では数値の単位をpxで指定しましたが、emやremを使ったケースもよく目にします。
emやremで指定をするメリットは、親要素やhtmlタグ指定値を基準に間隔を設定してくれるので、ページ全体の文字間隔に統一感が出る点です。
文字横の間隔を空ける際、ボタンだと自由な間隔で設定しても問題ありませんが、通常の説明文などでは0.05em~0.1emくらいで設定するのがおすすめです。
0.1emより大きいと少しスカスカな印象になってしまいやすいです。
また類似したプロパティにword-spacingというものも存在します。
このプロパティは1文字ごとではなく、単語間の間隔を調整するプロパティです。
例えば「忍者 手裏剣 まきびし」と入力すると、通常の空白分しか反映されませんがword-spacingを1.5emなどで指定すると1.5倍の空白に変更されます。
あまり活用頻度の少ないプロパティにはなりますが、豆知識程度に覚えておくといいと思います。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!