縁取り縁取りWebフォントが使えるようになったことで、画像に頼らなくてもロゴやコピーをテキストとCSSで表現できるようになりました。Webフォント(Googleフォント)の使い方と高速化【容量2%に減】Webフォントを使うときはフォントファイルの容量を軽くすることが重要になってきます。軽くする方法も含めて「Webフォントの使い方」をご説明します。この記事を読むしかし、背景によって文字が読みづらい場合、文字を縁取りしたくなる場合があります。そんなときに使えるCSStext-shadowなどで縁取り文字にする方法を紹介します。太い縁にするときは一工夫必要になります。2)縁のない同じ文字を重ねる比較表まとめ以下の実装例は画像ではなく、htmlとCSSだけで実装しています。方法1.text-shadowを使うtext-shadowはテキストに影をつけるためのCSSです。「縁」とは少し違います。これを工夫することで「縁」を表現しています。CSSを以下のように指定します。1pxのぼやけない影を指定しています。class="shadow">縁取り</p>text-shadowで太い縁を作ろうとすると一部の角がトゲトゲになってしまっているのがわかるでしょうか。デザイナーとしては気になるところです。class="shadow">縁取り</p>text-shadowは本来影をつけるためのCSSです。ぼかすことで角のトゲトゲをごまかすことができます。ぼかしが気にならない場合はこの方法がオススメです。text-shadowを減らしたバージョンところでtext-shadowに8つも指定していると修正が大変です。以下は4つ(上、右、下、左)だけ指定した場合です。気にならなければこちらでもよいかと思います。class="shadow">縁取り</p>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む方法2.-webkit-text-strokeを使うCSSの-webkit-text-strokeはまさに文字の縁取りをするためのCSSです。残念ながらIEには対応していません。CSSに以下のように指定します。class="stroke">縁取り</p>細い縁の場合は問題ありませんね。class="stroke">縁取り</p>-webkit-text-strokeは文字の境界線に対して外側にも内側にも描写します。その合計値が指定したpx数になります。内側3pxしかし、このままでは文字がつぶれてしまい読みづらいので一工夫必要です。その工夫とは「縁のない同じ文字を重ねる」ことです。absolute」で上に重ねるという方法です。top,leftは指定不要です。ソースは2パターンあります。html側にspanタグで文字を用意する方法か、beforeを使ってCSS側に文字を用意する方法です。いずれにしても文字を2回記述する必要があることはデメリットともいえます。決まったロゴやコピーライトに使うくらいなら実現できるでしょう。縁取り縁取り縁取りまとめtext-shadow太い線のとき、ぼかしてもいいなら問題なし。-webkit-text-strokeIEでは表示できないがきれいに縁取りできる。IEで縁がなくていいならアリ。-webkit-text-strokeとtext-shadowそれぞれ使った文字の縁取り方法を紹介しました。それぞれのメリットデメリットと上記の比較表を加味してあなたのサイトにとって最適な方を利用してみてください。以上、CSSで縁取り文字にする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。