ホーム > ブログ > css > テキストに波線（underline wavy）の下線をCSSで表現

テキストに波線（underline wavy）の下線をCSSで表現

text-decoration: underline wavyを使って波線を作成する方法についての記事を作成しました。CSSで文字の下に波線を付ける方法として、text-decorationプロパティを使うと簡単に波線を表現できます。この機能は、特にブラウザの最新バージョンでサポートされており、軽量で効果的です。

CSSで簡単に波線の下線を作成する方法：`text-decoration: underline wavy`

Webデザインにおいて、テキストに波線の下線を加えることで、視覚的に魅力的で動きのあるデザインを作り出すことができます。CSSのtext-decorationプロパティを使えば、手軽に波線下線を実装できます。今回は、text-decoration: underline wavyを使って波線を作成する方法を解説します。

1. `text-decoration: underline wavy`の基本

まず、波線下線を作るために必要なCSSプロパティは、text-decorationです。このプロパティは、テキストに下線、上線、取り消し線などの装飾を加えるために使用されます。wavyオプションを使用すると、通常の下線ではなく、波のような線を表示できます。

基本コード例：波線下線を作成

これは波線の下線があるテキストです

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .wave-underline {
      font-size: 24px; /* 文字サイズ */
      text-decoration: underline wavy #000; /* 波線を指定 */
    }
  </style>
</head>
<body>
  <p class="wave-underline">これは波線の下線があるテキストです</p>
</body>
</html>

説明

text-decoration: underline wavy #000;:
- underline: 下線を引きます。
- wavy: 波線（波状の下線）を指定します。
- #000: 波線の色を指定します（ここでは黒色）。色は任意で変更可能です。

2. 波線のカスタマイズ

波線の色やスタイル、太さなどをカスタマイズすることができます。例えば、text-decorationを使って波線の太さを変更したり、異なる色を使用したりすることができます。

波線の色と太さを変更する

波線の色と太さをカスタマイズしたテキスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .custom-wave-underline {
      font-size: 24px;
      text-decoration: underline wavy #ff5733; /* オレンジ色の波線 */
      text-decoration-thickness: 3px; /* 波線の太さ */
    }
  </style>
</head>
<body>
  <p class="custom-wave-underline">波線の色と太さをカスタマイズしたテキスト</p>
</body>
</html>

追加オプション

text-decoration-thickness: 波線の太さを調整します。例えば、3pxで太めにすることができます。
#ff5733: 色コードで波線の色をオレンジ色に変更しています。

3. 波線の位置を調整する

波線の位置もカスタマイズできます。text-underline-offsetプロパティを使うことで、波線とテキストの距離を調整できます。

波線の位置を調整

波線の位置を調整したテキスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .offset-wave-underline {
      font-size: 24px;
      text-decoration: underline wavy #000; /* 黒色の波線 */
      text-decoration-thickness: 4px; /* 波線の太さ */
      text-underline-offset: 6px; /* 波線をテキストから6px下げる */
    }
  </style>
</head>
<body>
  <p class="offset-wave-underline">波線の位置を調整したテキスト</p>
</body>
</html>

`text-underline-offset`の説明

text-underline-offset: このプロパティを使用して、下線（波線）の位置をテキストからどれくらい離すかを指定できます。ここでは6px下に設定しています。

4. 対応ブラウザと注意点

text-decoration: underline wavyは、最新のブラウザではサポートされていますが、一部の古いブラウザでは動作しないことがあります。特に、Internet Explorer（IE）や古いバージョンのSafariではサポートが不完全です。

対応ブラウザ

Google Chrome (最新バージョン)
Firefox (最新バージョン)
Safari (最新バージョン)
Microsoft Edge (最新バージョン)

もし、古いブラウザにも対応したい場合は、波線を画像で作成する方法や、border-bottomを使った方法を検討することができます。

まとめ

text-decoration: underline wavyを使用すると、簡単に波線の下線を作成できます。波線の色、太さ、位置を自由にカスタマイズできるので、デザインの幅が広がります。特に、動的で印象的なテキストデザインを求める場合に有効です。波線下線を使って、あなたのWebデザインにユニークで魅力的なアクセントを加えてみてください。