ヨスのCSS講座

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

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

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

わたしはハンバーグが好きです。

文字の間隔の変え方

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

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

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

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

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

ここで覚えるCSS

letter-spacing : ここにコードを入れる ;

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

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

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

← 前のページ

CSSの基本はこちらです

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