CSSとHTMLでテキストに下線を引く2つの簡単な方法

ページ名：CSSとHTMLでテキストに下線を引く2つの簡単な方法

HTMLで下線タグを使いたいですか？以前は、テキストに下線を引くためのHTMLコードは単純な<u></u>タグでした。しかし、この方法は、より汎用性の高いCSSの "text-decoration "スタイル・プロパティに取って代わられました。CSSを使用することで、あなたのコードが将来も使えるようになります。このWikiHowでは、現在の "text-decoration "メソッドと、HTMLの過去の非推奨メソッドを使って、CSSでテキストに下線を引く方法を紹介します。

知っておくべきこと

  • <u>タグは非推奨です。つまり、技術的には機能しますが、使用は推奨されません。
  • CSSを使う場合、テキストに下線を引くにはCSSのスタイル・プロパティ「text-decoration」を使います。
  • 下線はほんの数ステップでできますが、テキストを強調する他の方法も検討してください。下線は読者を混乱させるかもしれません。
方法1

CSSを使う

  1. CSSのスタイルプロパティ「text-decoration」を使います。Text-decorationプロパティは、.NET Frameworkのテキストの装飾線の外観を設定します。
    • text-decorationは、text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thicknessの略記です。
    • HTMLの古いバージョンでは、この要素は "Underline "要素として知られていました。<u>タグの使用は非推奨です。
    • text-decoration "プロパティの使用は、アンダーラインの新しい、より良い代替手段です。
    • あなたは、.
  2. 特定のテキストに下線を引きたいときは、<span>タグを使います。text-decoration "プロパティとともに開始タグを下線を引きたい場所に置きます。閉じる</span>タグは、下線を止めたい場所に置きます。
    <span style="text-decoration: underline;">これで下線が引かれます</span>。
  3. ページの<style>セクションでHTML要素を宣言します。CSSスタイルシート上でもできます。HTML要素をスタイル宣言することで、下線処理をより簡単にすることができます。例えば、レベル3のヘッダーにすべて下線を引くには、CSSスタイル・セクションに次のように追加します：
    <html> <head> <style> h3 { text-decoration: underline; } </style> </head> <body> <h3>このヘッダーには下線が引かれます</h3> </body> </html>
  4. .いつでも素早く下線を引くことができるようになります。スタイルシートまたは<style>セクションで、後で呼び出すクラスを作成することができます。クラスには好きな名前をつけることができます。
    <html> <head> <style> .underline { text-decoration: underline; } </style> </head> <body> このクラスを使って、<div >素早く</div>アンダーラインを引くことができます。
  5. テキストを強調する他の方法を考えてみましょう。下線は読者を混乱させないために避けるべきです。よく使われる方法としては、<em>タグを使う方法があります。CSSを使ってこのタグをさらに定義し、独自の強調を行うことができます。
    <html> <head> <style> em { color: red; } </style> </head> <body> em要素を使用するものはすべて、<em>（デフォルト設定のため）大文字になります</em>。 </body> </html>
方法2

HTMLを使う（非推奨）

  1. 古い<u></u>タグの使用は避けてください。これは "非推奨 "になっており、動作はするものの、もはや使われていない、あるいは推奨されていないことを意味します。これは、HTMLがコンテンツをスタイルするように設計されていないからです。<u>タグはまだ使えますが、スペルミスの単語など、他のテキストとは異なるテキストを表すようになりました。
  2. 下線を引くには<u></u>タグを使います（デモンストレーションのみ）。この方法を使うべきケースはもう事実上ありません。しかし、古いウェブサイトを更新しなければならない場合に、この方法がどのように使われていたかを知っておくのはよいことです。
    <html> <body> HTML の古い下線タグは、<u>素早く下線を引くことができましたが</u>、他のスタイル要素が絡むと混乱してしまいました。このため、現代的な下線は「text-decoration」CSS 要素を使って実現されています。 </body> </html>
この記事は、CC BY-NC-SAの下で公開された " 2 Easy Ways to Underline Text in CSS and HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧