CSS辞典 letter-spacingプロパティの解説

css辞典 CSS辞典
この記事は約3分で読めます。

文字の間隔を指定する「letter-spacingプロパティ」の使用方法を記載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

初期値 normal
適用される要素 すべての要素
モジュール CSS Text Module Level3
継承 あり

概要・使用方法

{letter-spacing: 間隔;}

「letter-spacingプロパティ」は文字の間隔を指定します。

使用方法

normal文字の間隔を調整しません。フォントの標準の間隔になります。
数値+単位文字の間隔を単位付きの数値で指定します。負の値も指定できます。
CSS3変更点

CSS Text Level 3 では、letter-spacingプロパティの値として、normalまたは長さを示す値を、1~3個まで指定できます。値を3個指定した場合は、文字間の間隔の最適値、最小値、最大値をそれぞれ表します。

CSS Text Level 3ではさらい、日本語など言語特有のルールを使って文字間に空白を入れたり取り除いたありするための「text-spacingプロパティ」も新しく追加予定とされています。ただし、このプロパティへのサポートはブラウザの選択に任されており、優先的に実装される見込みはありません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>letter-spacingプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1{letter-spacing: 0.5em;}
    </style>
  </head>
  <body>
      <h1>letter-spacingなし</h1>
      <p>危険な夏の生物。それはクラゲといわれる動物。</span></p>
      <h1>letter-spacingあり</h1>
      <p class="sample1">危険な夏の生物。それはクラゲといわれる動物。</span></p>
  </body>
</html>
実行結果

letter-spacingなし

危険な夏の生物。それはクラゲといわれる動物。

letter-spacingあり

危険な夏の生物。それはクラゲといわれる動物。

chrome 実行サンプル

letter-spacingプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

letter-spacingプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

letter-spacingプロパティのedgeブラウザの実行結果

opera 実行サンプル

letter-spacingプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました