いまさらHTML,CSS入門講座 | CSS｜テキスト関連プロパティ

• text-decoration
• letter-spacing
• text-align
• text-indent
• text-shadow
• text-justify
• text-transform
• vertical-align
• word-spacing
• white-space

テキストに下線、上線、打ち消し線、点滅などの装飾を指定します。

値)

• none (装飾指定をしない)
• underline (テキストに下線を指定します。)
• overline (テキストに上線を指定します。)
• line-through (テキストに打ち消し線を指定します。)
• blink (テキストに点滅を指定します。)※未対応のブラウザがあります。

例)

text-decoration: underline;

テキストの文字間隔を指定します。単位をつけた数値で指定する場合、デフォルトに対しての増、減で数値を指定します。下のソースでは、デフォルト値に、2px分文字間隔をプラス指定しています。

値)

• normal (標準)
• 単位をつけた数値

例)

letter-spacing: 2px;

ブロック要素や表のセル要素内のテキストや画像など、インラインの内容の水平方向の揃え方を指定します。

値)

• left (左揃え)
• center (中央揃え)
• right (右揃え)
• justify (両端揃え)

例)

text-align: center;

ブロック要素内の文章を、字下げ(インデント)を指定をします。

値)

• 単位をつけた数値
• パーセンテージ値(%)

例)

text-indent: 10px;

要素内のテキストに影を付けることを指定します。※一部のブラウザのみ対応。

値)

• none (影を付けない)
• 単位をつけた数値

例)

text-shadow: 2px 2px 2px gray;

単位をつけた数値で影指定する場合、左から、テキストに対して左右、上下、ぼかしの範囲、影の色が割り当てられます。なお、text-shadowプロパティはCSS2.1で削除されていますが、CSS3で再定義されているので掲載。

text-align プロパティの値で、justify(両端揃え)を指定した場合に、単語を半角スペースで区切る言語以外の言語表記体系にあわせた両端揃えを指定します。

両端揃えは、単語間の半角スペースの幅で調整を行っているため、単語を半角スペースで区切る欧文などの言語に対して指定するもので、text-justifyプロパティを text-align: justify;と併用する事で、様々な言語に対応可能です。

もともと Win版 IE独自の拡張機能ですが、CSS3では、正式な仕様として採用される事が考案されています。

値)

• auto (訪問者の環境に依存)
• distribute (単語間の半角空白と字間を調整する。最後の行は両端揃えしない。)
• inter-word (distributeと同じ)
• distribute-all-lines (distributeと同じ調整方法。最後の行の両端揃えもする。)
• distribute-center-last (両端揃えを行わない。最後の行のみ中央揃えで表示。)
• inter-cluster (文字間のみを調整する。東南アジア言語に有用。)
• inter-ideograph (漢字や平仮名の文字間と単語間を調整する。)
• kashida (特定の文字を選び、その文字を引き伸ばして調整する。アラビア語などの表記体系に有用)
• newspaper (単語間の半角スペースを調整。必要に応じて文字間も広げて調整する。)

例)

p{
width: 20%;
text-align: justify;
text-justify: distribute-all-lines;
}

複数フォントを指定する場合、各フォントは、コンマ( , )で区切り、また、ＭＳ Ｐゴシックのように、フォント名にスペースが含まれる場合、シングルクォーテーション（ ' ）またはダブルクォーテション（ " ）の引用符で括ります。

font-familyプロパティでフォントを指定する場合、上記ソースのように、Arialで欧文フォント、ＭＳ Ｐゴシックで和文フォント、さらに、前述フォントが無視される場合の代替フォントとして、sans-serifを指定すると良いでしょう。

大文字と小文字が存在する言語の、大文字を小文字に、小文字を大文字に変換して表示します。

値)

• none (変換しない)
• capitalize (各単語の1文字目のみを大文字に変換)
• lowercase (すべてを小文字に変換)
• uppercase (すべてを大文字に変換)

例)

text-transform: capitalize;

インライン要素や、表のセル要素の垂直方向の位置揃えを指定します。値は、単位のついた数値、パーセンテージ( % )の他、下記の値で指定します。

値)

• baseline (親要素のベースラインに揃える)
• top (行中の最も高い内容の上辺に揃える)
• bottom (行中の最も低い内容の下辺に揃える)
• middle (行中の最も高い内容の中央に揃える)
• super (上付き文字の位置に揃える)
• sub (下付き文字の位置に揃える)
• text-top (親要素の上辺にテキストを揃える)
• text-bottom (親要素の下辺にテキストを揃える)

※セル要素に、super、sub、text-top、text-bottom の値を指定した場合は無視されます。

例)

vertical-align: top;

半角スペースで区切られた単語の間隔を指定します。

値)

• normal (ユーザー環境に依存)
• 単位をつけた数値

単位をつけた数値で指定する場合デフォルトに対しての増、減で数値を指定します。

例)

word-spacing: 3px;

半角スペース、タブ、改行などの空白類文字の動作を指定します。

値)

• normal
  (ソース中の連続する半角スペース、タブ、改行を、1つの半角スペースとして表示します。ボックスの大きさを指定している場合には、その大きさに達すると自動的に改行されます。)
• pre
  (ソース中の連続する半角スペース、タブ、改行を、そのまま表示します。)
• nowrap
  (ソース中の連続する半角スペース、タブ、改行を、1つの半角スペースとして表示します。自動改行はされません。)

例)

white-space: pre;

CSSの仕様において、ブラウジング環境は、white-spaceプロパティの指定を無視しても構わないとされています。これは、例えばHTML文書でソースコードを例示する場合、正しくソースコードが表示されない可能性を意味します。

値のpreは、ブロック要素の pre要素と似たような働きをしますが、pre要素の代替にはなりませんので、ブラウザの対応状況からして、積極的に使う事はお勧めしません。