【CSS入門】color・letter-spacing・word-breakなどをマスター

この記事ではfontに関連するプロパティについて解説します。

fontについては以下の記事をお読みください。

font関連のプロパティ

font関連のプロパティは以下の通りです。

color

文字の色を指定します。

colorに指定できる値は以下の通りです。

HTML

<p>このcolorはredです。</p>

CSS

p{
  color: red;
}

letter-spacing

文字の間隔を指定します。

値をマイナスで指定する事も出来ます。letter-spacingに指定できる値は以下の通りです。

HTML

<p>このletter-spacingは10pxです。</p>

CSS

p{
  letter-spacing: 10px;
}

word-break

行の改行方法を指定します。

値によって、CJK (中国語、日本語、韓国語)と非CJK(英語など)の改行制限の程度を指定できます。word-breakに指定できる値は以下の通りです。

break-allを指定すると、英単語の途中でも折り返してしまうのでbreak-allは基本的に使用しないほうがいいです。

HTML

<p>Lorem ipsum dolor sit amet, consectetur・・・</p>

CSS

p{
  word-break: break-all;
}

word-wrap

単語の途中で改行するかどうかを指定します。

word-wrapに指定できる値は以下の通りです。

HTML

<p>Lorem ipsum dolor sit amet, consectetur・・・</p>

CSS

p{
  word-wrap: break-word;
}

まとめ

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。