【簡単】CSSで文字を縁取る方法２選【太い線でもOK】

パソ君

・CSSで文字を縁取る方法は？

こんな疑問にお答えします。

デザインによっては下記のように、文字が縁取りされていることありますよね。

画像で反映しても良いのですが、CSSのみで反映可能です。

しかも簡単に実装できちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「CSSで文字を縁取る方法２選」について解説していきます！

【簡単】CSSで文字を縁取る方法２選【太文字でもOK】

CSSで文字を縁取る方法は主に2つ。

順に見ていきましょう。

【方法①】CSSで文字を縁取る方法「text-stroke」

まず「text-stroke」を使う方法です。サンプルがこちら↓

See the Pen ➀テキスト縁取り by jito-coder (@jito-coder) on CodePen.

.txt01 {
  color: #fff;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}

やり方としては「text-stroke」プロパティを使って、太さと色を値に指定するだけ。

非対応用に念のためベンダープレフィックスをつけておきます。

縁取りが太い場合

縁取りを太くすると下記のような見た目になります。

See the Pen ➀テキスト縁取り by jito-coder (@jito-coder) on CodePen.

text-stroke: 5px #000;
-webkit-text-stroke: 5px #000;

文字がつぶれてしまって、ちょっと見にくいですよね。

このように「text-stroke」は、縁取りが太い場合に利用しにくいです。

【方法②】CSSで文字を縁取る方法「text-shadow」

続いて「text-shadow」を使ったやり方。サンプルがこちら↓

See the Pen ➀テキスト縁取り by jito-coder (@jito-coder) on CodePen.

.txt01 {
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
  -1px 1px 0 #000,  1px -1px 0 #000,
  1px 0 0 #000, -1px  0 0 #000,
  0 1px 0 #000,  0 -1px 0 #000;
}

8方向から影を作成して、縁取りにしているかのように反映しています。

数値と色を変えれば、簡単にカスタマイズ可能です。

縁取りが太い場合

縁取りを太くした場合、下記のような見た目になります。

See the Pen ➂テキスト縁取り by jito-coder (@jito-coder) on CodePen.

.txt02 {
  color: #fff;
  text-shadow: 5px 5px 0 #000, -5px -5px 0 #000,
  -5px 5px 0 #000,  5px -5px 0 #000,
  5px 0 0 #000, -5px  0 0 #000,
  0 5px 0 #000,  0 -5px 0 #000;
}

ちょっとガビガビしてて、見にくいですよね。

ただ安心してください！
「text-shadow」の場合、裏技を使えば良い感じに反映できちゃいます！

裏技：ぼかしを入れる！

「text-shadow」にてぼかしを入れれば、良い感じに反映可能です。

See the Pen ➃テキスト縁取り by jito-coder (@jito-coder) on CodePen.

.txt03 {
  color: #fff;
  text-shadow: 5px 5px 5px #000, -5px -5px 5px #000,
  -5px 5px 5px #000,  5px -5px 5px #000,
  5px 0 5px #000, -5px  0 5px #000,
  0 5px 5px #000,  0 -5px 5px #000;
}

やったこととしては、値の3つ目の数字を全て「0」⇒「5px」に変更しただけです。

この値は、ぼかしを指定します。

つまり数値が入ったことで、色のぼかしを追加して反映しました。

縁取りが太い場合は「text-shadow」を使うのがオススメです。

ただデザインと見た目が異なる場合は、やはり画像で反映するのが良いでしょう。

【簡単】CSSで文字を縁取る方法２選【太文字でもOK】：まとめ

ジト

文字を縁取りたい場合は、試してみてね！