テキスト

テキスト全体

テキスト関連の特性をいくつか示す。

text-indent特性

ブロック内のテキストの最初の行の字下げ幅を指定する。 指定できる値は以下のどれか。

• 長さ値

  固定幅で長さ を指定する。

• パーセント値

  包含ブロック幅に対するパーセンテージで 字下げ幅を指定する。

CSSで、

p {text-indent: 1em;}

とすると全てのp要素が先頭行に 1em 文の字下げを持つようになる。 ただし、現実的にはulなどの箇条書きに続けた段落は新規段落でなく 字下げしない方がよいことが多い。このようなときは 新規の段落になりそうな隣接要素関係で字下げを設定するとよい。 たとえば、

h1+p, h2+p, h3+p, p+p, p.new {text-indent: 1em;}

とすると、h1、h2、h3、またはp要素の直後にくるp要素と、 明示的にclass名としてnewを指定したp要素の text-indent を 1em に設定している。

text-align特性

テキストの行揃えを指定する。

• left

  左揃え

• right

  右揃え

• center

  中央揃え

• justify

  両端揃え

tableに用いるtd要素(セル)に対しては以下の特性値も有効である。

• 文字列

  同一列にあるセル内の文字列を、指定した文字列 の位置が揃うように配置する。典型的用途としては小数点のある 数値を同一列にしたいとき、

  td {text-align: "."}

  としておくことで、

  <table>
   <tr><th>商品</th><th>伸び率</th></tr>
   <tr><td>んめちゃ棒</td><td>50.30</td></tr>
   <tr><td>きなこもち棒</td><td>150.25</td></tr>
  </table>
  

  という表の第2列が小数点位置で揃う。

  商品	伸び率
  んめちゃ棒	50.30
  きなこもち棒	150.25

現状ではFirefox/Operaともに揃わない(上の表が揃っているとすれば インチキをしたため)。

text-decoration特性

テキストに付加される装飾を決定する。

• none

  装飾なし

• underline

  下線 を引く

• overline

  上線を引く

• line-through

  取消線(中央線)を引く (取消)

• blink

  点滅させる。ただし、サポートされない場合もありうる。

letter-spacing特性

字間スペースを指定する。指定できる特性値は以下のいずれか。

• normal

  フォントに即した通常の間隔を用いる。

• 長さ値

  normalによる通常の間隔に加えて、指定した 長さのスペースを追加する。 負の値でもよい。ユーザエージェントによっては 正確に反映されないこともありうる。

  例:幅2emの段落

word-spacing特性

単語間スペースを指定する。

• normal

  フォントに即した通常の間隔を用いる。

• 長さ値

  normalによる通常の間隔に加えて、指定した 長さのスペースを追加する。 負の値でもよい。ユーザエージェントによっては 正確に反映されないこともありうる。

text-transform特性

大文字小文字の変換を指定する。日本語には無関係。

• capitalize

  各単語の先頭1字を大文字化する。

• uppercase

  全ての英字を大文字化する。

• lowercase

  全ての英字を小文字化する。

• none

  変換しない。

white-space特性

要素内の空白文字(スペース=0x20や、タブ文字=0x08、改行=0x0a)を どう扱うかを指定する。

• normal

  通常の処理。複数の空白を連続して入れても1つに縮訳される。 現在の行がブロックの幅を満たしたら、自動的に改行される。 ソース内の改行文字は出力先での改行とはならない。 出力先での改行を強制的に支持する場合はbr要素等を利用する。

• pre

  pre要素と同じように、 ソースにある 空白をそのまま 出力する。 改行もソースと同じ位置で出力される。 この説明段落がpre特性値の例である。

• nowrap

  normalと同様空白文字は縮訳して出力。ただし 改行文字は 原則として 出力しない。 ただしbr要素などで明示的に指定した場合を除く。
  この説明段落がnowrap特性値の例である。

文字

文字そのもののフォントなどを決定する特性をいくつか示す。

font-size特性

テキストのフォントサイズを指定する。絶対指定、 相対指定、長さ値、パーセンテージで指定できる。絶対指定の場合は

• xx-small, x-small, small, medium, large, x-large, xx-large

  キーワードによる7段階での大きさ指定。後者ほど大きい。

相対指定の場合は、

• larger, smaller

  現在のフォントサイズより1段階大きく、または小さくする。

が指定できる。長さ値では具体的な文字サイズ、パーセンテージでは そのときの標準値からの比率が指定できる。

font-family特性

フォントファミリを指定する。システムの持つフォントファミリと 一致した場合のみ選択される。保有するフォントはシステムによって 大きく異なるので、他者が見る場合にそれが選択されることは まずないと思って設定し、指定したフォントが選ばれなくても 内容理解に支障がないように注意する。 カンマで区切って複数の候補を書け、その場合最初に見つかった フォントが採用される。

      <div style="font-family: mika, aquafont, baskerville, 'vl pgothic'">
      <p>あいうabc</p>
      </div>

あいうabc