SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのletter-spacingの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 8:08動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、レタースペーシングです。
  4. 0:06これは、文字と文字の間隔、つまり字間を調整するプロパティです。
  5. 0:11間隔を少し広げるだけで、見出しはゆったりと上品に見え、逆に広げ過ぎると、
  6. 0:15長文はかえって読みにくくなります。
  7. 0:19今回は、ゼロ・一二エムという少し広い値と、標準のノーマルを比べながら、基本の書き方から注意点まで、
  8. 0:24初心者向けに分かりやすく解説します。
  9. 0:30文字の大きさや太さを変えなくても、間隔ひとつで文章の印象が大きく変わることを、
  10. 0:34実例で確かめていきましょう。
  11. 0:38見出しの字間を整える作業は、実際のサイト制作でも頻繁に登場する、身近で実用的なテクニックです。
  12. 0:45まず基本の書き方です。
  13. 0:47書き方はとてもシンプルで、レタースペーシングの後ろにコロンを書き、間隔の値をひとつだけ書いて、
  14. 0:51最後にセミコロンを付けます。
  15. 0:55スライドの例では、デモというクラスに、ゼロ・一二エムを指定しています。
  16. 1:00エムは文字の大きさを基準にした単位で、文字サイズが変われば、間隔もそれに合わせて広がります。
  17. 1:07クラス名のドットや波かっこを書き忘れると効かないので、まずはこの三行をそのまま書き、
  18. 1:11ブラウザーで文字の間が少し開く様子を確かめてみましょう。
  19. 1:16値の前後に半角スペースを入れておくと、後から読み返したときにも、どこが間隔の指定か一目で分かります。
  20. 1:23指定できる値を読み解きましょう。
  21. 1:26大きく分けて、ノーマルと、長さの二通りがあります。
  22. 1:30ノーマルは、フォントが本来持っている標準の間隔で表示する指定です。
  23. 1:35長さで書く場合は、ピクセルやエムなどの単位を付けます。
  24. 1:39プラスの値で間隔が広がり、マイナスの値で間隔が詰まります。
  25. 1:44ただし、マイナスを大きくし過ぎると文字同士が重なって読めなくなります。
  26. 1:49指定するときは、広げるにしても詰めるにしても、小さな値から少しずつ試し、
  27. 1:54実際の画面で読みやすさを確認することが大切です。
  28. 1:59迷ったときは、まずノーマルから始め、少しだけ広げた値と見比べる手順が、初心者には一番分かりやすい方法です。
  29. 2:07単位の選び方を補足します。
  30. 2:09エムで指定すると、文字の大きさに比例して間隔が決まるので、見出しのように文字が大きい場所でも、
  31. 2:15本文のように小さい場所でも、バランスが崩れにくくなります。
  32. 2:22一方、ピクセルは画面上の固定の広さです。
  33. 2:25細かく狙いたい場面では分かりやすい反面、文字サイズが変わっても間隔は連動しません。
  34. 2:32実務では、短い見出しに少し広い間隔、長い本文にはごく小さな間隔かノーマル、
  35. 2:36という使い分けが基本です。
  36. 2:40本文全体に広い字間を設定すると、視線が文字を追いづらくなる点に注意してください。
  37. 2:47レスポンシブな画面では、文字サイズが変わる場面も多いため、連動するエム指定の方が扱いやすい場合が多くなります。
  38. 2:56初期値と継承を確認します。
  39. 2:58初期値はノーマルで、指定しなければフォント標準の間隔で表示されます。
  40. 3:03そして、このプロパティは親から子へ継承します。
  41. 3:06親の要素に書けば、その中にある見出しや文章にも同じ間隔が引き継がれます。
  42. 3:12便利な反面、広い範囲に広い字間を書いてしまうと、意図しない場所まで間隔が開いてしまうことがあります。
  43. 3:19継承を取り消したい要素には、改めてノーマルや小さい値を書き直してください。
  44. 3:25また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはノーマルと長さの違いをしっかり押さえましょう。
  45. 3:34継承の仕組みを理解しておくと、長い文章全体に一括で間隔を付けたり、外したりする作業が、
  46. 3:38ぐっと楽になります。
  47. 3:42ここからは記事の実例です。
  48. 3:44エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  49. 3:51デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
  50. 3:56折り返して複数行になる長さにしてあります。
  51. 4:00複数行あると、字間が広がったときに、行末の折り返し位置がどう変わるかまで観察できます。
  52. 4:07頭の部分では、スタイルシートをリンクで読み込んでください。
  53. 4:11この土台は変えずに固定し、次で変える一行の効果だけを観察します。
  54. 4:16ブラウザーで開いたときに折り返しが見える長さにしておくことが、間隔の効果を確かめるための大切な準備です。
  55. 4:24土台のシーエスエスです。
  56. 4:26ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  57. 4:32最後の行でレタースペーシングにゼロ・一二エムを指定すると、一文字ごとの間隔が広がり、
  58. 4:39同じ文章でも一行に収まる文字数が減って、折り返す位置が早くなります。
  59. 4:45色や余白は一切変えていないのに、文章がゆったりと間延びして見えるはずです。
  60. 4:51ファイルを保存してブラウザーを再読み込みし、文字の間隔と行末の位置の二点が同時に変わる様子を、
  61. 4:56よく観察してください。
  62. 5:00間隔が広がると、文章全体の横幅が伸びるため、親の箱に収まるかどうかも合わせて目で確かめてください。
  63. 5:08次に最後の行だけを、ノーマルへ置き換えます。
  64. 5:12すると、広がっていた文字の間隔がフォント標準に戻り、文章は元の詰まった並びに戻ります。
  65. 5:19一行に収まる文字数も増えるため、先ほどとは違う位置で折り返すはずです。
  66. 5:25ここで大切なのは、色や大きさは同じでも、間隔だけで読みやすさや行の長さが変わる、
  67. 5:29という実感です。
  68. 5:33広ければ良いわけではなく、文章の長さや文字の大きさに合った間隔が最適です。
  69. 5:39変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。
  70. 5:46二つの表示を交互に切り替えて比べると、間隔のわずかな違いが、読みやすさにどう影響するかがよく分かります。
  71. 5:55間違えやすい点を確認します。
  72. 5:57一番多い失敗は、日本語の本文全体に広い字間を設定してしまうことです。
  73. 6:01短い見出しでは上品に見えても、長い本文では視線の移動が増えて、かえって読みにくくなります。
  74. 6:08二つ目は、マイナスの値を大きくして文字を重ねてしまうことです。
  75. 6:12三つ目は、セレクターの不一致や、別の宣言に上書きされて効かないケースです。
  76. 6:17効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、
  77. 6:22コンピューテッドの順に調べ、対象の宣言が残っているかを確認しましょう。
  78. 6:27狭い画面幅や文字拡大でも読めるかの確認も大切です。
  79. 6:31特に、継承で親から広い間隔が届いていないかを確認すると、原因が見つかることがよくありますので忘れずに見てください。
  80. 6:39ブラウザー互換性を確認します。
  81. 6:41記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
  82. 6:46エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  83. 6:52アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  84. 6:57値のノーマルについても、主要ブラウザーで同じく古い版から対応しています。
  85. 7:02とても歴史の長いプロパティなので、今回使った基本の書き方は、安心して使えると考えてよいでしょう。
  86. 7:08ただし、新しい単位や珍しい書き方を追加する場合は、その部分の対応も別に確認してください。
  87. 7:15古いブラウザーまで含めて広く使えるため、字間の調整は、表示確認の負担が少ない、
  88. 7:18取り組みやすい装飾のひとつです。
  89. 7:22最後に練習とまとめです。
  90. 7:24まとめます。
  91. 7:25レタースペーシングは、文字と文字の間隔を決めるプロパティで、初期値はノーマル、
  92. 7:29親から子へ継承しました。
  93. 7:33プラスの長さで広がり、マイナスの長さで詰まりますが、広げ過ぎも詰め過ぎも読みにくさにつながります。
  94. 7:40練習として、まずゼロ・一二エムとノーマルの違いを言葉で説明し、次に親の幅や文章量だけを変えて、
  95. 7:45折り返しがどう変わるかを比べてみてください。
  96. 7:51お疲れさまでした。
  97. 7:52関連するラインハイトやフォントも合わせて学ぶと、文字まわりの整え方がより確かなものになります。
  98. 7:59関連プロパティも含めて文字まわりを整えられるようになると、見出しと本文のメリハリを自分で作れるようになります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

letter-spacingの役割と主な指定値を解説。文字間隔が広がり、行末の折り返し位置も変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのletter-spacingの使い方：指定値・実例・効かない原因とブラウザー互換性 →