HTMLで文字を太字・イタリック表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで文字を太字・イタリック表示する方法について解説しています。文字を太字にする場合はbタグ、イタリックにする場合はiタグを使用します。それぞれの書き方と画面上での見え方を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLで文字を太字・イタリック表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

今回紹介する手法は、HTMLで文字の一部を強調したい場合などにとても便利な方法なので是非参考にしてみてください。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

文字を太字・イタリック表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

太字にする方法

まずは、HTMLで文字を太字にする方法について紹介します。文字を太字にする場合は<b>タグを使用します。具体的には<b>文字</b>というように使用します。タグで囲んだ部分の文字が太字になります。

文章内の大事な単語などを太字にすると良いでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

イタリックにする方法

次に、HTMLで文字をイタリックにする方法について紹介します。文字をイタリックにする場合は<i>タグを使用します。こちらも、太字の場合と同様に<i>文字</i>と、イタリックにしたい文字をタグで囲みます。

タグは複数組み合わせて使用することもできるため、この2つのタグを組み合わせて、<b><i>文字</i></b>とすれば、指定の文字を太字でイタリックにすることもできます。

 

文字を太字・イタリック表示してみよう

HTMLで文字を太字・イタリック表示する方法についてサンプルコードを参考に実際にコードを書いてみましょう。

サンプルコード

<html>

  <head>
    HTMLで文字を太字・イタリック表示する方法
  </head>

  <body>

    ますは通常の文字を表示します。<br>
    サンプルテキストSampleText
    <br>

    文字を<b>太字</b>にしてみましょう。<br>
    <b>サンプルテキストSampleText</b><br>
    <br>

    それでは文字を<i>イタリック表示</i>にしてみましょう。<br>
    <i>サンプルテキストSampleText</i><br>
    <br>

    それでは文字を<b>太字</b>で<i>イタリック表示</i>にしてみましょう。<br>
    <b><i>サンプルテキストSampleText</i></b>

  </body>
</html>

実行結果

HTMLで文字を太字・イタリック表示する方法 ますは通常の文字を表示します。
サンプルテキストSampleText

文字を太字にしてみましょう。
サンプルテキストSampleText

それでは文字をイタリック表示にしてみましょう。
サンプルテキストSampleText

それでは文字を太字イタリック表示にしてみましょう。
サンプルテキストSampleText

解説

コード14行目では、<b>タグを使用して文字を太字にしています。

コード18行目では、<i>タグを使用して文字をイタリック表示にしています。

コード22行目では、<b>タグと<i>タグを組み合わせて文字を太字でイタリック表示にしています。

作成したhtmlファイルを開くと実行結果のようにそれぞれ文字の表示が変わっていることが確認できます。

 

監修してくれたメンター

菅繕久

現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。

普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。

TechAcademy ではPythonコースを担当しております。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。