3. テキストのスタイリング

テキストのスタイリングは、ウェブページのデザインにおいて重要な要素です。この章では、CSS を使用してテキストをどのようにスタイリングするかを学びます。

3.1 テキストの色

テキストの色を変更するには、colorプロパティを使用します。以下は例です。

<p style="color: blue;">このテキストは青色です。</p>
<p style="color: #ff6347;">このテキストはトマト色です。</p>

3.2 フォントサイズの変更

テキストのフォントサイズを変更するには、font-sizeプロパティを使用します。単位はピクセル（px）、相対値（em、rem）などが利用できます。

<p style="font-size: 16px;">このテキストは16ピクセルです。</p>
<p style="font-size: 1.5em;">このテキストは1.5emです。</p>

3.3 フォントスタイルの設定

フォントスタイルを変更するには、font-familyプロパティを使用します。一般的なフォントファミリやウェブセーフフォント、Google Fonts も利用可能です。

<p style="font-family: 'Arial', sans-serif;">
  このテキストはArialフォントです。
</p>
<p style="font-family: 'Courier New', monospace;">
  このテキストはCourier Newフォントです。
</p>

3.4 テキストの装飾

テキストに下線や取り消し線を追加するには、text-decorationプロパティを使用します。

<p style="text-decoration: underline;">このテキストは下線付きです。</p>
<p style="text-decoration: line-through;">
  このテキストは取り消し線が引かれています。
</p>

3.5 テキストの配置

テキストの配置を変更するには、text-alignプロパティを使用します。左揃え、中央揃え、右揃え、両端揃えなどのオプションがあります。

<p style="text-align: left;">このテキストは左揃えです。</p>
<p style="text-align: center;">このテキストは中央揃えです。</p>
<p style="text-align: right;">このテキストは右揃えです。</p>
<p style="text-align: justify;">このテキストは両端揃えです。</p>

3.6 行間隔の調整

行間隔を調整するには、line-heightプロパティを使用します。数値だけで指定するか、単位をつけて指定します。

<p style="line-height: 1.5;">このテキストの行間隔は1.5です。</p>
<p style="line-height: 24px;">このテキストの行間隔は24ピクセルです。</p>

3.7 テキストの大文字・小文字

テキストを大文字や小文字に変換するには、text-transformプロパティを使用します。

<p style="text-transform: uppercase;">このテキストはすべて大文字です。</p>
<p style="text-transform: lowercase;">このテキストはすべて小文字です。</p>
<p style="text-transform: capitalize;">
  このテキストは単語の先頭が大文字です。
</p>

3.8 文字間隔の調整

文字と文字の間隔を調整するには、letter-spacingプロパティを使用します。

<p style="letter-spacing: 2px;">このテキストの文字間隔は2ピクセルです。</p>
<p style="letter-spacing: 0.1em;">このテキストの文字間隔は0.1emです。</p>

3.9 テキストの影

テキストに影を追加するには、text-shadowプロパティを使用します。

<p style="text-shadow: 2px 2px 4px #000000;">
  このテキストには黒い影が追加されています。
</p>

これで、CSS を使ったテキストのスタイリングの基本を学びました。実際にコードを試してみて、どのプロパティがどのようにテキストに影響を与えるかを確認してください。