テキスト

Revised: Jun./20th/2004

テキストの概念

一般的なウェブページは、テキスト・ベースです。例外的に、画像ベース、PDF、Flash などのコンテンツが存在しますが、基本的な役割はテキスト・ベースで実現されます。

文書全体を、要素をノードとする木構造で把握すると、木構造の末端（リーフ）は文字列になり、フォントのグリフをレンダリングする方法は、フォント関連のプロパティで指定されます。

グリフの連続である文のことをテキストと呼び、CSS2 では、次のプロパティが定義されています。

'text-indent'

行頭の字下げを指定します。

'text-align'

右寄せ／左寄せ／中央揃えなどの配置方法を指定します。

'text-decoration'

テキストの装飾方法を指定します。

'text-shadow'

影の効果を指定します。

'letter-spacing'

文字間のスペースを指定します。

'word-spacing'

単語間のスペースを指定します。

'text-transform'

大文字化／小文字化を指定します。

'white-space'

空白類文字の制御方法を指定します。

text-indent

プロパティ 'text-indent' は、ブロックレベルの要素に指定可能です。セレクタにマッチした対象の内容である行毎の、先頭の字下げサイズを指定します。

'text-indent' は子要素に継承されます。デフォルトの値は、インデントをとらない 0 です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

<percentage> の 100% となる値は、包含ブロックの幅です。

'text-indent' の例：

/* p 要素の行頭は 1 文字分へこます */
p { text-indent: 1em }

text-align

プロパティ 'text-align' は、ブロックレベルの要素に指定可能です。セレクタにマッチした対象の内容である行毎の、ブロック内での配置方法を指定します。

'text-align' は子要素に継承されます。デフォルトの値は、ユーザエージェントと言語の出力方法に依存します。inherit は、親要素の値を明示的に継承する指定です。

<percentage> の 100% となる値は、包含ブロックの幅です。

<string> は、テーブルのセルに対して指定した 'text-align' の値でだけ適用可能です。

キーワードの指定は、left, right, center, justify が指定可能です。各々、左揃え、右揃え、中央揃え、両端揃えを意味します。

'text-align' の例：

/* h1 要素のテキストを両端揃えにする */
h1 { text-align: justify }

/* address 要素のテキストを右揃えにする */
address { text-align: right }

/* td の内容の文字列に含まれる . の位置を列方向に揃える */
td { text-align: "." }

text-decoration

プロパティ 'text-decoration' は、任意の要素に指定可能です。セレクタにマッチした対象の装飾方法を指定します。

'text-decoration' は子要素に継承されません。デフォルトの値は、装飾しないこと意味する none です。inherit は、親要素の値を明示的に継承する指定です。

キーワード指定する場合、次のシンタックスで順不同に重複して指定可能です。

underline || overline || line-through || blink

キーワードの意味は、下線、上線、取り消し線、点滅です。

'text-decoration' の例：

a { text-decoration: underline }

a:hover { text-decoration: none }

a:active { texty-decoration: underline overline blink }

span.del { text-decoration: line-through }

text-shadow

プロパティ 'text-shadow' は、任意の要素に指定可能です。セレクタにマッチした対象の影の効果を指定します。

'text-shadow' は子要素に継承されません。デフォルトの値は、影効果が存在しないこと意味する none です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

CSS2 での拡張を遺憾なく発揮したプロパティだといえます。CSS2 サポートのブラウザでも、'text-shadow' を正しくサポートするものは殆どありません。Machintosh の Safari ブラウザがサポートしています。

'text-shadow' の例：

/* 影の色は文字と同じ色、
   影の位置は、右に .2em, 下に .2em */
h1 { text-shadow: 0.2em 0.2em }

/* 影の色は赤、
   影の位置は、右に 3px, 下に 3px, ぼかしが 5px */
h2 { text-shadow: 3px 3px 5px red }

/* 影が 3 つ指定され、カクテルライトのような効果となる。
   影1 の色は赤色、
   影1 の位置は、右に 3px, 下に 3px, ぼかしが 5px.
   影2 の色は黄色、
   影2 の位置は、右に -2px（左に 2px）, 下に 3px, ぼかしが 2px.
   影3 の色は文字色と同じ、
   影3 の位置は、右に 3px, 下に -3px（上に 3px） */
h2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

表示例：

letter-spacing

プロパティ 'letter-spacing' は、任意の要素に指定可能です。セレクタにマッチした対象のテキストの、単語間のスペースを指定します。

'letter-spacing' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

'letter-spacing' の例：

h1 { letter-spacing: 1em }

表示例：

word-spacing

プロパティ 'word-spacing' は、任意の要素に指定可能です。セレクタにマッチした対象のテキストの、文字間のスペースを指定します。

'word-spacing' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

'word-spacing' の例：

h1 { word-spacing: 2em }

表示例：

text-transform

プロパティ 'text-transform' は、任意の要素に指定可能です。セレクタにマッチした対象のテキストの、大文字化を指定します。

'word-spacing' は子要素に継承されます。デフォルトの値は、none です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

capitalize

各単語の最初の文字を大文字にする。

uppercase

各単語のすべての文字を大文字にする。

lowercase

各単語のすべての文字を小文字にする。

none

大文字化の効果はない。

white-space

プロパティ 'white-space' は、ブロックレベル要素に指定可能です。セレクタにマッチした対象の、空白類文字の取り扱い方法を指定します。

'white-space' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

'white-space' の例：

blockquote { white-space: nowrap }

'white-space: nowrap' の表示例：

HTML：

Girt with a boyish garb for boyish task,
         Eager she wields her spade: yet loves as well <br />
   Rest on a friendly knee, intent to ask 
              The tale he loves to tell. <br />

   Rude spirits of the seething outer strife, 
        Unmeet to read her pure and simple spright, <br />
   Deem, if you list, such hours a waste of life, 
              Empty of all delight!

表示例：

'white-space: pre' の表示例

HTML：

Girt with a boyish garb for boyish task,
         Eager she wields her spade: yet loves as well
   Rest on a friendly knee, intent to ask 
              The tale he loves to tell.

   Rude spirits of the seething outer strife, 
        Unmeet to read her pure and simple spright,
   Deem, if you list, such hours a waste of life, 
              Empty of all delight!

表示例：

'white-space: normal' の表示例

HTML：

Girt with a boyish garb for boyish task,
         Eager she wields her spade: yet loves as well
   Rest on a friendly knee, intent to ask 
              The tale he loves to tell.

   Rude spirits of the seething outer strife, 
        Unmeet to read her pure and simple spright,
   Deem, if you list, such hours a waste of life, 
              Empty of all delight!

表示例：