Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

font-style

フォント(文字)のスタイルを変更できます。設定できる値は『normal』(標準)、『italic』(イタリック体)、『oblique』(斜体)の3つです。

サンプルコード

style.css

/* 標準（初期値） */
p.test { font-style: normal;}

/* イタリック体（フォントにイタリック体が用意されている場合） */
p.test1 { font-style: italic;}

/* 擬似イタリック（フォントを斜めにレンダリング） */
p.test2 { font-style: oblique;}

/* 引用文を斜体で表示する実践的な使い方 */
blockquote { font-style: italic; color: #666;}

/* 強調した箇所を斜体に戻す */
em { font-style: normal; font-weight: bold;}

指定可能な値一覧

値	概要
normal	標準のフォントで表示します。これが初期値です。
italic	フォントをイタリック体で表示します。
oblique	フォントを斜体で表示します。

ブラウザでの表示結果

<p style="font-style: normal;">ここはp要素です。『font-style: normal』と指定しています。</p>

<p style="font-style: italic;">ここはp要素です。『font-style: italic』と指定しています。</p>

<p style="font-style: oblique;">ここはp要素です。『font-style: oblique』と指定しています。</p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7 以降 ○

6 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

フォント(文字)のスタイルを変更できます。

表示しているフォントに『イタリック体』、『斜体』が用意されていない場合、ほとんどのブラウザで文字を傾けて表示してくれます。

『斜体』は単純に文字を傾けたようなデザインで、『イタリック体』は文字を傾けつつ筆記体をあしらったようなデザインとなっていることが多いです。

日本語フォントには『イタリック体』、『斜体』が用意されていない場合が多く、CSSで『italic』、『oblique』と指定した場合、どちらも少し文字を傾けたような同じフォントデザインで表示されます。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ