ＣＳＳでよく使用する文字装飾の方法 [初めてのｗｅｂサイト作成レッスン10]Private Fantastic

🌹レッスン10🌹

文字の太さを指定するには、ｆｏｎｔ－ｗｅｉｇｈｔプロパティを使用します。

値には、

数値の場合（400を標準として、100～900の間で指定します。）

と、ありますが実際にはすべてのブラウザが100～900の太さを解釈できるわけではないので、私の場合は、太くしたい時だけ

　ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；　と指定しています。

例えば、

h2{
font-weight: bold;
}

文字を斜体にするには、ｆｏｎｔ－ｓｔｙｌｅプロパティを使用します。

値には、

例えば、

h2{
font-style: italic;
}

取り消し線、下線、上線などの指定は、ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎプロパティを使用します。

値には、

例えば、

<html>
<body>

<p id="text1">3-1.取り消し線abc</p>
<p id="text2">3-2.下線abc</p>
<p id="text3">3-3.上線abc</p>

</body>
</html>

p#text1{
text-decoration: line-through;
	}
p#text2{
text-decoration: underline;
	}
p#text3{
text-decoration: overline;
	}

ｂｌｉｎｋ（点滅させる　インターネットエクスプローラーは非対応）

<body>

<p id="text4">文字を点滅。</p>

</body>

p#text4{　
　text-decoration: blink;
　}

（残念ながら私の使用しているブラウザは非対応のようです。）

ｎｏｎｅ（通常で表示または、リンク部分の下線を消す）

”ｘｘｘ”の部分にリンク先の情報を入力します。

例えばこのページでいうと、目次にはついているが、メニュー項目にはついていません。

<body>

<a href="xxx">リンク部分の下線を消します</a>

</body>

a{
text-decoration: none;
}

＜ｓｐａｎ＞ｘｘｘｘ＜/ｓｐａｎ＞で囲み、テキストの１部分だけ指定することが出来ます。

<body>

<p>イチゴは<span id="red" >赤い</span></p>

</body>

span#red{
color: red;
　	}

データを保存し、ブラウザで確認してみましょう！

上記の画像のようになったかな？

私個人的には、3と4以外はよく使用します。

いかがでしたか？CSSで文字を装飾すると文章が読みやすくなったり、見栄えが良くなったりしますよね～

次回レッスン11は、「行揃えと背景色を指定する方法」をアップロードする予定です！

See you again Take care
(^.^/)))~~~bye!!

TOP