Webページをユニークに彩る！CSSによるテキスト反転テクニック

2024-05-09

HTMLとCSSでテキストをミラーリング/反転する方法

HTMLとCSSを使用してテキストをミラーリングまたは反転するには、いくつかの方法があります。それぞれのアプローチには長所と短所があり、目的と使用するブラウザのバージョンによって最適な方法が異なります。

文字色の反転と背景色の反転

最も簡単な方法は、color プロパティと background-color プロパティを使用して、テキストの色と背景の色を反転することです。これは、次のようなCSSルールで実現できます。

.inverted-text {
  color: white;
  background-color: black;
}

この方法はシンプルで、すべてのブラウザで動作します。ただし、背景色がテキストと同じ色の場合、テキストが見えなくなるという問題があります。

filterプロパティを使用して、テキストを反転させることもできます。この方法は、背景色に関係なくテキストを反転させることができるため、前述の問題を解決できます。

.inverted-text {
  filter: invert(100%);
}

この方法は、比較的新しいブラウザでのみサポートされていることに注意する必要があります。Internet Explorer 11、Edge 12 以前、Safari 9 以前などの古いブラウザでは動作しません。

transformプロパティと scaleXプロパティを使用して、テキストを水平方向に反転させることもできます。

.inverted-text {
  transform: scaleX(-1);
}

この方法は、古いブラウザを含むすべてのブラウザで動作します。ただし、縦方向に書かれたテキストには適用できません。

transformプロパティと rotateプロパティを使用して、テキストを任意の角度に回転させることもできます。テキストを180度回転させると、上下左右に反転したように見えます。

.inverted-text {
  transform: rotate(180deg);
}

この方法は、すべてのブラウザで動作しますが、他の方法と比べて複雑です。

使用する方法は、目的と使用するブラウザのバージョンによって異なります。

背景色に関係なくテキストを反転させたい場合は、filterプロパティを使用します。(ただし、古いブラウザではサポートされない可能性があります。)
縦方向に書かれたテキストを反転させたい場合は、transformプロパティと scaleXプロパティを使用します。

上記以外にも、CSSでテキストを反転させる方法はいくつかあります。詳細は、次のリソースを参照してください。

CSSでテキストをミラーリング/反転するサンプルコード

以下は、HTMLとCSSを使用してテキストをミラーリング/反転させるためのいくつかのサンプルコードです。

文字色の反転と背景色の反転

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
  <style>
    .inverted-text {
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <p>通常のテキスト</p>
  <p class="inverted-text">反転されたテキスト</p>
</body>
</html>

filterプロパティの利用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
  <style>
    .inverted-text {
      filter: invert(100%);
    }
  </style>
</head>
<body>
  <p>通常のテキスト</p>
  <p class="inverted-text">反転されたテキスト</p>
</body>
</html>

transformプロパティと scaleXプロパティの利用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
  <style>
    .inverted-text {
      transform: scaleX(-1);
    }
  </style>
</head>
<body>
  <p>通常のテキスト</p>
  <p class="inverted-text">反転されたテキスト</p>
</body>
</html>

transformプロパティと rotateプロパティの利用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
  <style>
    .inverted-text {
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <p>通常のテキスト</p>
  <p class="inverted-text">反転されたテキスト</p>
</body>
</html>

これらのコードは、さまざまな方法でテキストをミラーリング/反転する方法を示しています。ご自身のニーズに合った方法を選択してください。

CSSプリフィックスの注意点

応用例

CSSでテキストをミラーリング/反転させる方法は、さまざまな場面で使用できます。

ロゴや見出しを反転して、ユニークな視覚効果を作成する
ユーザー入力エラーを示す
読みにくいテキストを反転して読みやすくする
ゲームやその他のインタラクティブなコンテンツでテキストを反転する

HTMLとCSSでテキストをミラーリング/反転するその他の方法

前述の方法に加えて、HTMLとCSSを使用してテキストをミラーリング/反転する方法はいくつかあります。以下に、いくつかの例を紹介します。

疑似要素と::beforeおよび::afterセレクタ

::beforeおよび::after疑似要素を使用して、テキストの前にまたは後に反転されたテキストを含むスパン要素を作成できます。この方法は、比較的古いブラウザでも動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
  <style>
    span::before {
      content: attr(data-text);
      transform: scaleX(-1);
      color: white;
      background-color: black;
      display: inline-block;
      margin-right: 0.5em;
    }
  </style>
</head>
<body>
  <span data-text="通常のテキスト">反転されたテキスト</span>
</body>
</html>

SVGテキストを使用して、テキストをプログラム的にミラーリング/反転することができます。この方法は、柔軟性が高く、複雑なエフェクトを作成するために使用できます。ただし、SVGを扱うには、ある程度の専門知識が必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
</head>
<body>
  <svg viewBox="0 0 100 50">
    <text x="10" y="30" fill="black">通常のテキスト</text>
    <text x="10" y="30" fill="white" textLength="100" transform="matrix(-1, 0, 0, 1)">反転されたテキスト</text>
  </svg>
</body>
</html>

Canvasを使用して、テキストをプログラム的にレンダリングし、反転できます。この方法は、高度なエフェクトを作成するために使用できますが、複雑でパフォーマンスも高くなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストをミラーリング/反転</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="50"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'black';
    ctx.fillText('通常のテキスト', 10, 30);

    ctx.fillStyle = 'white';
    ctx.scale(-1, 1);
    ctx.fillText('反転されたテキスト', 110, 30);
  </script>
</body>
</html>