【CSS講座】STEP5: 文字の間隔は「letter-spacing」で変更しよう!

ではCSSを使って、文字の間隔を変更する方法を紹介します。

こちらの例文を見てください。

文字の間隔の変え方

1. いつものように、上の文字にある「ハンバーグが好き」の上でメニュー「検証」を選択します。

2. 出てきたウィンドウにあるCSSの「letter-spacing」で文字の間隔を変えます。

   
   .ex span {
   font-size: 20px;
   color: ■red;
   font-weight: bold;
   font-family: "ＭＳ ゴシック",sans-serif;
   letter-spacing: normal;
   }
   

   上にある「normal」「0.1em（もしくは『.1em』でもOK）」に直してみてください。

   ※数値の単位「 em 」は文字1つ分の大きさです。ここを「1em」にすると文字1つ分の間隔が空きます。

ここで覚えるCSS

単位は「em（1文字ぶんの大きさ）」や「px」を使ってくださいね。

※ 今までは「font-size」のように「font」が付いていたのが、ここだけ「letter」です。間違いやすいのでご注意を!

【STEP6】文字の装飾を変える

← 前のページ

CSSの基本はこちらです

CSSの基本についてはこちらの記事にまとめています。