JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのletter-spacingプロパティで文字間隔を調整する方法

Webページ上のテキストにおいて、単語を構成する文字同士の間隔（字間・トラッキング）を広げたり狭めたりしたい場合は、CSSの letter-spacing プロパティを使用します。

letter-spacingプロパティとは

letter-spacingは、テキスト内の各文字の間に挿入されるスペースの量を指定するプロパティです。値には「px」「em」「rem」などの長さの単位を使えます。正の値を指定すると文字間隔が広がり、負の値を指定すると狭くなります。

使用例

以下のコードでは、letter-spacingプロパティに「4px」を指定することで、段落の文字間隔を広げています。実際にブラウザで表示して、文字の間が空いている様子を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "letter-spacing:4px;">
         Asia is a continent.
      </p>
   </body>
</html>

ポイント

  • 日本語テキストにも適用でき、見出しやタイトルのデザインに活用すると洗練された印象になります。
  • 負の値（例：-1px）を指定すれば、文字を詰めて表示することも可能です。
  1. CSSでページネーションリンクの間にスペースを追加する方法

    Webサイトのページネーション(ページ送り)は、複数のページを快適に行き来するための重要なUI要素です。しかし、デフォルトの状態ではリンク同士がくっついてしまい、見た目が窮屈になったり、クリックしづらくなったりすることがあります。 この記事では、CSSを使ってページネーションリンクの間に適切なスペースを追加する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 実装のポイント display: inline-block; — 各リンクをインラインブロック要素にすることで、paddingやmarginなどのボックスモデル関連プロパティが正しく反映されます。 padding:

  2. CSSのletter-spacingプロパティを使って文字間隔（字間）を設定する方法

    CSSのletter-spacingプロパティを使用すると、テキストの文字と文字の間隔（字間）を自由に指定できます。値にはnormalのほか、pxやemなどの長さの単位を指定でき、タイトルや見出しのデザイン性を高めたり、可読性を調整したりする際に非常に便利です。 基本の構文 letter-spacing: normal | <length>; normalを指定するとブラウザ標準の間隔になり、数値を指定するとその分だけ文字間が広がります。負の値を指定すれば、文字間を詰めることも可能です。 サンプル1：em単位で文字間隔を指定する 以下の例では、最初のp要素だけにletter-spa