SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.31
  • CATEGORY
TITLE

【CSS】text-shadowを解説! テキストに影をつけよう!

SHU[シュウ]

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

シュウ
シュウ
今回は【CSS】text-shadowを解説! テキストに影をつけよう!
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • text-shadowの使い方について学びたい方へ
  • 今回はtext-shadow(影)の指定方法についての記事になります

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

以前、box-shadowについての解説記事を書きましたので、
一度こちらの記事で理解度を深めておきましょう。

box-shadowの記事

box-shadowの基本的な使い方についての記事になります。

text-shadowについて

text-shadowについて

text-shadowとは、テキストに対して影を追加できます。
書き方は以下のようになります。

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

ポイント!
text-shadowで指定する際には必ず半角スペースで区切りを入れて指定しましょう!

text-shadow指定方法について

text-shadow指定方法について

ここから、指定方法について解説していきます。

水平方向 垂直方向のみでの影の指定方法

「赤色」では、水平方向 垂直方向共に「3px」を指定し、右方向に影が伸びます。
「青色」では、水平方向 垂直方向共に「-3px」を指定し、左方向に影が伸びます。
ただし、ぼかしの値、カラーの値を入力しないと文字が見えづらいので必ず、ぼかしの値、カラーの値を入力しましょう。

水平方向 垂直方向のみでの指定

赤色とは

青色とは

<p class="text-shadow01">赤色とは</p>
<p class="text-shadow02">青色とは</p>
/*--赤色--*/
.text-shadow01 {text-shadow: 3px 3px;}

/*--青色--*/
.text-shadow02 {text-shadow: -3px -3px;}

ぼかしの指定方法

「赤色」では、ぼかしの値「3をpx」を指定しています。
「青色」では、水平方向、垂直方向それぞれ影の値を0にし全体のぼかしの値「20px」に指定しています。
数値の値が大きいほど影のぼかしが強くなります。

ぼかしの指定

赤色とは

青色とは

<p class="text-shadow03">赤色とは</p>
<p class="text-shadow04">青色とは</p>
/*--赤色--*/
.text-shadow03 {text-shadow: 3px 3px 3px;}

/*--青色--*/
.text-shadow04 {text-shadow: 0px 0px 20px;}

カラーの指定方法

「赤色」では、色の値「red キーワード」を指定しています。
「青色」では、色の値「#1362b7 カラーコード」を指定しています。
「緑色」では、色の値「rgba(19,183,38,0.5) 透明度」を指定しています。

カラーの指定

赤色とは

青色とは

緑色とは

<p class="text-shadow05">赤色とは</p>
<p class="text-shadow06">青色とは</p>
<p class="text-shadow07">緑色とは</p>
/*--赤色--*/
.text-shadow05 {text-shadow: 3px 3px 3px red;}

/*--青色--*/
.text-shadow06 {text-shadow: 3px 3px 3px #1362b7;}

/*--緑色--*/
.text-shadow07 {text-shadow: 3px 3px 3px rgba(19,183,38,0.5);}

覚えておきましょう!
rgba(数値01,数値02,数値03,透明度)
数値01にはredの赤の数値、数値02にはgreenの緑の数値、数値03にはblueの青の数値

数値についてはrgb(「0~255」,「0~255」,「0~255」)になります。
透明度については0(透明)~1(不透明)になります。

複数の影を指定する方法

影はカンマ(,)で区切る事で複数指定できます。
複数指定する事で、影の方向、ぼかし、カラーの複数の指定も可能です。
右方向に「#fff(白)」、左方向に「rgba(0,0,0,0.5)(黒)」の指定をしています。

個人的な意見になりますが、日本語に影を複数した場合は、見えにくくなります。
複数指定する場合は、英語または数字の場合をおすすめします。

複数の影を指定する方法

COLOR

<p class="text-shadow08">COLOR</p>
/*--赤色--*/
.text-shadow08 {
	color: #fd5e5a;
	text-shadow:  4px 3px 4px #fff, -9px -8px 4px rgba(0,0,0,0.5);
}

ボタンにぼかしをいれる

最後にbox-shadowを指定しボタンのデザインをしております。
ご参考程度に

rgbaを指定し「ぼかし」のようなボタンにします。
box-shadowでの水平方向、垂直方向、影のぼかし、色(rgba)の4種のみでの指定になります。

ぼかしのボタン

<a href="#" class="btn01">ボタン</a>
.btn01 {
	padding: 20px 100px;
	display: inline-block;
	color: #333;
	text-decoration :none;
	text-align: center;
	background: #ffbf4b;
	transition: .4s;
	
	/*--水平方向 垂直方向 影のぼかし 色--*/
	box-shadow: 10px 10px 10px rgba(0,0,0,0.3);  
	
	/*--角丸指定--*/
	border-radius: 100vh;
}

.btn01:hover {

	/*--水平方向 垂直方向 色--*/
	box-shadow: 0 0 10px rgba(0,0,0,0);
}

box-shadowの記事

【コピペ】で簡単にできるボタンデザインのご紹介

まとめ

今回はこれで以上です。

POINT
  • text-shadowとはテキストに対して影を追加できます。
  • box-shadowとは、要素に対して影を追加できます。
  • ①長さ(水平方向 垂直方向) ②ぼかす半径 ③色の順に指定をおこないます。
スポンサーリンク

SHU

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

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top