ユーザーに魅力的な Web サイトでは、複数のスタイル手法を随時追加する必要があることがよくあります。このような状況では、サイトを目立たせるための要件に応じて、さまざまな値に基づいてテキスト装飾のスタイルを複数の方法で実行できます。
このブログでは、次のコンテンツ領域について説明します。
Tailwind CSS でテキスト装飾スタイルを設定するにはどうすればよいですか?
テキストのスタイルは、「」を使用して設定および装飾できます。 テキスト装飾スタイル 」プロパティには、異なるスタイル値が割り当てられます。
テキスト装飾スタイルのプロパティ
| クラス | プロパティ |
| 装飾-固体 | テキスト装飾スタイル: ソリッド; |
| 装飾ダブル | テキスト装飾スタイル: double; |
| 装飾波状 | テキスト装飾スタイル: 波状; |
| 装飾破線 | テキスト装飾スタイル: 破線; |
| 装飾ドット | テキスト装飾スタイル: 点線; |
例: Tailwind CSS でのテキスト装飾スタイルの設定
この例では、上で説明した「 テキスト装飾スタイル ” プロパティに段落テキストのスタイルを設定するためのすべての値を指定します。
DOCTYPE html >< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 > 脚本 >
頭 >
< 体 >
< ディビジョン >
< p クラス = 「下線飾り-ベタ...」 > これは Linuxhint Web サイトです p >
< p クラス = 「下線装飾 - ダブル ...」 > これは Linuxhint Web サイトです p >
< p クラス = 「下線飾り-波状…」 > これは Linuxhint Web サイトです p >
< p クラス = 「下線装飾 - 破線 ...」 > これは Linuxhint Web サイトです p >
< p クラス = 「下線飾り・点線・・・」 > これは Linuxhint Web サイトです p >
ディビジョン >
体 >
html >
このコードに基づいて、次の手順を適用します。
-
- 指定された「」を含めます CDN 「」内のパス <頭> 」タグを使用して、Tailwind 機能を適用します。
- 次に、「」を使用して 4 つの段落を作成します。 ” を含むタグ テキスト装飾 」プロパティには、説明したように、それぞれの場合に異なる値が割り当てられます。
- これにより、テキストに実線、二重線、波線、破線、点線の下線が引かれます。
出力
この結果から、テキストがそれに応じて装飾されていることが確認されます。
結論
テキストのスタイルは、「」を使用して設定および装飾できます。 テキスト装飾スタイル 」プロパティには、異なるスタイル値が割り当てられます。これらの値には、実線、二重、波線、破線、点線が含まれます。このブログは、Tailwind CSS を使用してテキスト装飾スタイルを設定することについてのすべてでした。