CSS text-shadowの使い方 テキスト文字に影をつける方法

CSS

【CSS text-shadowの使い方】文字に影を付ける方法

2022年6月28日

今回はテキスト文字に影(シャドウ)を付ける事ができるCSSプロパティ「text-shadow」の使い方を解説していきます。

 
text-shadowプロパティの使用例

 

 

text-shadowでテキストに影をつける方法

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

下記は、h1タグにtext-shadowで影をつけた例です。

text-shadowプロパティ1、2つ目の値を指定して影の位置を調節している例
 

text-shadowを実際によく使う例としては、例えば、下記のような黒い背景画像に白色の影をつけたり、逆に白い背景に黒色の影をつけたすることが多いです。

text-shadowプロパティの使用例

text-shadowを使用していない・いる場合の比較図

 

text-shadowプロパティの使い方

ここからはtext-shadowプロパティの使い方について詳しく解説していきます。

text-shadowプロパティには合計で4つの値を半角スペースで区切って指定することができ、それぞれの値の意味は以下の通りとなっています。

text-shadowプロパティで指定できる4つの値の意味

 

1・2つ目の値:影の位置を決める

まず1つ目と2つ目の値には、影の位置を決める指定をします。

なお1つ目の値が水平方向(左右)の影の位置を調整する値で、2つ目の値が垂直方向(上下)の影の位置を調整する値になります。

text-shadowプロパティ1、2つ目の値を指定して影の位置を調節している例

なお上の例ではどちらも正の数値を指定している為、右下方向に影が付いていますが、こちらに負の値を指定すると影の位置を反転させて、左上方向に影をつける事が可能です。

負の値を入力して影の位置を反転させている例

 

3つ目の値:影のぼかし具合を決める(省略可能)

3つ目の値には、影のぼかし具合を決める指定をします。

こちらは省略可能な値で、何も指定していない場合はぼかしのないクッキリとした影が表示されますが、正のpx値を指定することで数値が大きければ大きいほどぼんやりとした影にする事が可能です。

3つ目の値を指定して影をぼかしている例

 

4つ目の値:影の色を決める(省略可能)

4つ目の値には、影の色を決めるカラー名やカラーコードを指定します。

こちらも省略することは可能ですが、省略した場合はデフォルトで黒色の影が表示されてしまい文字色と被ってしまうので、基本的には指定する事の方が多いかと思います。

4つ目の値を指定して影に色を付けている例

 

 

テキストに複数の影を指定する方法

text-shadowで複数の影を指定するといった使い方もできます。

こちらは以下のようにテキストシャドウの1つの指定のかたまりをカンマで区切って複数指定してあげることで、複数のテキストシャドウを指定してあげることが可能です。

■(参考)異なる色の影をズラして付けている例

テキストに2つの異なる色の影を付けている例
 

下記は、正の値(右下)に影をつけ、かつ負の値(左上)に影をつけた例です。白色文字ですが、影をつけることで縁ができて文字が見えます。

text-shadowを二つつけた例。

 

まとめ

まとめです。今回は文字に影を付ける事ができるCSSプロパティ「text-shadow」の使い方について解説しました。

text-shadowプロパティで指定できる4つの値の意味

text-shadowプロパティを使うことで、黒色背景や白色背景の中でも文字を目立たせたり、文字の雰囲気を変えることが可能になりますのでぜひ覚えてみてください。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS