【CSS】文字に「縁取り」をつける方法を解説します。

2020-09-15

今回は、CSSの設定で文字に「縁取り」を入れる方法について解説します。

使用するケース

主にブログ、HPのタイトルを印象付けるために使用されます。

そのほかの用途ではほとんど見ませんが、グローバルメニュー項目をマウスオーバーした時に黄色く縁取られるサイトをどこかで見たような気がしますが、夢かもしれません。

方法

CSS「text-shadow」のプロパティを使って対応ができます。

「text-shadow」は名前の通りテキスト（文字）に「影」をつけるためのプロパティですが、文字の8方位（上下左右、左上、右上、右下、左下）にそれぞれ影を付けることで縁取りすることができます。

text-shadowのプロパティは、「横の位置,縦の位置,色」で値を設定でき、カンマ区切りで複数設定できるので、横の位置と縦の位置を変更して8方位分設定します。

下記、対応例となります。

.sample{
	text-shadow:		
		0px -1px  black,
		1px 0px  black,
		0px 1px  black,
		-1px 0px  black,
		-1px -1px  black,
		1px -1px  black,
		1px 1px black;
}

下記、サンプルです。

タピオカ

以上となります。