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

HTMLでテキストに下線を引く方法をわかりやすく解説

HTMLでテキストに下線を引く基本の方法

HTMLでテキストに下線を引くには、<u>タグを使用します。<u>タグはかつてHTMLで非推奨とされましたが、HTML5で再び導入されました。現在では、単語のスペルミスのように、周囲のテキストとは意味的に異なることを示すために使用されています。

下線を引くもう一つの方法として、style属性を使うやり方があります。style属性は要素に対してインラインスタイルを直接指定するもので、CSSのtext-decorationプロパティと組み合わせることで、<p>タグなどのHTML要素に下線を適用できます。

ただし、style属性で指定したスタイルは、グローバルに設定されたスタイルよりも優先される点に注意が必要です。具体的には、HTML内の<style>タグや外部スタイルシートで定義されたスタイルが上書きされてしまいます。

HTMLでテキストに下線を引く方法をわかりやすく解説

サンプルコード

<u>タグを使って下線を引く

以下のコードを実行すると、<u>タグによってページ内のテキストに下線が引かれます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML u tag</title>
   </head>

   <body>
      <h1>Heading</h1>
      <p><u>This text will be underlined.</u></p>
   </body>
</html>

CSSのtext-decorationプロパティを使って下線を引く

次のコードは、CSSのtext-decorationプロパティを使ってテキストに下線を引く例です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Text underline</title>
   </head>

   <body>
      <h1>Heading</h1>
      <p style="text-decoration: underline;">This text will be underlined.</p>
   </body>
</html>
  1. HTMLの<s>タグとは？取り消し線テキストの使い方を解説

    HTMLの<s>タグは、もはや関連性がなくなったテキスト（正確ではなくなった内容）を示すために使用される要素です。このタグはHTML5で再定義され、「不正確になったテキスト」を表す意味を持つようになりました。それでは、<s>要素の実装例を見ていきましょう。サンプルコード<!DOCTYPE html> <html> <body> <h2>Exam Results</h2>     <p><s>Result would be announced on

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

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