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

CSSのword-spacingプロパティを使って単語間の間隔を管理する方法

CSSのword-spacingプロパティを使用すると、テキスト内の単語と単語の間にある空白（ホワイトスペース）の量を自由に設定できます。デフォルトの状態から広げたり、値に「normal」を指定して標準の間隔に戻したりすることも可能です。

指定できる主な値は以下の通りです。

  • normal：標準の単語間隔（初期値）
  • 長さの単位：px、em、rem、cmなどで間隔を明示的に指定（負の値も指定可能）

それでは、実際のコード例を見ていきましょう。

例1：div要素にword-spacingを適用する

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 2%;
   padding: 2%;
   background-color: mediumorchid;
   color: ivory;
   word-spacing: 2.2cm;
}
div:last-of-type {
   word-spacing: normal;
}
</style>
</head>
<body>
<div>I Don't Care! I Love It!</div>
<div>I Don't Care! I Love It!</div>
</body>
</html>

この例では、1つ目のdiv要素には「2.2cm」という大きな単語間隔が適用され、2つ目のdiv要素には「:last-of-type」疑似クラスによって「normal」が指定されているため、標準の間隔で表示されます。両者を比較することで、word-spacingプロパティの効果がひと目でわかります。

出力結果

上記のコードを実行すると、次のような結果になります。

CSSのword-spacingプロパティを使って単語間の間隔を管理する方法

例2：article要素にword-spacingを適用する

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: 2%;
   padding: 2%;
   background-color: azure;
   word-spacing: 2.2cm;
}
article:last-of-type {
   word-spacing: normal;
}
</style>
</head>
<body>
<article>tldr; this article doesn;t mean anything</article>
<article>0123456789 is not a phone number</article>
</body>
</html>

こちらの例では、article要素に対して同じく「2.2cm」の単語間隔を設定しています。数値や記号を含むテキストでも、空白文字で区切られた部分すべてに間隔が適用される点に注目してください。

出力結果

上記のコードを実行すると、次のような結果になります。

CSSのword-spacingプロパティを使って単語間の間隔を管理する方法

まとめ

word-spacingプロパティは、英文テキストの可読性を調整したい場合や、タイポグラフィにこだわったデザインを実装したい場合に非常に便利です。ただし、日本語などの単語の区切りが空白ではない言語では効果が限定的なため、使用場面を選んで活用するとよいでしょう。

  1. CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

    CSSのappearanceプロパティは、要素をユーザーのOSネイティブなスタイルに合わせて表示したり、逆にデフォルトの外観を無効化して独自のデザインを適用したりできる便利なプロパティです。この記事では、appearance: none;を活用して、チェックボックスを自由にカスタマイズする方法を解説します。appearanceプロパティとは通常、チェックボックスやラジオボタンなどのフォーム部品は、ブラウザやOSが提供する標準的な見た目で表示されます。appearanceプロパティにnoneを指定すると、このデフォルトスタイルを解除できるため、背景色・角丸・影などを自由に設定したオリジナルデザイ

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

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