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

HTMLでテキストを強調する方法：太字・斜体・下線の基本を解説

HTMLには、テキストを目立たせて注目を集めるためのさまざまな書式設定の方法があります。この記事では、テキストを太字、斜体、下線にする方法を詳しく解説します。読み終える頃には、あなたもHTMLの書式設定を自在に扱えるようになっているでしょう。

太字（ボールド）の設定方法

HTML5以前は、テキストを太字にするには、強調したい部分を<b>タグで囲むのが一般的でした。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is <b>bold</b></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5標準が登場すると、太字にする推奨の方法は<strong>タグを使うことへと変わりました。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is also <strong>bold</strong></p>
   <script src="script.js"></script>
 </body>
</html>

<b>タグと<strong>タグの唯一の違いは「セマンティクス（意味付け）」にあります。スクリーンリーダーは<strong>タグを認識し、そのテキストを読み上げる際により強い強調をつけて伝えてくれます。<b>タグには、そうした働きはありません。

斜体（イタリック）の設定方法

太字と同様に、斜体にも2つの異なる記述方法があります。HTML5以前は、斜体にしたいテキストを<i>タグで囲んでいました。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is in <i>italics</i></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5が標準となると、<i>タグに代わって、より意味的な<em>タグが使われるようになりました。「em」はemphasis（強調）の略です。<em>タグはスクリーンリーダーに対してそのテキストをより強く強調するよう指示するため、利用者は通常のテキストと強調されたテキストを容易に区別できるのです。

下線（アンダーライン）の設定方法

HTMLでテキストに下線を引く用途として最も多いのは、スペルミスのある単語を示すことです。ハイパーリンクと混同されやすい場所での使用は避けましょう。まずテキストを<u>タグでマークアップし、下線のスタイル（色や波線など）はCSSで指定するのがベストプラクティスです。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <style>
     p u {
       text-decoration: underline red wavy;
     }
   </style>
 </head>
 <body>
   <p>This is a <u>mispelled</u> word</p>
 </body>
</html>

まとめ

この記事では、HTMLの主要な書式設定タグについて解説しました。<strong>や<em>は、画面上ではそれぞれ太字・斜体として表示されますが、本来は要素に「意味」を持たせるために使うものです。スクリーンリーダー環境では、これらの単語は強調して読み上げられます。また、<u>タグを使えばテキストに下線を引けます。ここで紹介した3つ以外にも、HTMLには数多くの書式設定オプションが用意されているので、ぜひ試してみてください。

  1. HTMLテキストフォーマットとは？主要な書式設定タグ10選と使い方を解説

    HTMLのテキストフォーマット（書式設定）とは、HTML文書内でテキストの見た目や意味を整えるために特別に用意された要素のことです。これらのタグを使いこなすことで、太字・斜体・ハイライトなど、さまざまなテキスト表現が可能になり、文章の可読性や伝わりやすさが大きく向上します。 基本構文 テキストフォーマット用タグの基本的な書き方は以下のとおりです。 <tagname>content</tagname> 主なテキストフォーマットタグ一覧 HTMLで使われる代表的なテキストフォーマットタグは、以下の10種類です。 番号タグと説明 1<b>テキストを太字に

  2. HTML DOM アンダーラインオブジェクトとは？<u>要素をJavaScriptで操作する方法

    HTML DOM のアンダーライン（Underline）オブジェクトは、HTML の <u> 要素を JavaScript から操作するためのインターフェースです。<u> 要素はテキストに下線を引くためのインライン要素で、単なる装飾だけでなく、誤字の指摘や固有名詞の注釈など、意味的な強調を表す場面でも活用されます。 <u> 要素の作成方法 新しい <u> 要素を動的に生成したい場合は、document.createElement() メソッドを使用します。 var uObject = document.createElement(U); サン