webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

cssで縁取り文字をつくる

縁取り文字
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

縁取りの文字をつくるよ!

今日はこんな縁取り文字をcssで作ってみます。

縁取り文字を作るプロパティ

text-stroke

text-strokeを使います。

今年もあと少し

<p class="fuchidori">今年もあと少し</p>
.fuchidori {
	color: #fff;
	-webkit-text-stroke: 1px #000;
	text-stroke: 1px #000;
	font-weight: bold;
	font-size: 3em;
}

text-strokeは縁取り文字を作れますが、IEには対応していません。(でももうIE対応してなくても良いと思います)

ただ、このプロパティは標準ではないようなので、あまり使わないようにとは書いてあります。

MDN Web Docs

使うときはしっかり確認をしてくださいねキラキラ

“出なくてもまぁいいだろう”という感じなら使っても良いかもですね。

SVGを使う

SVGを使うと堂々と縁取り可能です

次はうさぎ年
<svg width="300" height="40" viewBox="0 0 300 40">
  <text x="0" y="30">次はうさぎ年</text>
</svg>
text {
  font-size: 35px;
  font-weight: bold;
  stroke: gray;
  fill: #fff;
}

strokeが縁で、fillは塗りつぶしです。

svgの<text>で文字を書いて、cssプロパティのstrokeとfillを使って縁取り文字を作りましょうわたし

こんなのもできる!

こんなのもできる
<div class="p1">
 <svg class="text2" width="300" height="40" viewBox="0 0 300 40">
  <text x="0" y="30" font-size="35">こんなのもできる</text>
 </svg>
</div>
.p1 {
	position: relative;
}
.p1::after {
	content: "こんなのもできる";
	line-height: 1;
	z-index: -1;
	font-size: 35px;
	font-weight: bold;
	position: absolute;
	top: .04em;
	left: .04em;
	color: hotpink;
	display: block;
}

推しの::afterを使って文字をもう1つ作って、下から重ねています。

テキストシャドウで何とかなるかもですが擬似要素を使う方が確実だと思います

こんなのもできる
text {
  fill:transparent;
}

textfillを透明にしたらこんな風に可愛くもできます。

ただこれだと文字が変わるたびに毎回contentの中身を書き換えないといけないというデメリットはありますね。

避けようと思ったらやっぱりテキストシャドウを使ってなんとかした方が良いですね。

うーん見出しとかだったら2つ出力してもいいかも?

例えば、

<h2>タイトル<span>タイトル</span></h2>

みたいな感じで2回出るようにしておいて、spanの方をposition: absoluteで移動させるとかどうでしょうかね

まぁまた何か思いついたら追記しますね

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード cssで縁取り文字をつくる

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)