cssで二重縁取りのテキストを作る方法 【簡単】

作れるもの

See the Pen Untitled by sattya (@San-3) on CodePen.

はじめに

※二重縁取りを実装するにあたっての、理屈に関して、
理解しなくても良い人は、この章を飛ばして下さい。

css標準の一部ではないのですが、webkit系ブラウザでのみサポートされている、
-webkit-text-stroke という、テキストを縁取りするプロパティが存在します。
(※このプロパティは、例外で、firefox,MS edge等でもサポートされています。)

実際に そのプロパティ を使ってみます。
値は、1px red; に設定しました。

縁取りは出来るのですが、テキストの外側に1px, 内側にも1px
となってしまい、外側だけでなく、内側の方にも縁取りがされてしまいます。
その為、 何も装飾してない、テキストと比べ、見にくくなってしまいます。

上記画像のソースコード

    <style>
        .txt-stroke {
            -webkit-text-stroke: 1px red;
        }
    </style>
    <!-- 縁取りしたテキスト-->
    <div class="txt-stroke">これは、テキストストロークです</div>
    
    <!-- 何もしてないテキスト-->
    <div>これは、テキストストロークです</div>

---

先ほどの、方法では、内側にも縁取りがされてしまい、
思い通りに、縁取りが出来ませんでした。外側にだけ縁取りをしたいですよね。
しかし、プロパティの仕様上それは出来ません。

ですが、下記青文字の方法を使えば、
外側だけ縁取り＆二重縁取りが作れるようになります。

▼縁取りした文字を重ねる方法

①何も装飾をしてないテキストの下に、
-webkit-text-stroke で、縁取りしたテキストを重ねる。
②さらにその下に、もっと太く縁取りしたテキストを重ねる。

縁取りしたテキストを下に下にと、重ねていく事で、実質外側だけに縁取り出来て、
さらに、二重縁取りも作れるようになります。

---

これから、解説する下記二つの、
二重縁取りを作る方法は、
1.疑似要素を使う
2.文字を重ねる

今解説した、縁取りした文字を重ねる方法 を使っています。

1.疑似要素(before,after)を使う

※フォントは各自で用意して下さい

data-textとdivタグのテキストは同じ物で合わせて下さい。

HTML

<div class="double-outline" data-text="aaaDouble-Outline">aaaDouble-Outline</div>

CSS

/* 一つ目の縁取りのスタイル */
   .double-outline {
       position: relative;
       color: white;
       font-size: 27px;
       
       /* 各自フォントを用意する */
   }
   
   .double-outline::before,
   .double-outline::after {
       content: attr(data-text);
       position: absolute;
       top: 0;
       left: 0;
       color: white;
   
   }
   
   .double-outline::before {
       z-index: -1;
       -webkit-text-stroke-width: 6px;
   -webkit-text-stroke-color: red
   }
   
   .double-outline::after {
       z-index: -2;
       -webkit-text-stroke-width: 10px;
   -webkit-text-stroke-color: black;
   }

2.文字を重ねる

疑似要素とは、違いこの方法は、
javascriptで縁の色や幅を操作したい時におすすめです。

HTML

    <div class="double-outline-main">カスタマイズ二重縁取り
        <div class="double-outline2">カスタマイズ二重縁取り</div>
        <div class="double-outline2">カスタマイズ二重縁取り</div>
    </div>

CSS

/* 二つ目の縁取りのスタイル */
        .double-outline-main {
        position: relative;         
        font-size: 27px;

        /* 各自フォントを用意する */
        
    }

        .double-outline2 {
        position: absolute; 
        top: 0;
        left: 0;
    }


    .double-outline2:nth-of-type(1) {
        z-index: -1;
        -webkit-text-stroke-color: white;
        -webkit-text-stroke-width: 5px;
    }
    .double-outline2:nth-of-type(2) {
        z-index: -2;
        -webkit-text-stroke-color: black;
        -webkit-text-stroke-width: 10px;
    }

縁の色をJSで操作する場合は下記のソースコード追加して下さい

input color

    <div style="margin-bottom: 20px;">
        <span>一つ目の縁の色</span><input type="color" value="#FFFFFF" name="" id="changeOutlineFir">
        <span>二つ目の縁の色</span><input type="color" value="#0000ff" name="" id="changeOutlineSec">
    </div>

input colorの値を、縁の色に反映

        const $doc = document;
        const $changeOutlineFIr = $doc.getElementById("changeOutlineFir")
        const $changeOutlineSec = $doc.getElementById("changeOutlineSec")

        const $firstMainTxt = $doc.querySelectorAll(".double-outline-main")
        const $firstOutline = $firstMainTxt[0].querySelectorAll(".double-outline")

        $changeOutlineFIr.addEventListener("input", (e) => {
            const color = e.currentTarget.value;
            $firstOutline[0].style.webkitTextStrokeColor = color;

        });

3.text-shorrowを使う

縁が途切れてしまうので、おすすめはしません。

HTML

<p class="shadow-double-outline">text-shadow</p>

CSS

/* 三つ目の縁取りのスタイル */

    .shadow-double-outline {
    
        /* 各自フォントを用意する */
        
        font-size: 27px;
        margin: 0;
        color: blue;
        /* Text color */
        text-shadow:
            /* Inner shadow for thicker border effect */
            2px 2px 0 white,
            -2px -2px 0 white,
            2px -2px 0 white,
            -2px 2px 0 white,
            /* Outer shadow for additional border effect */
            4px 4px 0 blue,
            -4px -4px 0 blue,
            4px -4px 0 blue,
            -4px 4px 0 blue;
    }

どれを使えばいい?【比較】

最後に、それぞれ、縁取り方法の比較表を作りました。

※JS操作=javascriptで縁を操作する事

See the Pen Untitled by sattya (@San-3) on CodePen.

作成方法	html記述量	JS操作	概要
1.疑似要素を使う	○	✕	普通に二重縁取りを作りたいならこれ
2.文字を重ねる	△	〇	疑似要素と同じ縁取りが作れる。そして、javascriptで縁を、操作したいなら、これを使えば良い
3.text-shodowを使う	△	〇	縁取りが、途切れるし、非推奨。しかし、意図的そうしたいなら、使えばいい。 ほがしやネオン を加えたい時に使うのが、メイン。

参考

1.疑似要素(before, after)を使う
に関して、以下の記事を参考にさせていただきました。
https://blog.fascode.net/2021/06/08/css-webkit-text-stroke-width/