日本語の文章内で斜体を使うケースは少ないんでしょうかね？ あまり読みやすい書体ではないと思いますし。英語圏では、斜体も太字と同様に「強調」を表現したりするらしいですが、日本語ではそうではありませんしね。論文を書くときには、本文中に登場する書名とか論文名とかを斜体で書いたような気がするのですが……。あ、でもそれは英語だけだったかな？
個人的には（ウェブ上では）、引用箇所(blockquote要素など)を斜体にする装飾をよく使っています。

というわけで、今日は「斜体」で装飾する方法について語りたいと思います。

同じ斜体でも、CSSでの指定には「italic」と「oblique」がある

文字を「イタリック体」で表示するには、以下のようなスタイルシートを書きます。

font-style: italic;

上記のように、font-styleプロパティに値「italic」を指定すると、文字は「イタリック体」で表示されます。そして、下記のように値「oblique」を指定すると「斜体」で表示されます。

font-style: oblique;

私はよく「イタリック体」のことを指して「斜体」と言ったりするのですが、斜体とイタリック体は実は別物なんですね……。ただ、日本語文字の場合、斜体とイタリック体の区別はたぶんないので、どっちも同じ書体(斜体)を指しているのではないかと思いますが。

欧文フォントの中には、「イタリック体」と「斜体」用にそれぞれ専用にデザインされたフォントが用意されているものがあるようです。イタリック体は筆記体っぽくデザインされたもので、斜体は単純に斜めに倒しただけのような形です。(※w3cの仕様には「a」と「N」を使った例が画像で紹介されていました。また、Wikipediaのイタリック体項目にも字形項目に分かりやすい比較画像があります。)
日本語には筆記体なんて（一部の縦書き毛筆フォントを除けば）ないので、イタリック体も斜体も同じ（ただ文字を傾けただけの）デザインになるのでしょうね。

というわけで、日本語文字を斜体にしたい場合は、font-styleプロパティに値「italic」を指定しても「oblique」を指定してもたぶん同じです。気にせず、「italic」と書いておけば良いんじゃないでしょうか。その場合、もしイタリック体専用のフォントが用意されているようなフォントであればそれが使われます。

※なお、Windows Vista以降で標準搭載された「メイリオ」というフォントでは、イタリック体専用として「斜体になっていないフォント」を割り当てているので、「メイリオ」で表示している限り、どうやっても斜体にはなりません。(^_^;) そういう特殊なフォントもあります。(後述)

斜体とイタリック体を使ってみる

試しに、斜体とイタリック体を別々に表示させてみましょう。以下のようにスタイルシートを記述します。

span.sample1 {
   font-style: italic; /* イタリック体 */
}
span.sample2 {
   font-style: oblique; /* 斜体 */
}

で、以下のようにHTMLを書きます。

イタリック体にすると、<span class="sample1">こんな感じで表示されます</span>。
斜体にすると、<span class="sample2">こんな感じで表示されます</span>。

これを使って表示してみると、以下のように見えます。(以下のボックス内では表示用フォントに「ＭＳ Ｐゴシック」を指定しています。そのフォントがない環境では別のゴシック系フォントで表示されます。)

一緒ですよね……？
欧文フォントでも試してみましょう。

span.sakura {
   font-family: 'Times New Roman',serif;
   font-style: italic;
}

ここではfont-familyプロパティを使って「Times New Roman」フォントを指定しています。表示させてみた結果は下記の通りです。（上から順に、標準書体・イタリック体・斜体。）

Times New Romanではイタリック体も斜体も同じ表示になるっぽいですね。(^_^;;;
※Times New Romanフォントがない環境では、上記は何か適当なserifに分類されるフォントが使われて表示されています。

CSSの仕様では「italic」と「oblique」の違いはどう説明されているのかというと……

CSS3のFont Moduleに書かれているfont-styleプロパティの説明を読むと、だいたい以下のような感じで書かれていました。

• italic：イタリック体として用意されたフォントで表示。なければ斜体として用意されたフォントで表示。
• oblique：斜体として用意されたフォントで表示。なければイタリック体として用意されたフォントで表示。
• イタリック体も斜体も用意されていないフォントの場合は、obliqueでは通常のフォントを斜めに倒す処理をして表示することができる。

上記の記述からすると、「イタリック体」と「斜体」が別々に用意されているフォント以外の場合は、「italic」でも「oblique」でも同じ表示になるようですね。^^;

メイリオで日本語文字を表示させる場合は斜体にならない

先程も少し書きましたが、Windows Vistaから標準搭載されるようになったフォント「メイリオ」は、斜体では表示できません。これは、斜体用フォントが用意されていないのではなく、「斜体用フォントとして、(斜体になっていない)通常の書体が用意されている」ためです。なので、表示フォントとして「メイリオ」が採用されている場合は、font-styleプロパティにitalicを指定しようがobliqueを指定しようが、通常の書体(斜体ではない書体)で表示されます。

もし「メイリオ」フォントを表示できる環境でこのページを閲覧している場合は、上記のボックス内はメイリオで表示されています。(※本稿執筆時点では、このページの本文自体にも「メイリオ」が指定されているのですが。)
上記では「italic」や「oblique」という英字部分は斜体になっていますが、それ以外の日本語文字は斜体にはなっていないことが分かります。

ちなみに、Windows10にも「メイリオ」は搭載されていますが、システムフォントではなくなりました。Windows10のシステムフォント「游ゴシック」を使って表示させた例は、下記の通りです。

もし「游ゴシック」フォントを表示できる環境でこのページを閲覧している場合は、上記のボックス内は「游ゴシック」で表示されています。「游ゴシック」の場合は、文字を傾けた斜体が用意されているようですね。

イタリック体(italic)と斜体(oblique)は確かに違うのだけども……

というわけで、結論は、

• イタリック体(italic)と斜体(oblique)では、定義は異なる。
• しかし、イタリック体と斜体が別々に用意されているフォントでない限りは、どちらを指定しても同じ書体で表示される。
• （イタリック体も斜体も用意されていないフォントの場合は、標準(ノーマル)のフォントをブラウザが傾けて表示する。）

ということですね。

とりあえず文字を「斜体」に見せたいならfont-styleプロパティを使えば良くて、日本語では「イタリック体」も「斜体」も一緒でしょうからfont-styleプロパティの値としては「italic」（イタリック）のスペルさえ覚えておけばそれでいいんじゃないでしょうかね？(^_^;)

(更新日：2016年02月22日)