【初心者必見】HTMLで斜体や太字にする方法

ブログや記事を作成したはいいものの、

このように悩んだことはありませんか？そのような時は斜体や太字にすると、主張しすぎずに単語を目立たせることができます。今回は、簡単にHTMLで文章を斜体や太字にする方法をわかりやすく説明していきます。

ブログやプログラミングを始めた方や、HTMLについてよくわからない方も、参考にしてみてくださいね。

斜体や太字にするとどのような効果があるのか

まずは、斜体というものは何でしょうか？それは、右に傾いた斜めの文字装飾の事です。

太字はそのまま、文字を太くする文字装飾です。斜体や太字にするとどのような効果があるのでしょうか？

文字が多い記事は読み流すことが多くなってしまいます。文字の色を変えることでも強調されますが、ちかちかして目が疲れることもよくありますよね。

そんな時に、強調したい単語などを斜体や太字にすると目に留まり、読んでもらいやすくなります。

HTMLの基本的な書き方

初めに、タグを書く時はまず＜＞を書きます。次に効果を表す要素名を入れて＜要素名＞を作ります。

それをコピー&ペーストして＜ 要素名＞＜要素名＞と、2つ並べます。（こちらでは見やすいように全角で書いていますが、タグは基本的に半角記号を使ってください。）

それから、2つ目の＜＞の要素名の前に/を書き、＜要素名＞＜/要素名＞という形にします。＜要素名＞を開始タグ、＜/要素名＞を終了タグといいます。

これが基本的なHTMLの書き方です。

HTMLで斜体文字にするタグ

文字を斜めにする斜体タグになります。斜めにしたい文章や単語を＜i＞タグで囲みます。

声だったり心情など、他と区別したい文章を表す際に使用することが多いです。 分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前などです。

＜i＞はイタリック体（手書きの筆記体で欧文の筆記体は文字が傾いていることが多い）のことです。

一般的なブラウザでは斜体に表示され全く同じですが、意味が違う＜em＞タグです。
文章の中で意味を強調したい時(アクセント)などに使います。

HTMLで太字にするタグ

文字を太字にするタグです。太字にしたい文章や単語を＜b＞タグで囲みます。

さらに、論理的により強く強調したい時は＜strong＞を使用します。

HTMLでの斜体・太字タグの使い方

参考までに、CSS(スタイルシート)の斜体の使い方

このように↓表示されます。
斜体です

太字と斜体を組み合わせる方法

複数のタグを組み合わせて使うこともできます。

<外側のタグ><内側のタグ>～</内側のタグ></外側のタグ>の順番で記入します。

例えば太字で斜体にしたい場合の、bタグとiタグを使っての書き方はこうなります。

この場合はこのように↓表示されます。
太字で斜体です

気をつけなければいけないのは、入れ子のようにして内側のタグから順番に閉じるように書くことです。

＜外側のタグ＞
＜内側のタグ＞
文字
＜/内側のタグ＞
＜/外側のタグ＞

このように内側のタグから閉じていきます。<外側のタグ><内側のタグ>～</外側のタグ></内側のタグ>にすると、思ったように表示されませんので注意してください。

HTMLで斜体にできないとき

＜i＞タグは多くのブラウザで斜体で表示されます。
しかし、メイリオ、Meiryo UIは日本語は斜体になりません。日本語には元々斜体を使う習慣がなかったため、日本語の斜体は用意されていないのです。英字であれば斜体になります。
ですので、フォントによっては反映されていないように表示されます。見た目を変えたい場合は次の対応をしてみましょう。

別のフォントにする場合はこのように指定します。例えばMS　P　ゴシックにしたい時は、

というCSSになります。

＜i＞タグと＜em＞タグの違い

どちらも斜体になりますが、ただ文字を斜めにしたい時は＜i＞タグ。ニュアンスを変更するときは＜em＞タグ。

＜ｂ＞タグと＜strong＞タグの違い

見た目はどちらも太字になり違いはありませんが、実はGoogleやYahoo!などの検索エンジンで太字部分の検索がヒットされやすくなる、というSEO対策上の違いがあります。

重要な単語を使うときは＜strong＞を使うようにしましょう。ただ、使い過ぎるとペナルティーを受ける場合もありますので、適度に使用してくださいね。

デザインを考えて見た目を太字にしたい場合は＜ｂ＞タグ、意味を強調したい時は＜strong＞タグを使います。

ちなみに、＜strong＞タグと＜em＞タグはどちらも強調ですが、＜strong＞の方が強い協調とされています。

関連するHTMLタグ

その他に文字を装飾するタグです。

まとめ

いかがでしたか？

今回はHTMLで斜体や太字にすることを説明しました。文字を装飾したい時は、基本的にタグで囲むだけです。

はじめは難しいと感じることもありますが、使って慣れていくと簡単に使えるようになります。ぜひ参考にしてみてくださいね。