テキスト

テキスト全体

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

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特性値の例である。

• pre-wrap

  pre と 同 じで 空白 と改行をそのまま出力するが、ボックスの幅よりも長くなった部分はその幅に応じて自動的に折り返して出力する。

文字

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

font-size特性

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

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

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

相対指定の場合は、

• larger, smaller

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

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

font-weight特性

テキストのフォントの太さ(ウェイト)を指定する。数値指定もあるが 多段階に太さ指定できる環境ばかりではない。以下の2つは通常利用できる。

• normal

  標準の太さ

• bold

  太字

font-family特性

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

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

あいうabc