happy cat image

tomodevel

皆んなのウェブ入門, ともでぃべる

テキストを飾る font-style属性

テキストにイタリック効果をiタグなしでCSSで適用できます。
これを可能にしてくれるCSSの属性は font-styleです。

セレクター{font-style:バリュー}

イタリック効果を表現するに使うバリューはitalicです。

セレクター{font-style:italic}

では、使って見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::tomodevel - テキストを飾って見よう。</title>
<style>
p{font-style:italic}
</style>
</head>
<body>
    <p>Welcome to Beanscent</p>
</body>
</html>

font-style属性に使えるバリューは五つあります。

バリュー 意味
inherit パレントタグに適用されてるfont-styleのバリューを指定する。
initial バリューを初期化する。
italic イタリック効果を適用する。
normal 基本バリュー(normal)効果を適用する。
oblique オブリク効果を適用する。

パレントタグについて調べましょう。
パレントという意味はparent(両親)の意味なんですけど、タグの上にあるタグを意味します。
次の例ではdivタグがpタグのパレントです。

<div class="parentTag">
    parent
    <p class="childTag">child</p>
</div>

では、パレントタグにitalicを適用して、チャイルドタグタグにinheritを適用して見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::tomodevel - テキストを飾って見よう。</title>
<style>
.parentTag{font-style:italic}
.childTag{font-style:inherit}
</style>
</head>
<body>
    <div class="parentTag">
        parent
        <p class="childTag">child</p>
    </div>
</body>
</html>

上のコードの結界を見るとチャイルドタグにイタリック効果は適用されたことがわかります。

今度は上のコードでパレントタグのfont-style属性のバリューをnormalにして見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::tomodevel - テキストを飾って見よう。</title>
<style>
.parentTag{font-style:normal}
.childTag{font-style:inherit}
</style>
</head>
<body>
    <div class="parentTag">
        parent
        <p class="childTag">child</p>
    </div>
</body>
</html>

こうinheritはパレントタグのバリューを指定します。

講座に戻り