【CSS講座】STEP6: 文字の装飾は「text-decoration」で変更しよう!

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

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

文字の装飾の変え方

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

2. 出てきたウィンドウにあるCSSの「text-decoration」で文字の種類を変えます。

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

   「none」「underline」にしてみましょう。文字にアンダーラインが引かれます。

   以下も試してみてください。

   none	何も指定しない場合
   underline	アンダーライン（下線）を引く
   overline	上線を引く
   line-through	打ち消し線を引く

   ※2つ以上を同時に指定したいときは「半角スペース」で繋いで、「underline overline」のように指定します。

ここで覚えるCSS

※ここでは「font-decoration」ではなく「text-decoration」です。ややこしいですね。

【STEP7】行間を変える

← 前のページ

CSSの基本はこちらです

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