CSS フォントの装飾によく使うプロパティ10選

ウェブサイトのデザインにおいて、フォントは重要な役割を果たします。
フォントの種類や装飾を変えることで、ページの雰囲気や印象を大きく変えることができます。

この記事では、CSSでよく使うフォントを装飾するプロパティを10個紹介します。

font-family

font-family プロパティは、使用するフォントファミリーを指定します。

p {
    font-family: Arial, sans-serif;
  }

font-family:serif;は明朝体です。

font-family:sans-serif;はゴシック体です。

上記のように指定することでフォントの種類が変わります。
また、複数のフォントファミリーを指定する場合は、カンマで区切ります。
最初に指定されたフォントが利用できない場合、その後に指定されたフォントが順次使用されます。

font-size

font-size プロパティは、文字の大きさを指定します。

h1 {
    font-size: 24px;
  }

font-size: 24px;は、この大きさです。

font-size: 36px;は、この大きさです。

文字の大きさは、ピクセル (px)、ポイント (pt)、エム (em)、パーセント (%) などで指定できます。
相対的な大きさで指定する場合は、em や % を使用するのが便利です。

font-weight

font-weight プロパティは、文字の太さを指定します。

strong {
    font-weight: bold;
  }

font-weight: bold;は、この太さです。

font-weight: normal;は、この通常の太さです。

太さは、normal、bold、lighter、bolder などのキーワードで指定できます。
数字で指定することも可能ですが、フォントの種類によっては細かな指定に対応していない場合があります。

font-style

font-style プロパティは、文字のスタイルを指定します。

i {
    font-style: italic;
  } 

font-style: italic;は、斜体になります。

スタイルは、normal、italic、oblique などのキーワードで指定できます。

line-height

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

p {
    line-height: 2;
  }

この文章は
line-height:1;です。

この文章は
line-height:2;です。

この例では、p 要素内の行の高さは基準行の高さの2倍になります。

line-height プロパティでは、主に行の高さをピクセル (px)、ポイント (pt)、エム (em)、パーセント (%) などで指定します。

color

color プロパティは、文字の色を指定します。

p {
    color: blue;
  } 

color: blue;で文字は青色になります。

colorプロパティでは様々な色を指定することができます。

text-decoration

text-decoration プロパティは、文字の装飾線を指定します。

a:link {
    text-decoration: underline;
  } 

text-decoration: underline;は、アンダーラインが付きます。

text-decoration: overline;は、上部に線が付きます。

text-decoration: line-through;は、見え消し線が付きます。

装飾線は、none、underline、overline、line-through などのキーワードで指定できます。

text-align

text-align プロパティは、テキストの水平方向の配置を指定します。

p {
    text-align: center;
  }

text-align: center;は中央揃えです。

text-align: center;は左揃えです。

text-align: right;は右揃えです。

配置は、left、center、right、justify などのキーワードで指定できます。

text-indent

text-indent プロパティは、テキストの最初の行のインデントを指定します。

p {
    text-indent: 20px;
  }

通常はtext-indent: 0;です。

text-indent: 20px;を設定すると、こう表示されます。

インデントは、ピクセル (px)、ポイント (pt)、エム (em)、パーセント (%) などで指定できます。

text-shadow

text-shadow プロパティは、文字に影を付けることができます。

h2 {
    text-shadow: 2px 2px 4px #ccc;
  }

text-shadow: 2px 2px 4px #ccc;を設定したテキストです。

CSSで影の位置、ぼかし、色を指定できます。

影は、オフセット、ぼかし、色などを指定できます。

まとめ

CSSで使えるフォントを装飾するプロパティについて紹介しました。
これらのプロパティを使いこなすことで、より魅力的なウェブサイトを作成することができます。