CSSを使って縁取り文字を作成する2つの方法【CSS】
CSSを使って縁取り文字を作成する2つの方法【CSS】

CSSを使って縁取り文字を作成する2つの方法【CSS】

  • CSS
CSSを使って縁取り文字を作成する2つの方法【CSS】

最終更新日：2025-03-17

公開日：2025-03-17

ページ内に広告が含まれています。

Webサイト上で文字を目立たせる方法の1つに縁取り文字があり、現在はCSSでもある程度のデザインを再現できるようになってきています。今回は縁取り文字を作成する方法を2つ解説していきますが、どの程度表現できるのかを含め適切な方法を選択していただければと思っています。

目次

  1. CSSで縁取り文字を作成する2つの方法
  2. text-strokeプロパティを使用する方法
  3. text-shadowプロパティを使用する方法
  4. さいごに

CSSで縁取り文字を作成する2つの方法

CSSで縁取り文字を作成する方法としてtext-strokeプロパティを使用する方法と、text-shadowプロパティを使用する方法があります。それぞれのプロパティについては以下の通りです。

text-strokeプロパティ

テキスト文字の輪郭線の幅と色を指定するプロパティです。text-strokeプロパティは、線の幅を指定する「text-stroke-width」と線の色を指定する「text-stroke-color」のショートハンドとなっています。

text-shadowプロパティ

テキストに影(シャドウ)を指定するプロパティです。x軸・y軸・色を指定する事ができ、カンマ区切りで複数の値を指定する事が可能です。

上記のようにCSSで縁取り文字を作成する方法として2つの方法があります。次項ではそれそれの方法について解説していきますが、共通で使用するHTMLは以下となります。

<p>cdg-bloj.jp</p> <p>あいうえお</p> <p>縁取り文字</p>

text-strokeプロパティを使用する方法

まずは、text-strokeプロパティを使用する方法です。今回指定するCSSは以下となります。

p { color: #FFF; -webkit-text-stroke: 1px black; text-stroke: 1px black; }

colorプロパティで文字色を指定し、縁取る線の太さと色をtext-strokeプロパティで指定します。これらのCSSを指定した場合以下のようになります。

cdg-bloj.jp

あいうえお

縁取り文字

上記のように文字が縁取りされていますが、文字サイズが小さかったり、線が太い場合には文字が潰れて見えてしまいますので注意してください。また、CSSのベンダープレフィックス「-webkit-text-stroke」の指定は必須となりますので注意してください。その他、IEなど旧ブラウザには対応しておりません。text-strokeプロパティの対応状況はこちら(Can I Use)で確認できます。

今回はかなりキレイに縁取られていますが、フォントによって文字の繋ぎ目が被ってしまい不自然な形になる事があります。特にバリアブルフォントでその傾向が強いようです。その場合は次の方法をお試しください。

text-shadowプロパティを使用する方法

次に、text-shadowプロパティを使用する方法です。まずは以下のコードをご覧ください。

p { color: #FFF; text-shadow: 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black, 1px -1px 0 black, 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black; }

text-shadowプロパティはカンマ区切りで複数の値を指定する事ができ、上記例ではそれぞれ8方向に影を指定しています。これらのCSSを指定した場合以下のようになります。

cdg-bloj.jp

あいうえお

縁取り文字

先程のtext-strokeプロパティとは違い文字が太く見えるかと思います。text-strokeプロパティは文字輪郭の外側と内側の両方に線が付く為少し細く見えますが、text-shadowプロパティで今回指定したのは文字の外側になりますので違って見えます。

text-shadowプロパティで縁取る場合の注意点としては、線を太くすると以下のように線がギザギザしてしまいます。

cdg-bloj.jp

あいうえお

縁取り文字

こういった場合は影を少しぼかしてやるとキレイに見えるかと思いますので工夫してみてください。

text-shadowプロパティは主要ブラウザ全てで使用できます。対応状況はこちら(Can I Use)で確認できます。

さいごに

いかがでしたでしょうか。今回は、CSSを使って縁取り文字を作成する2つの方法を解説しました。これらで完全に表現できるわけではなく、場合によっては画像に置き換えが必要な場合もあります。表現の選択肢の一つとして覚えておけたらいいかなと思います。

align-itemsプロパティでFlexbox内の要素の配置を指定する方法と効かない原因【CSS】 画像を使わずCSSで可変スペース部分の逆角丸を作成する方法【CSS】 記事一覧

おすすめ記事

    • CSS
    calc関数で幅や高さを計算式で指定する方法【CSS】
    • CSS
    letter-spacing指定時の右側が空く(左にずれる)場合の対応方法【CSS】
    • CSS
    否定疑似クラス:not()の使い方と注意点について【CSS】
    • CSS
    疑似要素にも下線がついてしまう時の対処法【CSS】

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

📎📎📎📎📎📎📎📎📎📎