SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2022.06.03
  • CATEGORY
TITLE

【CSS】text-shadowの使い方、縁取りを実装してみよう!!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】縁取りを実装してみよう、text-shadowについて!!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • CSSについて学びたい方へ
  • 今回はtext-shadow(テキストに影)を指定して縁取りを作成します。

今回は、text-shadow PART02についての解説になります。
text-shadowとは、テキストに対して影を追加できます。
box-shadowとは、要素に対して影を追加できます。

PART01では、text-shadowの使い方を解説しております。
一度、こちらの「text-shadowを解説! テキストに影をつけよう!」をご確認しPART02にいきましょう。

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

縁取り文字について

縁取り文字について

今回は、text-shadowを使い、縁取り文字(袋文字)を作成します。
画像を使わず、CSSで「縁取り文字」を実装したいおもいます。
書き方は以下のようになります。

<div class="box">
	<ul>
    <li><a href="#"><span>HOME</span></a></li>
    <li><a href="#"><span>ABOUT</span></a></li>
    <li><a href="#"><span>NEWS</span></a></li>
    <li><a href="#"><span>CONTACT</span></a></li>
	</ul>
</div>
.box {
	width: 100%;
	margin: 0 auto;
	padding: 4em;
	box-sizing: border-box;
	background-color: #5c87a6;
	text-align: center;
}

ul li {
	font-size: 3rem;
	letter-spacing: .1em;
	text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
	font-style: italic;
	font-family: Arial;
	font-weight: bold;
	list-style: none;
}
	
ul li a {
	color: #5c87a6;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
	text-decoration: none;
}
	
ul li a:hover {color: #fff;}

上記のようなCSSになります。
「水平方向 垂直方向 ぼかす半径 色」の組み合わせになります。

要素 {text-shadow: 水平方向 垂直方向 ぼかす半径 色};
指定できる値
  • 長さ(水平方向 垂直方向)
    none 影を追加しません。
    数値と単位 「4px」のように影の長さを数値と単位で指定できます。
    「4px 5px」のように半角スペースで区切ると「水平方向 垂直方向」に指定ができます。
    マイナスの値も可能
  • ぼかす半径
    数値と単位 「5px」のように影のぼかしを数値と単位で指定できます。
  • カラー キーワード、またはカラーコードを指定します。

hover(ホバー)に縁取り文字を適用させる

上記の解説にプラスになりますが、
liに対して指定していた、text-shadowhoverに指定します。
書き方は以下のようになります。

<div class="box">
	<ul>
    <li><a href="#"><span>HOME</span></a></li>
    <li><a href="#"><span>ABOUT</span></a></li>
    <li><a href="#"><span>NEWS</span></a></li>
    <li><a href="#"><span>CONTACT</span></a></li>
	</ul>
</div>
.box {
	width: 100%;
	margin: 0 auto;
	padding: 4em;
	box-sizing: border-box;
	background-color: #5c87a6;
	text-align: center;
}

ul li {
	font-size: 3rem;
	letter-spacing: .1em;
	font-style: italic;
	font-family: Arial;
	font-weight: bold;
	list-style: none;
}
	
ul li a {
	color: #fff;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
	text-decoration: none;
}
	
ul li a:hover {
    color: #5c87a6;
	text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
}

注意点について

日本語ではあまり使用しないこと
日本語はひらがな・カタカナ・英数・記号、漢字が存在します。
また、「はね・とめ」があるため、影に少しズレが生じる可能性があります。

細字、小さい文字サイズでは使用しないこと
細字、小さい文字サイズに指定すると、文字が潰れたり、縁が崩れて見えてしまう恐れがあります。
大きい見出しなど強調する部分に指定するようにしましょう。

2px以上の縁文字はオススメしません。
1pxの指定はそこまでコードが長くはなりませんが、2px以上の場合はコードが倍以上長くなります。
また、影の重なりが多くなるため、一部が濃くなる場合があるので注意が必要です。
書き方は以下のようになります。

/*--一部省略--*/
ul li {
   	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
  }

まとめ

今回はこれで以上です。

POINT
  • text-shadowとはテキストに対して影を追加できます。
  • box-shadowとは、要素に対して影を追加できます。
  • ①長さ(水平方向 垂直方向) ②ぼかす半径 ③色の順に指定をおこないます。
  • 注意ポイント01: 日本語ではあまり使用しないこと
  • 注意ポイント02: 細字、小さい文字サイズでは使用しないこと
  • 注意ポイント03: 2px以上の縁文字はオススメしません。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top