CSSだけで文字をデザインする【見出し/文字の縁取り/text-shadow/text-stroke/background-clip】

css
2022.12.29

最近は、テキストのデザインをCSSだけで再現することが多くなってきました。
主に文字の縁取りを使ったデザインになりますが、「見出し」をCSSだけでいくつか作成しました。将来コピペできるようにメモしておきます！

使用しているフォント

今回、Google FontsのNoto Sans JapaneseとNoto Serif Japaneseを使いました。
太さはBlack 900を使っています。
以下のコードをHTMLに貼り付けておくと、同じようなデザインが再現できると思います。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&family=Noto+Serif+JP:wght@500;900&display=swap" rel="stylesheet">

クラス名txd-title-wrapにフォントの設定をします。
今回作成した見出しは、はこのセレクタの子要素となっています。

<div class="txd-title-wrap">
  <!-- 文字を追加 -->
</div>
.txd-title-wrap {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}

完成した見出しを確認する（デモ）

今回作成した見出しの一覧です。※一部、使用例も含まれます。
必要なコードはここからもコピペできます。

See the Pen text-shadow-title by donguri2020 (@m-ke) on CodePen.

text-shadowで文字に縁取りをつける（基本）

今回のデザインは、text-shadowを使って再現したものがほとんどです。
なので、text-shadowの挙動を簡単にまとめました。

まず、text-shadowとはテキストに影をつけることができるプロパティです。

基本的な構文は次の通りです。

text-shadow: 水平方向(X軸) 垂直方向(Y軸) ぼかし カラー;

以下のコードは、水平方向(X軸)に5px、垂直方向(Y軸)に5pxの位置に、5pxぼかした黒色の影をつけています。

<p class="text-shadow-basic">テキストの右下に5pxのぼかした影をつける</p>
.text-shadow-basic {
  padding: 0.5em 10px;
  font-size: 200%;
  color: #ff4400;
  text-shadow: 5px 5px 5px #000;
}

結果的には、テキストの右下に、次のような影を作ることになります。

テキストの右下に5pxのぼかした影をつける

text-shadowを複数重ねて縁取りを再現する

text-shadowは「,（コンマ）」で区切ることで複数重ねて設定できます。また、水平方向(X軸)、垂直方向(Y軸)は、マイナス値を設定することができます。

これらを利用して作った文字の縁取りがこちらです。

text-shadowで文字の縁取り

 <p class="text-border-normal">text-shadowで文字の縁取り</p>
.text-border-normal {
  padding: 0.5em 10px;
  font-size:200%;
  color: #ff6128;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

上下左右に1pxずらした影を、ぼかしの設定をしないで重ねています。
かすれ具合がちょっとだけ気になりますが、それっぽい縁取りが再現できました！

太い縁取りを再現するには、線を少しぼかす必要がある

1pxの細い線だと、上記の方法で文字の縁取りを再現できますが、太い縁取りは、影のカクツキが目立ちます。

以下は、先ほどの縁取りの値が1pxだったのを3pxにした例です。

text-shadowで文字の縁取り（3px）

少し太くしただけでだいぶカクツキが目立ちます、、。この場合、影を多少ぼかす必要があります。
具体的には、次の項目が参考になるかと思います！

文字に太めの縁取りをつける（text-shadow）

こちらが文字に太めの縁取りをつけたデザインです。
文字の影をずらして重ねることで、縁取りを再現しています。影は多少ぼかしています。

文字の縁取り

<p class="text-border">文字の縁取り</p>
.text-border {
  padding: 0.5em 10px;
  color: #795548;
  font-size: 200%;
  font-weight: 900;
  text-shadow: 
    0.05em 0.05em 0.05em #ffeb3b,
    -0.05em -0.05em 0.05em #ffeb3b,
    -0.05em 0.05em 0.05em #ffeb3b,
    0.05em -0.05em 0.05em #ffeb3b;
}

文字の可変に対応したかったので、設定する影の単位はemにしました。ブラウザによってうまくいかない時はpxでの設定がおすすめです。

文字に太めの縁取りをつけて、背景に色を敷く

次は、バックに濃いめの色を敷いたバージョンです。見栄えもそれっぽくなります。

文字の縁取り

<p class="text-border-white background01">文字の縁取り（背景あり）</p>
.text-border-white {
  padding: 0.5em 10px;
  color: #795548;
  font-size: 200%;
  font-weight: 900;
  text-shadow:
  0.05em 0.05em 0.05em #fff,
  -0.05em -0.05em 0.05em #fff,
  -0.05em 0.05em 0.05em #fff,
  0.05em -0.05em 0.05em #fff;
}

.background01 {
  background: #c0beb6;
}

文字をボワッと光らせる（text-shadow）

text-shadowをぼかして重ねると、こんな風に文字が光ったようなデザインが再現できます。

文字がボワっと光る

<p class="text-blur">文字がボワっと光る</p>
.text-blur {
  padding: 0.5em 10px;
  color: #445566;
  font-size:200%;
  font-weight:900;
  text-shadow: 
  0.05em 0.05em 0.05em #fff,
  -0.05em -0.05em 0.05em #fff,
  -0.05em 0.05em 0.05em #fff,
  0.05em -0.05em 0.05em #fff,
  0px 0px 0.3em #ff8367,
  0px 0px 0.3em #ff8367,
  0px 0px 0.3em #ff8367;
}

文字をボワッと光らせて、背景に色を敷く

バックに暗い色を敷くと、さらに光ってる感じが出ます！

文字がボワっと光る

<p class="text-blur  gradation03">文字がボワっと光る</p>
.text-blur {
  padding: 0.5em 10px;
  color: #445566;
  font-size:200%;
  font-weight:900;
  text-shadow: 
  0.05em 0.05em 0.05em #fff,
  -0.05em -0.05em 0.05em #fff,
  -0.05em 0.05em 0.05em #fff,
  0.05em -0.05em 0.05em #fff,
  0px 0px 0.3em #ff8367,
  0px 0px 0.3em #ff8367,
  0px 0px 0.3em #ff8367;
}
.gradation03 {
  background: rgb(37,37,37);
  background: radial-gradient(circle, rgba(37,37,37,1) 0%, rgba(106,106,106,1) 100%);
}

ドロップシャドウ（text-shadow）

text-shadowのぼかし具合で、テキストの右下に影を落としたデザインを再現しました。

ドロップシャドウ

<p class="text-dropshadow">ドロップシャドウ</p>
.text-dropshadow {
  padding: 0.5em 10px;
  color: #ff0010;
  font-size:200%;
  font-weight:900;
  text-shadow: 
	0.05em 0.05em 0.05em #fff,
	-0.05em -0.05em 0.05em #fff,
	-0.05em 0.05em 0.05em #fff,
	0.05em -0.05em 0.05em #fff,
  0.08em 0.08em 0.08em #000;
}

文字の白抜き(text-shadow)

文字の色を白にすれば、簡単に文字の白抜きを再現できます。

文字の白抜き(text-shadow)

<p class="text-outline-shadow">文字の白抜き(text-shadow)</p>
.text-outline-shadow {
  padding: 0.5em 10px;
  color: #fff;
  font-size:200%;
  font-weight:900;
  text-shadow: 
	1px 1px 1px red,
	-1px -1px 1px red,
	-1px 1px 1px red,
	1px -1px 1px red;
}

文字の白抜き(text-stroke)

文字の縁取りといえば、text-strokeプロパティがあります。
こちらはテキストに影をつけるプロパティではなく、文字の輪郭線をつけるプロパティです。

先程、text-shadowで再現した文字の白抜きをtext-strokeで設定したのがこちらです。

文字の白抜き(text-stroke)

<p class="text-outline-stroke">文字の白抜き(text-stroke)</p>
.text-outline-stroke {
    padding: 0.5em 10px;
    color: #fff;
    font-size:200%;
    font-weight:900;
    -webkit-text-stroke: 1px red;
    text-stroke: 1px red;
}

文字の輪郭線をつけるプロパティだけあって、text-shadowより縁取りの再現率が高いのですが、文字の内側に線を引く仕様になっています。

text-shadowで作った白抜きの文字と同じ大きさに設定しているのに、文字が小さく見えるのはその為です。そのため、太い縁取りの再現が難しいです。

こちらのプロパティですが、2022年12月時点では、非推奨となっているようです。

-webkit-text-stroke - CSS: カスケーディングスタイルシート | MDN
-webkit-text-stroke は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ -webkit-text-stroke-width および -webkit-text-stroke-co...
developer.mozilla.org

文字の版ズレ(text-shadow + text-stroke)

非推奨のtext-strokeですが、text-shadowと組み合わせれば面白いデザインが表現できるのでメモしておきます！

文字の版ズレ

<p class="text-slip">文字の版ズレ</p>
.text-slip {
padding: 0.5em 10px;
    color: rgb(255 255 255 / 54%);
    font-size: 200%;
    font-weight: 900;
    text-shadow: 2px 2px 0 rgb(255 0 0 / 52%);
    -webkit-text-stroke: 1px red;
    text-stroke: 1px red;
}

文字にグラデーションをかける(background-clip)

background-clipプロパティは背景の適用範囲を指定できるプロパティです。このプロパティを使えば、背景の適用範囲をテキストに指定することができ、結果的には背景を文字で切り取ることができます。

こちらはゴールドっぽいグラデーションの背景を文字で切り取った例です。

文字にグラデーションをかける

ゴージャスっぽいデザインにしたかったので、フォントを明朝体にしました。

<p class="text-gradation font-min">文字にグラデーションをかける</p>
.text-gradation {
  padding: 0.5em 10px;
  color: #ff0010;
  font-size:200%;
  font-weight:900;
  background: rgb(212,185,40);
  background: linear-gradient(28deg, rgba(212,185,40,1) 0%, rgba(230,223,59,1) 13%, rgba(159,150,37,1) 34%, rgba(218,211,45,1) 55%, rgba(159,150,37,1) 72%, rgba(222,195,35,1) 84%, rgba(205,169,44,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.font-min {
  font-family: 'Noto Serif JP', serif;
}

背景を文字で切り取っているのは、次の部分です。

background-clip: text;
-webkit-background-clip: text;
color: transparent;

設定する時のポイントが2つあります。
まず、background-clipは標準化されていないプロパティなので、Google Chrome、Safari向けのベンダープレフィックス(-webkit)をつける必要があります。

また、文字の色は背景を表示させたいので透明（transparent） にします。

今回は、文字にグラデーションをかけましたが、工夫次第で色々なデザインを再現できそうです！

文字の背景にグラデーションを設定する（その１）

ここからは応用です！
背景にグラデーションを敷けば、こういったデザインが再現できます。

背景にグラデーションをかける（ver01）

<p class="text-dropshadow w100 gradation01 font-min">背景にグラデーションをかける（ver01）</p>
.text-dropshadow {
  padding: 0.5em 10px;
  color: #ff0010;
  font-size:200%;
  font-weight:900;
  text-shadow: 
  0.05em 0.05em 0.05em #fff,
  -0.05em -0.05em 0.05em #fff,
  -0.05em 0.05em 0.05em #fff,
  0.05em -0.05em 0.05em #fff,
  0.08em 0.08em 0.08em #000;
}
.gradation01 {
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,208,144,1) 5%, rgba(255,208,144,1) 15%, rgba(255,208,144,1) 50%, rgba(255,208,144,1) 85%, rgba(255,208,144,1) 95%, rgba(255,255,255,0) 100%);
}
.font-min {
  font-family: 'Noto Serif JP', serif;
}

文字の背景にグラデーションを設定する（その２）

もうひとつのバージョンもメモしておきます。

背景にグラデーションをかける（ver02）

<p class="text-blur gradation02 font-min">背景にグラデーションをかける（ver02）</p>
.text-blur {
  padding: 0.5em 10px;
  color: #445566;
  font-size:200%;
  font-weight:900;
  text-shadow: 
  0.05em 0.05em 0.05em #fff,
  -0.05em -0.05em 0.05em #fff,
  -0.05em 0.05em 0.05em #fff,
  0.05em -0.05em 0.05em #fff,
  0px 0px 0.3em #ff8367,
  0px 0px 0.3em #ff8367,
  0px 0px 0.3em #ff8367;
}
.gradation02 {
  background: rgb(240,214,110);
  background: radial-gradient(circle, rgba(240,214,110,1) 0%, rgba(255,136,0,1) 100%);
}
.font-min {
  font-family: 'Noto Serif JP', serif;
}

まとめ

今回、改めてCSSでの文字の装飾についてまとめました。
CSSでデザインを再現することの利点は、スマホで見ても表示が綺麗、軽い、文字の編集が簡単。というところです。

文字を画像にすると、文字数によってはスマホ用の画像も必要になるので、更新頻度が高いサイトではなかなかの手間になります。

とはいっても複雑なデザインはCSSで再現できないので、今後も必要によっては画像を使用することになるとおもいます。

スポンサーリンク