【HTML】斜体にする方法やならない原因、対処法を解説

公開：2024年9月10日更新：2025年11月7日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

HTMLでウェブページを作成する際、テキストを斜体にして引用文や強調部分を視覚的に区別したい場面があると思います。通常の文章と異なる性質を持つ箇所を示すのに効果的で、斜体はブログ記事や技術文書で頻繁に使用されます。

この記事では、HTMLのiタグとemタグで斜体にする方法、CSSを使った斜体の指定方法、そして斜体にならない時の原因と対処法について具体的に解説します。

HTMLのiタグで斜体にする方法
iタグの基本的な書き方
複数のタグを組み合わせる
HTMLのemタグで斜体にする方法
emタグの基本的な書き方
iタグとemタグの違い
CSSのfont-styleプロパティで斜体にする方法
italicで指定する
obliqueで指定する
HTMLで斜体にならない時の原因と対処法
メイリオフォントが原因の場合
font-familyで別のフォントを指定する

HTMLのiタグで斜体にする方法

iタグは、HTMLでテキストを斜体にするためのタグです。iはイタリック（Italic）の略で、囲まれたテキストをブラウザ上で斜体表示します。分類学上の名称、技術用語、他言語からの慣用句など、通常の文章とは、少し性質が異なる箇所を示す際に使用します。

以下では、「iタグの書き方」と「複数のタグを組み合わせる方法」について解説します。

iタグの基本的な書き方

iタグでテキストを斜体にするには、斜体にしたい部分を<i>と</i>で囲みます。開始タグと終了タグの間に記述したテキストが、ブラウザ上で斜体として表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iタグのサンプル</title>
</head>
<body>
  <p>これは通常のテキストです。</p>
  <p>これは<i>斜体のテキスト</i>です。</p>
  <p>猫の学名は<i>Felis silvestris catus</i>といいます。</p>
</body>
</html>

上記のコードでは、2つ目のpタグ内で「斜体のテキスト」部分がiタグで囲まれているため、その部分だけが斜体で表示されます。

複数のタグを組み合わせる

iタグは、他のHTMLタグと組み合わせて使用できます。複数のタグを併用する場合は、入れ子構造にして内側のタグから順に閉じる必要があります。外側のタグと内側のタグの閉じる順序を間違えると、ブラウザが正しく解釈できません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タグの組み合わせ</title>
</head>
<body>
  <p><b><i>太字で斜体</i></b>のテキストです。</p>
  <p><i><u>斜体で下線付き</u></i>のテキストです。</p>
  <p><b><i><u>太字で斜体で下線付き</u></i></b>のテキストです。</p>
</body>
</html>

上記のコードでは、bタグで太字、iタグで斜体、uタグで下線を指定しています。1つ目の例では外側がbタグ、内側がiタグとなっており、内側のiタグを先に閉じてから外側のbタグを閉じています。この順序を守ることで、ブラウザは正しく複数の装飾を適用できます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

HTMLのemタグで斜体にする方法

emタグは、テキストに強調を与えるHTMLタグです。emはエンファシス（Emphasis）の略で、文章内で特に強調したい言葉に使用します。見た目はiタグと同じく斜体で表示されますが、emタグは単なる装飾ではなく、強調という意味を持っている点が大きな違いです。

以下では、「emタグの基本的な書き方」と「iタグとの違いに」ついて解説します。

emタグの基本的な書き方

emタグでテキストを強調するには、強調したい部分を<em>と</em>で囲みます。emタグで囲まれた部分は斜体で表示され、同時にそのテキストが意味的に強調されていることをブラウザや検索エンジンに伝えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>emタグのサンプル</title>
</head>
<body>
  <p>この作業は<em>今すぐ</em>実行してください。</p>
  <p>私たちは<em>何か</em>をしなければならなかった。</p>
  <p>これは<em>訓練ではありません</em>。</p>
</body>
</html>

上記のコードでは、文章中で特に強調したい部分にemタグを使用しています。1つ目の例では「今すぐ」という言葉を強調することで、緊急性を表現しています。

iタグとemタグの違い

iタグとemタグの見た目は同じ斜体になりますが、HTMLにおける意味が異なります。iタグは見た目を装飾する目的で使用され、emタグは意味を強調する目的で使用されます。この違いはスクリーンリーダーなど、支援技術や検索エンジンがページを解釈する際に重要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iタグとemタグの違い</title>
</head>
<body>
  <p>船の名前は<i>Queen Mary</i>です。</p>
  <p><em>すぐに</em>やってください！</p>
  
  <p>HTML5では、以前<i>ブロックレベル</i>と呼ばれていたものが、現在は<em>フロー</em>コンテンツと呼ばれています。</p>
</body>
</html>

上記のコードでは、船名のような固有名詞や専門用語にはiタグを使用し、文章内で意味的に強調したい言葉にはemタグを使用しています。3つ目の例では、対比を表現するためにiタグとemタグを使い分けており、「ブロックレベル」は単なる用語の参照、「フロー」は現在の正式な用語として強調しています。

CSSのfont-styleプロパティで斜体にする方法

CSSのfont-styleプロパティは、テキストのスタイルを制御するプロパティです。プロパティとは、要素のスタイルを定義するための設定項目のことで、font-styleプロパティを使用することいよって、HTMLタグを使わず任意の要素を斜体にできます。

以下では、italicとobliqueの2つの値を使った斜体の指定方法を解説します。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

italicで指定する

font-styleプロパティにitalicを指定すると、テキストが斜体で表示されます。italicは、フォントファミリーに用意されているイタリック体を使用するため、手書き風の筆記体のようなデザインになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSでitalicを指定</title>
  <style>
    body {
      font-family: 'Times New Roman', Times, serif;
    }
    .italic-text {
      font-style: italic;
    }
  </style>
</head>
<body>
  <p>これは通常のテキストです。</p>
  <p class="italic-text">Italic display with CSS</p>
  <p>CSSで<span class="italic-text">一部だけ斜体</span>にできます。</p>
</body>
</html>

上記のコードでは、italic-textクラスにfont-styleプロパティでitalicを指定しています。このクラスを適用した要素は斜体で表示され、フォントファミリーに定義されたイタリック体のデザインが適用されます。pタグ全体への適用、spanタグで一部のテキストにだけ適用、なども可能です。

obliqueで指定する

font-styleプロパティにobliqueを指定すると、テキストが傾斜して表示されます。obliqueは通常のフォントを単純に傾けた形になるため、italicのような筆記体のデザインにはなりません。フォントファミリーにイタリック体が用意されていない場合、ブラウザは自動的にobliqueと同じ表示を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSでobliqueを指定</title>
  <style>
    body {
      font-family: 'Times New Roman', Times, serif;
    }
    .italic-text {
      font-style: italic;
    }
    .oblique-text {
      font-style: oblique;
    }
  </style>
</head>
<body>
  <p class="italic-text">Italic display with CSS</p>
  <p class="oblique-text">Oblique display with CSS</p>
</body>
</html>

上記のコードでは、italicとobliqueの違いを比較しています。Times New Romanのような欧文フォントでは、italicは筆記体のようなデザインになり、obliqueは単純に傾斜した形になります。日本語フォントの場合、この違いはほとんど見られないため、一般的にはitalicを使用することが推奨されます。

HTMLで斜体にならない時の原因と対処法

HTMLのiタグやCSSのfont-styleプロパティを使用しても、ブラウザ上でテキストが斜体にならない場合があります。特に日本語テキストが斜体にならないケースが多く、これは使用しているフォントファミリーに起因することがほとんどです。

以下では、「メイリオフォントが原因で斜体にならない場合」と「font-familyで別のフォントを指定する対処法」について解説します。

メイリオフォントが原因の場合

Windowsのデフォルトとして使用される「メイリオフォント」や「Meiryo UI」は、日本語の斜体表示に対応していません。日本語には元々斜体を使う習慣がなかったため、日本語フォントに斜体が用意されていないことが原因です。英字であれば斜体になりますが、日本語テキストは斜体にならずに通常の表示のままになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>メイリオフォントでの表示</title>
  <style>
    body {
      font-family: 'Meiryo', sans-serif;
    }
    .italic-text {
      font-style: italic;
    }
  </style>
</head>
<body>
  <p class="italic-text">この日本語テキストは斜体になりません</p>
  <p class="italic-text">This English text will be italic</p>
</body>
</html>

上記のコードでは、font-familyにメイリオを指定しているため、font-styleでitalicを指定しても日本語部分は斜体になりません。一方、英字部分は斜体で表示されます。この挙動を確認するには、ブラウザでページを開いて実際の表示を確認することが重要です。

font-familyで別のフォントを指定する

日本語テキストを斜体にしたい場合は、font-familyプロパティで日本語の斜体に対応しているフォントを指定する必要があります。「MS Pゴシック」や「ゴシック体」などのフォントは、日本語の斜体表示に対応しているため、これらのフォントを指定することによって、日本語テキストも斜体で表示できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォントを変更して斜体に</title>
  <style>
    body {
      font-family: 'MS PGothic', 'MS Pゴシック', sans-serif;
    }
    .italic-text {
      font-style: italic;
    }
  </style>
</head>
<body>
  <p class="italic-text">この日本語テキストは斜体になります</p>
  <p class="italic-text">This English text will also be italic</p>
</body>
</html>

上記のコードでは、font-familyにMS Pゴシックを指定している為、日本語テキストも斜体で表示されるようになります。複数のフォント名をカンマ区切りで指定しておくことで、最初のフォントが利用できない環境でも、次のフォントが適用されるフォールバック機能が働きます。ただし、メイリオフォントに比べて、表示が粗く見える場合があるため、デザインとのバランスを考慮して選択することが重要です。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。