・CSSで文字を縁取る方法は？
こんな疑問にお答えします。
デザインによっては下記のように、文字が縁取りされていることありますよね。
画像で反映しても良いのですが、CSSのみで反映可能です。
しかも簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「CSSで文字を縁取る方法２選」について解説していきます！
CSSで文字を縁取る方法２選
目次
【簡単】CSSで文字を縁取る方法２選【太文字でもOK】
CSSで文字を縁取る方法は主に2つ。
- 「text-stroke」を使う
- 「text-shadow」を使う
順に見ていきましょう。
【方法①】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】：まとめ
- 「text-stroke」を使う
ただ縁取りが太いと文字がつぶれる - 「text-shadow」を使う
ただ縁取りが太いと文字がガビガビする - 縁取りが太い場合は「text-shadow」を使い、ぼかしの値を変えれば良い感じに反映する
文字を縁取りたい場合は、試してみてね！
