JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLでテキストをイタリック（斜体）に表示する方法【iタグ・emタグ・CSS】

HTMLでテキストをイタリック（斜体）にするには、<i>〜</i> タグまたは <em>〜</em> タグを使用します。どちらのタグも同じように斜体で表示されますが、役割の面では違いがあります。<i> タグは単に見た目を斜体にするためのタグである一方、<em> タグは「強調（emphasis）」を意味するフレーズタグであり、テキストが強調されていることをブラウザやスクリーンリーダーに伝えます。

また、HTMLだけでなく、CSSの font-style プロパティを使っても同じ結果を得ることができます。デザインや意味づけの目的に応じて、適切な方法を選びましょう。

タグを使ったイタリック表示の例

以下のコードを実行すると、<em>〜</em> タグを使ってテキストをイタリックに表示できます。実際に動作を確認してみてください。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML italic text</title>
    </head>

    <body>
        <h1>Products</h1>
        <p>
            Our products: <em>Online HTML Editor</em> and <em>Online Image Editor</em>.
        </p>
    </body>
</html>

CSSのfont-styleプロパティを使った例

次に、CSSの font-style プロパティを使ってテキストをイタリックにする方法です。インラインスタイルとして指定していますが、外部スタイルシートでも同様に設定できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML italic text</title>
    </head>

    <body>
        <h1>Our Products</h1>
        <p style="font-style: italic;">Learning website</p>
    </body>
</html>

iタグとemタグの使い分けのポイント

見た目だけ斜体にしたい場合は <i> タグ、テキストに意味的な強調を持たせたい場合は <em> タグを使うのがHTMLのベストプラクティスとされています。SEOやアクセシビリティの観点からも、文脈に合ったタグを選択することが重要です。

  1. HTMLで挿入されたテキストをマークする方法｜insタグの使い方を解説

    HTMLで挿入されたテキストをマークするには、<ins>〜</ins>タグを使用します。このタグは、同じドキュメントの複数バージョン間の差分を確認・表示する際に非常に重要な役割を果たします。また、ドキュメントに新しく追加されたテキストの範囲を明示したい場合にも活用できます。ブラウザ上では、<ins>タグで囲まれたテキストは通常下線付きで表示され、「ここに文字が追加された」ことが視覚的にひと目でわかるようになります。基本的な使い方以下のコードを実行すると、HTMLで挿入されたテキストをマークする方法を実際に確認できます。<!DOCTYPE html>

  2. HTMLで取り消し線（打ち消し線）テキストを表示する方法【CSSでの実装手順を解説】

    HTMLで取り消し線（打ち消し線）のついたテキストを表示したい場合、かつては<strike>〜</strike>タグが使われていました。このタグは文字通り、テキストに取り消し線を引いて表示します。しかし、<strike>タグはHTML5では廃止（非推奨）されており、現在のWeb制作では使用すべきではありません。代わりに、CSSのtext-decorationプロパティを使うのが標準的な方法です。CSSのtext-decorationプロパティを使う方法CSSで取り消し線を実現するには、text-decoration: line-through;というスタイル