縁取り文字はCSSのtext-strokeで可能。(非推奨の時代は終わり。)|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

縁取り文字はCSSのtext-strokeで可能。

縁取り文字はtext-strokeを使った方が楽で確実。

DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字

文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。

そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がようやく終わった。

IEがサポート終了となったので、「text-stroke」を使えば良くなった。


text-strokeの使い方は超簡単。

「text-shadow」でめっちゃ複雑なコード、かつそれでも思い通りに再現できなかった縁取りが、わずか1行で済む。(ベンダープレフィックスを合わせて2行。)

例)

text-stroke.
テキストストローク。
文字の輪郭を縁取る。
ストロークはデザインツールでいう「線」のこと。

HTML
<p class="example">文字の縁取り。テキストストローク。ストロークはデザインツールで塗りと線でいう場合の「線」のこと。</p>
CSS
.example {
 font-size: 3rem;
 font-weight: bold;
 -webkit-text-stroke: 1px #f15d00;
 text-stroke: 1px #f15d00;
}

注意点はとしては、、、

  • 2022年10月現在、ベンダープレフィックスはまだ必要。(ChromeもSafariも。FirefoxとEdgeはプレフィックス不要。)
  • デザインツールのように、角(コーナー)の処理はできない。
  • 変に使いすぎるとクセになり、意図せずスーパーのチラシのようになってしまう。

文字と背景のバランスが大切。

実際に静かで澄んだの山頂上空と、賑やかなネオンのムーラン・ルージュの写真に文字を載せた例。

文字色は「color」で指定でき、透明も可能。

文字と背景のバランスが大切。

縁取り文字はCSSのtext-strokeで可能。

Photo by Louis Reed さま

賑やかすぎると、透明な文字色では読みづらい。

文字と背景のバランスが大切。

CSSのtext-strokeで文字を縁取る。

文字色を黒にすると可読性が上がる
(※ダークモード(Dark Reader)では文字色がうまくいかない。2022年10月現在。)

文字と背景のバランスが大切。

CSSのtext-strokeで文字を縁取る。

Photo by Hermann さま


text-strokeは非推奨なの?

「text-stroke」で検索すると、サジェストで「text-stroke 非推奨」と出てきた。

なぜかと思って調べてみたところ、これはかつてのIEでの未対応の他、もしかしたらMDNのサイトも原因かもしれない。

MDNのtext-strokeのページを見てみると、目立つように以下の警告がされている。

縁取り文字はCSSのtext-strokeで可能。
よく見てみると、Safari用のベンダープレフィックスである「-webkit」がついている。(※2022年10月現在、SafariやChromeにはベンダープレフィックスはまだ必要。)

Chromeも当初は「webkit」エンジンだったので、Chromeも同様にプレフィックスが必要だった。

ただし、「ブラウザーの互換性」の項目を見てみると、Safariがバージョン3、Chromeはバージョン4とある。

CSSのtext-strokeで文字を縁取る。

バージョンがとんでもなく古い。おそらくこれは、15年くらい前の情報だ。

今では、2022年10月時点では、Safariのバージョンは16であり、Chromeは100を超えている。

なので、このページは特に気にしなくても良い。(※MDNは無料かつ有益な情報が多いので、文句を言ってはいけない。ただ単にこのページが古いだけ。)

Can I Useのページで確認すると、シェア率を踏まえほとんどのブラウザで対応されている。

縁取り文字はCSSのtext-strokeで可能。

物事の一面だけを見て判断しちゃいけない、という良い例かもしれない。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。