CSS3: word-spacing プロパティ - 単語と単語の間隔

■ 概要

項　　目説　　明
記述形式
  1. セレクタ {word-spacing: 値1 }
  2. セレクタ {word-spacing: 値1　値2 }
  3. セレクタ {word-spacing: 値1　値2　値3 }
値 の形式 normal | 数値　（長さ，%）
初 期 値 normal
対応ブラウザー C1+ / e6+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 する

■ 解説

word-spacingプロパティ は，単語と単語の間隔を指定します。

なお，上に示した入力形式の 1 ～ 3 は，それぞれ，つぎの意味になります。

  1. 値1 が 最適値，最小値，最大値 のすべての値となります。
  2. 値1 が 最適値 と 最小値，値2 が 最大値 となります。
  3. 値1 が 最適値，値2 が 最小値，値3 が 最大値 となります。

指定できる各値の形式は，以下のとおりです。

値説　　明
normal ブラウザーが自動調節します。（初期値）
数値
（長さ）		 単語と単語の間隔を下のような単位で指定します。
数値
（%）		 normal の場合の間隔を 1 とした百分率（%）で指定します。

数値（長さ）による word-spacing の指定は，次のような単位を付けて可能です。

単位説　　明
px
px とは画面の１画素（ピクセル） のサイズを１とする単位です。　実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを１とする単位です。　
ex
ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。

■ 使用例（ overflow プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
  div.wsp1 { width:550px; height:200px; background-color:#00BBBB;
                word-spacing: normal;}
  div.wsp2 { width:550px; height:200px; background-color:#00BBBB; 
                word-spacing: 1em;}
  div.wsp3 { width:550px; height:200px; background-color:#00BBBB; 
                word-spacing: 300%;}
-->
</style>
HTML
<body> ～ </body>		 
<div class="wsp1">
   <b>normal</b><br><br>
      When in the Course of human events, it becomes necessary
      for one people to dissolve the political bands which have
      connected them with another, and to assume among the
      powers of the earth, the separate and equal station to
      which the Laws of Nature and of Nature's God entitle them,
      a decent respect to the opinions of mankind requires
      that they should declare the causes which impel them to
      the separation.
</div>
<br>
<div class="wsp2">
   <b>数値（長さ）= 1em</b><br><br>
      When in the Course of human events, it becomes necessary
      for one people to dissolve the political bands which have
      connected them with another, and to assume among the
      powers of the earth, the separate and equal station to
      which the Laws of Nature and of Nature's God entitle them,
      a decent respect to the opinions of mankind requires
      that they should declare the causes which impel them to
      the separation.
</div>
<br>
<div class="wsp3">
   <b>数値（%）= 300%</b><br><br>
      When in the Course of human events, it becomes necessary
      for one people to dissolve the political bands which have
      connected them with another, and to assume among the
      powers of the earth, the separate and equal station to
      which the Laws of Nature and of Nature's God entitle them,
      a decent respect to the opinions of mankind requires
      that they should declare the causes which impel them to
      the separation.
</div>

ブラウザー 表示例
normal

When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

数値（長さ）= 1em

When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

数値（%）= 300%

When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

■ 備考

【参考ページ】