文字装飾の基本

CSSを用いて文字サイズや色の変更などを行うプロパティを紹介します。今回紹介するプロパティ以外にも文字を装飾するプロパティは存在するので、文字装飾に関する頻出プロパティを7つ抜粋しました。

文字装飾を行うCSSプロパティ

<h1>タイトル</h1>
<div>
  <p class="content">本文</p>
  <p id="summary">まとめ</p>
</div>

サイズ変更

文字のサイズは、font-sizeプロパティで指定します。

.content {
  font-size:5px;
}

ブラウザ表示

色変更

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

.content {
  color:red;
}

ブラウザ表示

太さ変更

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

.content {
  font-weight:bold;
}

ブラウザ表示

下線の追加

下線の追加はtext-decorationプロパティで指定します。

.content {
  text-decoration:underline;
}

ブラウザ表示

文字の間隔変更

文字の間隔変更にはletter-spacingプロパティを指定します。

.content {
  letter-spacing:0.5em;
}

ブラウザ表示

文字を囲む線を追加

文字を囲む線の追加にはborderプロパティを指定します。

.content {
  border:solid 1px black;
}

ブラウザ表示

文字に影の追加

文字に影の追加にはtext-shadowプロパティを指定します。

.content {
  text-shadow: 1px 1px 2px red;
}

ブラウザ表示

エンジニアからのアドバイス

使い方が少しでも分からないプロパティがあれば必ず調べて使い方が分かるまで詳細を確認しましょう。今回はあえて参考リンクを載せておりません。調べて自己解決・自己理解できる練習をしてみてください。