「ブログ記事の文字の一部を強調させたい」

「HTMLのテキストを斜めや太字で表現したい」

と思うことはありませんか？

そこで今回は、HTMLのテキストを太字や斜体にする方法を解説します。

今回の記事を読んでわかる内容は以下の通りです。

テキストを斜体にするのは「そんなに使う機会がない」と思う方も多いでしょう。

しかし、意外と様々な場面で活用できるので覚えておくのがおすすめです。

HTMLだけでテキストを太字や斜体にする方法も紹介しますので、ぜひ最後まで見てくださいね。

どんな時にHTMLのテキストを斜体や太字にするのか

HTMLのp要素で囲われたテキストは、Webサイトでよく見かける長文や説明文などで用いられます。

h1～h6などの見出し要素は、文字通り「タイトル」や「見出し」として使用されるので、p要素内で使用されることはありません。

しかし、ある特定のテキストを強調したい時などには、p要素でも目立つ装飾をしたいでしょう。

そんな時に便利なのが特定のテキストを「斜体」や「太字」にする機能です。

では、それぞれが具体的にどのような場面で活用できるか紹介していきます。

HTMLテキストを斜体にする場面

斜体とは、その名の通り「斜め」になっている状態で、主に以下のような場面で使用されています。

最も良く見かけるのが「引用文」で使用されている斜体テキストです。

引用した内容は、どこのサイトや本からどの部分を引用したのかを明らかにしなければなりません。

そのため、通常の文章と違うことをわかりやすくするために良く利用されているという訳です。

また、Webサイトのデザインに合わせてテキストを斜体にしている場合もあります。

ただし、使いすぎてしまうと見づらい文章になってしまうので注意しましょう。

HTMLテキストを太字にする場面

伝えたい内容が的確に伝わりやすくなる効果がある「太字」は、主に以下のような場面で使用されています。

インパクトが大きいので、単に「目立たせたい」という目的ではなく、「重要」な読んでほしいテキストに使用するのがおすすめです。

タイトルや見出しにはh1～h6を使用しますが、デフォルトで「太字」の指定がされていますので、個別でテキストを太字に設定する必要はありません。

ただし、使いすぎるとどれが重要な内容なのかわからなくなってしまうため、必要なテキストにのみ太字指定しましょう。

HTMLのテキストを斜体や太字にする方法

どのような場面でHTMLのテキストを斜体や太字にするのか理解できたところで、実際にどのように設定するのか見ていきましょう！

テキストを斜体や太字にするには、HTMLのspna要素などでテキストを囲い、CSSでスタイリングするのが一般的です。

しかし、特定の要素を使用すればHTMLだけでもテキストを斜体や太字にすることが可能なので、CSSを使う方法と合わせて2つの方法を解説します。

HTMLだけでテキストを斜体・太字にする

テキストを斜体にするには、以下のように「i要素」を使用します。

<!-- HTMLコード -->
<p>テキストをHTMLだけで<i>Italic（斜体）</i>にします。</p>

/* CSSコード */
body {
font-family: YuGothic,'Yu Gothic',YuGothic,'Yu Gothic',sans-serif;
}

i要素はテキストを斜体にするためだけのもので、テキストを意味づけする役割は持っていません。

現在は、見た目の装飾に関わる記述はCSSで行うことが推奨されていますが、i要素は非推奨という訳ではないので使用することは可能です。

ただし、Windows でフォントにメイリオを使用している場合や、日本語文字は斜体で表示されないことがあるので注意しましょう。

また、テキストを太字にするには、以下のように「b要素」を使用します。

<!-- HTMLコード -->
<p>テキストをHTMLだけで<b>bold（太字）</b>にします。</p>

b要素は、印刷される際に太字になるテキストに使用します。

特に意味を持っていないため、他に太字にする手段が存在しない場合のみの最終手段として使用するのがおすすめです。

強調したいテキストに意味を持たせたい場合は、「意味を強調する」という役割を持つem要素、重要性を示したい場合には「strong要素」を使用しましょう。

CSSでテキストを斜体・太字にする

CSSでテキストを斜体にするには、font-styleプロパティでitalicを指定します。

<!-- HTMLコード -->
<p>テキストをCSSで<span>Italic（斜体）</span>にします。</p>

/* CSSコード */
body {
font-family: YuGothic,'Yu Gothic',YuGothic,'Yu Gothic',sans-serif;
}

span {
  font-style: italic;
}

spanは、一つの範囲として定義する際に使用する要素です。

テキストを太字にする場合は、font-weightプロパティにboldを指定します。

<!-- HTMLコード -->
<p>テキストをCSSで<span>bold（太字）</span>にします。</p>

/* CSSコード */
span {
  font-weight: bold;
}

font-weightプロパティは、boldの他に、通常フォントの太さのnormalや700などの数値を指定することができます。

HTMLのテキストを斜体にしたいのに反映されない

HTMLで、i要素やCSSのfont-weightプロパティでitalicを指定しても「なぜかテキストが斜めにならない…」という場合もあるでしょう。

テキストを斜体にする指定が反映されない時の原因と、対策方法についても学んでおきましょう。

主な原因は、以下の通りです。

まずは、スペルを間違えていないかチェックし、問題がなければ原因2・3と確認していきます。

今回ご紹介したi要素とb要素は閉じタグが必ず必要なので、HTMLで斜体や太字を指定している場合は、テキストがタグで囲われているか確認しましょう。

また、日本語のみが斜体にならない場合は、「メイリオフォントを使用している」可能性が高いです。

メイリオフォントはデフォルトで指定されているフォントファミリーのことで、i要素やCSSのitalicが指定できなくなっています。

日本語を斜体にしたい場合は、MSゴシックなどのフォント自体にitalicが用意されていないフォントを指定しましょう。

なお、b要素やfont-weightにboldを指定する太字は、フォントの種類に限らず反映されます。

上記の原因1～3まで確認しても問題がない場合は、斜体や太字の指定を指定した後のCSSで、それらを打ち消す記述をしている可能性があります。

斜体や太字を適切に使ってHTMLの文章を読みやすくしよう

今回は、HTMLやCSSでテキストを斜体や太字にする方法を解説しました。

以下は、この記事のまとめです。

強調させたいテキストをタグで囲むだけで、テキストを斜体や太字にできるiタグやbタグは便利です。

しかし、テキストに意味づけをするマークアップとしては不十分なので、見た目を変えたいだけの場合はCSSでスタイリングしましょう。

斜体テキストや、太字を使いこなして、メリハリのあるWebページやブログページを作成しましょう！

＼プログラミングスクールを比較／