文字のスタイル その2
文字のCSSその2ではHTMLで習った装飾（そうしょく）斜め文字や太字等を見ていきます。
文字を太字にする
CSSで文字を太字にするには font-weightのプロパティを使い、値にboldを記入します。
ではclassを使って文字を太字にしてみましょう。
<head>
<style type="text/css">
<!--
.font{
font-weight:bold;
}
-->
</style>
<head>
<body>
<div class="font">文字を太字にする。</div>
</body>
</html>
見出しの<h1>〜<h6>や<strong>を使うとデフォルト（初期の状態）で太字になります。font-weightを使えば これらの太字を通常の太さにするこも出来ます。
<head>
<style type="text/css">
<!--
.font{
font-weight:normal;
}
-->
</style>
<head>
<body>
<strong>strongタグの場合。</strong><br>
<strong class="font">文字を通常にする。</strong>
</body>
</html>
文字を通常にする。
クラス（クラス名は font ）を使って文字を太字にしてみましょう。
CSS
.font{font-weight:bold;
}
HTML
<div class="font">文字を太字にしてみる。</div>文字をイタリック（斜体）にする
これもHTML講座で出てきた一つです、今回はCSSを使って文字をイタリックにします。 イタリックにするにはfont-styleのプロパティを使い、 値にitalicを記入します。
ではclassを使って文字をイタリックにしてみましょう。
<head>
<style type="text/css">
<!--
.font{
font-style:italic;
}
-->
</style>
<head>
<body>
<div class="font">文字を斜体にする。</div>
</body>
</html>
<em>タグでデフォルト（初期状態）でイタリック表示になります。font-styleを使えば これらのイタリック表示を通常にするこも出来ます。
<head>
<style type="text/css">
<!--
.font{
font-style:normal;
}
-->
</style>
<head>
<body>
<em>emタグで斜体になる。</em>
<em class="font">文字を通常にする。</em>
</body>
</html>
文字を通常にする。
クラス（クラス名は font ）を使ってイタリック表示にしてみましょう。
CSS
.font{font-style:italic;
}
HTML
<div class="font">イタリック表示。</div>ライン高の設定
ライン高の設定とは、CSSを使って行と行の間隔を狭くしたり広くしたりするする事で、 line-heightのプロパティを使い、値はnormal（ブラウザの規定値） 、px、em、%で記入します。 間隔が狭くて読みづらい時やデザイン面等で使うCSSです。
- px
- 間隔をピクセルで指定します。文字のサイズより小さい指定では文字同士が重なります。
20pxで指定
- em
- 間隔を倍数で指定します。1emより小さい指定では文字同士が重なります。
5emで指定
- %
- 間隔をパーセントで指定します。
100%で指定
<head>
<style type="text/css">
<!--
.font{
line-height:3em;
}
-->
</style>
<head>
<body>
<div class="font">ライン高を<br>設定する。</div>
</body>
</html>
設定する。
クラス（クラス名は font ）を使ってライン高を25pxにしてみましょう。
CSS
.font{line-height:25px;
}
HTML
<div class="font">ライン高を<br>25pxで指定。</div>文字の飾り
指定した文字に対して、上線、下線、取り消し線をつけるCSSです。 text-decorationのプロパティを使い、値はoverline（上線） 、underline（下線）、line-though（取り消し線）、none（飾りなし）で記入します。
- overline
- テキストの上に線を引きます。
文字の飾り
- underline
- テキストの下に線を引きます。
文字の飾り
- line-through
- テキストに打ち消し線を引きます。
文字の飾り
- none
- 飾り無し。
文字の飾り
<head>
<style type="text/css">
<!--
.font{
text-decoration:underline;
}
-->
</style>
<head>
<body>
<div class="font">下線を引く。</div>
</body>
</html>
クラス（クラス名は font ）を使って打ち消し線を引いてみましょう。
CSS
.font{text-decoration:line-through;
}
HTML
<div class="font">打ち消し線を引く。</div><a>タグでリンクされたテキストはデフォルトで下線が付きますがtext-decoration:none; を使えば下線を消すことができます。
<head>
<style type="text/css">
<!--
.font{
text-decoration:none;
}
-->
</style>
<head>
<body>
<a href="url">リンクされたテキスト。</a><br>
<a href="url" class="font">リンクされたテキスト。</a>
</body>
</html>