HTMLでのダブルアンダーラインの使用方法

2024-02-14 13:56 HTMLスタイルアンダーライン

  1. 要素を使用する方法: HTMLの要素を使用すると、テキストにアンダーラインを追加することができます。しかし、標準のHTMLではダブルアンダーラインを直接サポートしていません。代わりに、CSSを使用して2つのアンダーラインを重ねる方法を説明します。

    <style>
.double-underline {
 text-decoration: underline;
 position: relative;
}
.double-underline::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -1px;
 width: 100%;
 border-bottom: 1px solid;
}
</style>
<u class="double-underline">テキスト</u>

    上記のコードでは、.double-underlineというクラスを作成し、text-decorationプロパティを使用してアンダーラインを指定しています。そして、::after擬似要素を使用して、追加の下線を作成しています。

  2. 要素を使用する方法: もう一つの方法は、要素を使用してダブルアンダーラインを作成する方法です。この方法では、CSSのborderプロパティを使用します。

    <style>
.double-underline {
 border-bottom: 1px solid;
 text-decoration: none;
}
</style>
<span class="double-underline">テキスト</span>

    上記のコードでは、.double-underlineというクラスを作成し、border-bottomプロパティを使用してアンダーラインを指定しています。また、text-decorationプロパティをnoneに設定することで、標準のアンダーラインを非表示にしています。

以上の方法を使用することで、HTMLでダブルアンダーラインを実現することができます。必要に応じて、詳細なスタイリングや他の要素との組み合わせも行うことができます。