TECH I.S.

CSS テキストの間隔

テキストの間隔

この章では、次のプロパティについて学習します。

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

テキストのインデント

text-indentプロパティは、テキストの最初の行のインデントを指定するために使用されます。

例

p {   text-indent: 50px; }
自分で試してみる »

文字間隔

letter-spacingプロパティは、テキスト内の文字間のスペースを指定するために使用されます。

次の例は、文字間のスペースを増減する方法を示しています。

例

h1 {   letter-spacing: 5px; } h2 {   letter-spacing: -2px; }
自分で試してみる »

行の高さ

line-heightプロパティは、行間のスペースを指定するために使用されます。

例

p.small {   line-height: 0.8; } p.big {   line-height: 1.8; }
自分で試してみる »

word-spacing

word-spacingプロパティは、テキスト内の単語間のスペースを指定するために使用されます。

次の例は、単語間のスペースを増減する方法を示しています。

例

p.one {   word-spacing: 10px; } p.two {   word-spacing: -2px; }
自分で試してみる »

ホワイトスペース

white-spaceプロパティは、要素内の空白の処理方法を指定します。

この例は、要素内でのテキストの折り返しを無効にする方法を示しています。

例

p {   white-space: nowrap; }
自分で試してみる »

CSS テキスト間隔のプロパティ

プロパティ

説明
letter-spacing テキスト内の文字間のスペースを指定します。
line-height 行の高さを指定します。
text-indent テキストブロックの最初の行のインデントを指定します。
white-space 要素内の空白の処理方法を指定します。
word-spacing テキスト内の単語間のスペースを指定します。


チュートリアル