Zalgo テキストとプログラミング： HTML と JavaScript で Zalgo テキストを操る

2024-04-02

Zalgo テキストを作るには、以下の2つの方法があります。

Unicode 文字を手動で入力する:

Unicode には、文字の上に装飾を施すための特殊な文字が多数存在します。これらの文字を通常のテキストに組み合わせることで、Zalgo テキストを作ることができます。例えば、以下の文字は、それぞれ文字の上に角や波線を追加する効果があります。

U+0305: COMBINING OVERLINE

これらの文字をテキストエディタなどで手動で入力することで、Zalgo テキストを作ることができます。

Zalgo テキストジェネレータを使う:

インターネット上には、Zalgo テキストを簡単に生成できるツールが多数存在します。これらのツールを使うと、手動で入力することなく、様々な種類の Zalgo テキストを作ることができます。

HTML との組み合わせ

Zalgo テキストは、HTML と組み合わせて、Web ページ上で様々な効果を生み出すことができます。例えば、以下のコードは、ページタイトルを Zalgo テキストに変換します。

<h1>
  <span style="text-decoration:overline;">H</span>
  <span style="text-decoration:caron;">a</span>
  <span style="text-decoration:tilde;">l</span>
  <span style="text-decoration:overline;">l</span>
  <span style="text-decoration:caron;">o</span>
</h1>

また、JavaScript を使うと、Zalgo テキストをアニメーションさせたり、ユーザーの入力に応じて変化させたりすることもできます。

注意点

Zalgo テキストは、閲覧者に不快感を与える可能性があります。使用の際は、以下の点に注意しましょう。

使用目的を明確にする
過度な使用は避ける
閲覧者に警告を表示する

Zalgo テキストは、Web ページに個性を与える効果的な手段ですが、使用には注意が必要です。上記の解説を参考に、適切な方法で使用してください。

例1：HTML と CSS を使って、ページタイトルを Zalgo テキストに変換する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Zalgo テキスト</title>
  <style>
    h1 {
      text-decoration:overline;
    }
    h1 span:nth-of-type(1) {
      text-decoration:caron;
    }
    h1 span:nth-of-type(2) {
      text-decoration:tilde;
    }
    h1 span:nth-of-type(3) {
      text-decoration:overline;
    }
    h1 span:nth-of-type(4) {
      text-decoration:caron;
    }
  </style>
</head>
<body>
  <h1>
    <span>H</span>
    <span>a</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
  </h1>
</body>
</html>

例2：JavaScript を使って、Zalgo テキストをアニメーションさせる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Zalgo テキスト</title>
  <style>
    h1 {
      text-decoration:overline;
    }
    h1 span {
      display:inline-block;
      transition:all 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <h1>
    <span>H</span>
    <span>a</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
  </h1>
  <script>
    const h1 = document.querySelector("h1");
    const spans = h1.querySelectorAll("span");

    setInterval(() => {
      spans.forEach((span, i) => {
        span.style.textDecoration = `overline ${i % 2 === 0 ? "none" : "2px solid red"}`;
      });
    }, 1000);
  </script>
</body>
</html>