font-styleとは?

CSSのfont-styleプロパティを使用することで、文字列を斜体の形式にしたり通常体に戻したりすることができます。
文字の表示を変えて目立たせたい場合などに使用できます。

font-styleを使ってみる

まずは基本となる通常体です。normalを使ってこのように記述します。

.SampleText1 {font-style:normal;}

これを実際にHTMLコードを書いてブラウザで表示してみます。

【HTML】

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class="sample1">NMB48 吉田朱里</p>
<p class="sample1">HKT48 矢吹奈子</p>
<p class="sample1">AKB48 渡辺麻友</p>
</body>
</html>

【ブラウザ表示例】

NMB48 吉田朱里


HKT48 矢吹奈子


AKB48 渡辺麻友

⬆︎font-styleの値をnormalにすると通常体で表示されます。デフォルトではこの値に設定されていますので、指定しなくても表示は同じです。

イタリック体（italic）で表示していきます

テキストを斜体で表示するには、「italic」あるいは「oblique」を使用します。
先ほどのnormalの部分を書き変えてみましょう。
「italic」、「oblique」はどちらも「斜体」という意味です。

.SampleText2 {font-style:italic;}

.SampleText3 {font-style:oblique;}

【ブラウザ表示例】

NMB48 吉田朱里


HKT48 矢吹奈子


AKB48 渡辺麻友

⬆︎ブラウザで表示すると、文字列が斜体になって表示されます。
(italicとobliqueはほとんどの日本語フォントで同一になっており、ブラウザでの表示も同じになります)

親要素の値「inherit」継承する

最後に、応用として親要素の値を継承する方法を紹介します。
「inherit」という値は、通常では継承しない親要素のプロパティでも強制的に継承させる事ができます。

CSSは、要素でitalicに設定しています。
ここで1行目にあたるp.sample1にはinherit、そして2行目の文字列p.sample2にはnormalの値を入力しましょう。

body {font-style:italic; }
p.sample1 {font-style:inherit; }
p.sample2 {font-style:normal; }

【ブラウザ表示例】

NMB48 吉田朱里


HKT48 矢吹奈子

⬆︎ブラウザで表示させると、画面親要素のitalicをinheritで継承した1行目はイタリック体、normal値を入力した2行目は通常体で表示されました。

最後に・・・

このようにfont-styleを使うことで文字の形を変えて見やすくすることができます、CSSでレイアウトもいろいろ変えられるので是非つかってみてください。
そしてテキストはウェブを制作する上で必ず使うのでfont-styleはよく使用します。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, , ,