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

CSSのletter-spacingで文字間隔を調整する方法

CSSでは、letter-spacingプロパティを使用することで、文字と文字の間隔(字間)を自由に調整できます。見出しやナビゲーションメニューなど、デザインの目的に応じて字間を広げたり狭めたりすることで、テキストの読みやすさや全体の印象を大きく変えることができます。

letter-spacingの基本構文

letter-spacingプロパティの基本的な書き方は以下の通りです。

セレクタ {
    letter-spacing: /*値*/
}

値には「px」「pt」「em」などの単位を指定できます。正の値を指定すると字間が広がり、負の値を指定すると字間が詰まります。

サンプルコード1:文字間隔を広げる例

次の例では、リスト項目(li要素)に対してletter-spacingを5pxに設定し、文字間隔を広げています。あわせてline-heightプロパティで行間も調整しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    box-shadow: 0 -10px 0 1px lightpink;
}
li {
    letter-spacing: 5px;
    line-height: 1.2em;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<div>
<ol>
<li>これはデモテキストです!</li>
<li>これです!</li>
<li>もう一つのデモテキストです!</li>
</ol>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、リストの各文字が5pxずつ離れた状態で表示されます。

CSSのletter-spacingで文字間隔を調整する方法

サンプルコード2:負の値で文字間隔を詰める例

letter-spacingには負の値も指定でき、その場合は文字間隔が通常より狭くなります。次の例では、定義リストのdt要素に-2pxを指定して字間を詰め、dd要素には2ptを指定して字間を広げています。さらにword-spacingプロパティを使って単語間のスペースも調整し、背景色やイタリック体を組み合わせたスタイリングを行っています。

<!DOCTYPE html>
<html>
<head>
<style>
dt {
    font-size: 20px;
    letter-spacing: -2px;
    word-spacing: 1em;
    color: white;
    font-style: italic;
    background-color: cadetblue;
}
dd {
    letter-spacing: 2pt;
}
</style>
</head>
<body>
<h2>プログラミング言語とデータベース</h2>
<dl>
<dt>Java</dt>
<dd>James Goslingによって開発されたプログラミング言語です。</dd>
<dt>C++</dt>
<dd>Bjarne Stroustrupによって開発されたプログラミング言語です。</dd>
<dt>MySQL</dt>
<dd>MySQLはオープンソースのリレーショナルデータベース管理システムです。</dd>
</dl>
</body>
</html>

表示結果

上記のコードを実行すると、dt要素の文字は字間が詰まり、dd要素の説明文は字間が広がって表示されます。

CSSのletter-spacingで文字間隔を調整する方法

  1. CSSのword-spacingプロパティで単語間隔を調整する方法

    CSSのword-spacingプロパティは、要素内の単語と単語の間隔(スペース)を指定するために使用します。英文テキストの可読性を高めたり、デザインに余白感を持たせたい場合に活用できる便利なプロパティです。構文word-spacingプロパティの基本的な構文は以下のとおりです。Selector { word-spacing: /*value*/ }指定できる主な値normal: ブラウザの標準的な単語間隔を適用します(初期値)。長さ(px、em、remなど): 数値で単語間隔を指定します。負の値を指定すると間隔が狭まります。使用例1次の例では、入れ子になったdiv要素に対してword

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

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