【サンプルコードあり】テキスト(文字) を枠線だけで表示する方法。文字の中透過して枠線で文字

CSSでテキスト文字の縁取りをする方法を書いていきます。

この記事では、色のついたテキスト文字の縁取りをする方法と
文字の中が透明で、文字の外枠だけが表示される方法

縁取り文字は画像での表現でも可能ですが、CSSで
装飾してると後で色の変更やサイズ変更などのカスタマイズも
簡単になります。

またサイトの可変にも対応しやすいので、
極力CSSで作成した方がオススメになります。

この２パターンの紹介です。

テキスト（文字）の縁取りをする方法

色のついた文字の場合は、text-shadow を
使うと簡単。

コードは下記になります。

HTML

<div class="headline-color">
  <h2 class="headline">
    コーディング作業受付中
  </h2>
</div>

CSS

.headline-color{
  width: 60%;
  margin: 100px auto;
  text-align: center;
}
.headline-color h2{
  display: block;
  font-size: 30px;
  line-height: 1.2;
  font-family: 'Oswald', sans-serif;
  color:  rgb(9, 8, 10);
  text-shadow: 1px 1px 0px #ffffff, -1px -1px 0px #ffffff;
  padding: 30px 0;
  background-color: #4f96f6;
}

text-shadow で指定すると、文字の１方向になるので、
－の指定をすることで、両面の縁取りが可能になった。

これで、文字の色も枠の色も簡単に変更可能。

文字の中を透明にして、枠線のみにする場合

文字の背景色が単色とか、単純に文字の縁取り
を行う場合は、上の方法で簡単に出来ます。

画像の上に表示させて、枠線だけの表示にする場合、
上記の方法で、colorの指定をrgbaやtransparentで透明化
指定しても中は透過になりません。
text-shadowで指定したcolorになり、うまくいきません。

CSS

  color: transparent;
  text-shadow: 1px 1px 0px #ffffff, -1px -1px 0px #ffffff;

そんな時はこの方法で大丈夫。
color: transparent;
-webkit-text-stroke: 1px rgb(255, 255, 255);

このコードで、白い線だけの文字が表現できます。

下半分文字色付けて枠線入れてみました。

書いたコード

HTML

<div class="headline-image">
  <h2 class="headline">
    コーディング作業<br>
    <span class="headline-2">受付中</span>
  </h2>
</div>

CSS

.headline-image{
  width: 900px;
  height: 500px;
  margin: 100px auto;
  background-image: url('https://inopro.jpn.org/wp-content/uploads/2022/10/gu.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.headline-image h2{
  display: block;
  font-size: 80px;
  line-height: 1.2;
  font-family: 'Oswald', sans-serif;
  padding: 30px;
  color: transparent;
	-webkit-text-stroke: 3px rgb(19, 9, 46);

}
.headline-2{
  color: #c52929;
	-webkit-text-stroke: 5px rgb(19, 9, 46);
}

今回この方法ですることが出来ました。
コーディングはいろんな方法があるので、１例として参考にしてください。

YouTube動画はこちら