テキスト装飾と間隔の調整

テキスト装飾と間隔の調整

このページでは、テキストの装飾や間隔の調整方法について学びます。具体的には、下線、取り消し線、上線の装飾や、文字間隔、行間隔の設定方法を説明します。

テキスト装飾の指定方法

テキスト装飾は、CSSのtext-decorationプロパティを使って指定します。下線（underline）、取り消し線（line-through）、上線（overline）の3つの装飾があります。例えば、以下のように指定できます。

<style>
  p {
    text-decoration: underline;
  }
</style>

上記のコードでは、段落（<p>）要素に下線が追加されます。他の装飾も同様に指定できます。

文字間隔と行間隔の調整方法

文字間隔は、CSSのletter-spacingプロパティを使って指定します。単位はピクセル（px）やemなどが使えます。例えば、以下のように指定できます。

<style>
  p {
    letter-spacing: 2px;
  }
</style>

上記のコードでは、段落（<p>）要素の文字間隔が2ピクセルに設定されます。

行間隔は、CSSのline-heightプロパティを使って指定します。単位はピクセル（px）やem、または無単位の数値が使えます。例えば、以下のように指定できます。

<style>
  p {
    line-height: 1.5;
  }
</style>

上記のコードでは、段落（<p>）要素の行間隔が1.5倍に設定されます。

これで、テキスト装飾や文字間隔、行間隔の調整方法について学ぶことができました。テキストの見た目を調整することで、ウェブページの印象を変えることができます。次のページでは、色と背景について学んでいきましょう。