HTMLは、テキストにさまざまなスタイルオプションを提供します。 HTMLテキストに下線を引くこともその1つです。下線を引くだけで、下の線を占有せずにテキストの下に直線が描画されます。このチュートリアルでは、< u >タグ、CSSコード、CSSクラスを使用してHTMLテキストに下線を引く方法を学習します。下線のプロパティと代替を設定します。

< u >タグ

でテキストに下線を付けますHTMLには、HTMLで指定されたテキストに下線を引くために、< u >タグが用意されています。 < u >は下線を引くための開始タグであり、< / u >は、下線の終わりを設定するために使用されます。下線タグは、ハイパーリンクや太字テキストなどのさまざまなテキストタイプに問題なく使用できます。次の例では、1つの単語、完全な文、またはハイパーリンクに下線を引きます。 < u >または下線付きのHTMLタグは、Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Operaなどのすべての主要なブラウザでサポートされています。

CSSテキスト装飾属性でテキストに下線を引く

CSSは、さまざまなHTML要素に下線を引くためにtext-decoration属性を提供します。 HTMLテキストに下線を引くために、text-decoration属性を使用できます。 text-decoration style属性は、さまざまなHTMLタグまたは要素で使用できます。次の例では、< span >タグを使用してテキストを選択し、下線を引いています。

テキストの下線の色とスタイルを設定する

場合によっては、HTMLテキストに下線を引くだけでは不十分なことがあります。下線の色やスタイルを変更することもできます。 CSS属性text-decorationを使用して、< u >で下線のスタイルと色を付けることができます。タグ付きまたはタグなし。以下では、HTMLテキストの下線の色を赤、緑、スタイルを波状、破線、点線、および二重で示します。

wavyスタイルでは、直線ではなく、波のように波状になります。

dashedスタイルは破線の下線を作成します。

dottedスタイルは破線に似ていますが、ポイントが小さくなります。

doubleスタイルでは、2つの下線が配置されますが、デフォルトは1つの下線です。

赤い色と破線の下線スペル、構文、または一般的なエラーを表現するために使用できます。また、dotted

HTMLテキストの下線にCSSクラスを使用する

すべての下線CSSコードを何度も書くのは、良い作業ではありません。 CSSクラスは、さまざまなアンダースコアのユースケース用に作成でき、このクラスは、他のHTMLタグを使用したHTMLテキストの下線に使用できます。次の例では、下線-赤、下線-緑などのさまざまなCSSクラスを作成して、テキストの下線を簡単に作成します。