HTML のアウトラインテキスト

この記事では、CSS を使用して HTML でテキストのアウトラインを作成する方法を紹介します。

text-shadow CSS プロパティを使用して、HTML のテキストのアウトラインを提供する

text-shadow は、テキストに影を追加する CSS プロパティです。値としてコンマ区切りのシャドウのリストを取り、各シャドウには X オフセット、Y オフセット、ブラー半径、および色が含まれます。

たとえば、テキストの tet-shadow プロパティが 1px 1px 3px black の場合、テキストのテキストシャドウの X オフセットは 1px、Y オフセットは 1px、ぼかし半径は 3px で、黒の色をしています。X オフセットと Y オフセットはテキストの影の方向を担当し、X オフセットは水平方向の影を表し、Y オフセットは垂直方向の影を表します。

ぼかし半径は、影がぼかしられるテキストからの距離を定義します。テキストに完全なアウトラインを与えるには、テキストのすべての方向にアウトラインがあるため、text-shadow の複数の値を設定する必要があります。

たとえば、<div> を作成し、その中にランダムなテキストを書き込み、<div> に outline というクラス名を付けます。CSS で、クラス outline を選択します。

その color プロパティを white に設定します。次に、div の text-shadow プロパティを -1px -1px 0 #000, 1px -1px 0 black,-1px 1px 0 black, 1px 1px 0 black; に設定します。

ここでは、text-shadow プロパティに 4 組の値を適用しました。テキストの輪郭を全方向に作成します。テキストをぼかしたくないので、ぼかし半径に 0 を使用しました。

オフセット値も負の値を受け入れます。X オフセットの負の値は左側に影を作成し、負の Y オフセットはテキストの上部に影を作成します。

また、テキストの色を白に、影を黒に設定して、テキストとアウトラインが白の背景に表示されるようにします。

コード-HTML：

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

コード-CSS：

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

したがって、CSS の text-shadow プロパティを使用して、HTML でテキストのアウトラインを指定できます。