[初めてのwebサイト作成]

🌹レッスン10🌹

CSSでよく使用する文字装飾の方法

1.文字を太くする

文字の太さを指定するには、font-weightプロパティを使用します。

値には、

数値の場合(400を標準として、100~900の間で指定します。)

・normalの場合(通常の太さ数値400と同じ)

・boldの場合 (太くする数値700と同じ)

・bolderの場合(一回りより太くする)

・lighterの場合(一回り細くする)

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

 font-weight:bold; と指定しています。

例えば、

【CSS】


  h2{
	font-weight: bold;
	}

2.文字を斜体にする

文字を斜体にするには、font-styleプロパティを使用します。

値には、

・italic(文字を斜体にする)

・oblique(文字を斜体にする)

・nomal(文字を通常の状態にする)

例えば、

【CSS】


  h2{
	font-style: italic;
	}

3.取り消し線、下線、上線

取り消し線、下線、上線などの指定は、text-decorationプロパティを使用します。

値には、

・line-through(取り消し線を付ける)変更になって修正する場合などによく使われます。

・underline(下線を付ける)下線はリンクと間違われることがあるので、私は使用していません。

・overline(上線を付ける)上線はどんな場合に使うのかわかりません。

例えば、

【HTML】


<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>

【CSS】


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




4.文字を点滅させる

blink(点滅させる インターネットエクスプローラーは非対応)

【HTML】


<body>

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

</body>

【CSS】


 p#text4{
	 text-decoration: blink;
	 }

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


5.リンクの下線表示を消す

none(通常で表示または、リンク部分の下線を消す)

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

【HTML】


<body>

	

<p>リンク部分の下線を消します</p>

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

【CSS】


   a{
	text-decoration: none;
	}


6.1部分の文字を指定する

<span>xxxx</span>で囲み、テキストの1部分だけ指定することが出来ます。

【HTML】


<body>

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

【CSS】


 span#red{
	  color: red;
  }

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

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


★まとめ

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

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

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

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

Ads by Google

TOP