CSS text-shadow（テキストシャドウ）の使い方を徹底解説！基本構文から複数の影まで

要素に影を加えることは、魅力的なヘッダーを作り上げるための重要な要素のひとつです。たとえばWebサイトをデザインするとき、ページ内の他の見出しテキストとの差をつけるために、すべてのトップヘッダーに影を付けたいと思うことがあるでしょう。

そんなときに活躍するのが、CSSのtext-shadowプロパティです。text-shadowプロパティを使うと、テキスト要素に影の効果を簡単に追加できます。この記事では、具体的なコード例とともに、テキストシャドウの基礎知識と、text-shadowプロパティを使ってWebページ上のテキストに影を付ける方法を詳しく解説します。

CSSテキストシャドウとは

影は、Webページ上の要素を目立たせるための効果的な手段のひとつです。たとえば、緑色の影が付いた一行のテキストは、ごく普通の黒いテキストよりもユーザーの目を引きやすいものです。

text-shadowプロパティを使うと、CSSでテキスト要素の周囲に影を追加できます。見出し（h1〜h6）や段落テキストなど、HTMLのあらゆるテキストベースの要素に適用可能です。

text-shadowプロパティの基本構文は次のとおりです。

text-shadow: offset-x offset-y blur-radius color;

この構文は、ボックス形式のHTML要素に影を付けるbox-shadowプロパティとよく似ています。box-shadowについてさらに詳しく知りたい方は、CSS box-shadowの入門ガイドも参考にしてください。

各値の意味は以下のとおりです。

offset-x：影の横方向（X軸）のオフセット（必須）
offset-y：影の縦方向（Y軸）のオフセット（必須）
blur-radius：影のぼかし効果の半径（任意）
color：影の色。デフォルトは黒（任意）

それでは、実際のコード例を見ながら、text-shadowプロパティの使い方を学んでいきましょう。この記事では、次のHTML要素を使用します。

<html>
<h1>Career Karma</h1>
<style>
h1 {
	color: lightblue;
}
</style>
</html>

このコードを実行すると、画面には「Career Karma」というテキストを持つh1要素が表示されます。h1はHTMLでサポートされている最大サイズの見出し要素です。CSSではcolorプロパティにlightblueを指定しているため、見出しは薄い水色のテキストとして表示されます。

基本的なテキストシャドウ

text-shadowプロパティを使ううえで必須の値は、offset-xとoffset-yの2つだけです。この2つを指定するだけで、横方向と縦方向にずれた影を持つテキストを作成できます。

両方の値を指定した例がこちらです。

<html>
<h1>Career Karma</h1>
<style>
h1 {
	text-shadow: 1px 1px;
}
</style>
</html>

このコードでは、見出しにシンプルなテキストシャドウを適用しています。影は横方向・縦方向ともに1pxずつオフセットされています。実行結果を見ると、テキストの下にわずかな黒い影が付いているのがわかるでしょう。影のデフォルトカラーは黒です。

影の色を指定する

テキストシャドウをデザインする際、デフォルトの黒ではなく独自の色を指定したい場合があるでしょう。そのときに使うのがcolorの値です。

たとえば、影をピンク色にしたい場合は、次のようにコードを書きます。

<html>
<h1>Career Karma</h1>
<style>
h1 {
	text-shadow: 1px 1px pink;
}
</style>
</html>

ここではcolorの値にpinkを指定しました。これにより、テキストの下にピンク色の影が表示されます。最初の例と同様に、影は横・縦ともに1pxずつオフセットされています。

ぼかしのある影を作る

text-shadowプロパティは、blur-radius（ぼかし半径）と組み合わせることで、輪郭がぼやけた柔らかい影を作ることもできます。

たとえば、横・縦ともに3pxオフセットされ、周囲に2pxのぼかし効果を持つ影を作りたい場合は、次のようなコードになります。

<html>
<h1>Career Karma</h1>
<style>
h1 {
	text-shadow: 3px 3px 2px pink;
}
</style>
</html>

実行結果を見ると、影が両軸とも3pxオフセットされ、ぼかし効果に囲まれているのがわかります。ぼかしを強めたい場合は、blur-radiusの値を大きくしましょう。5pxや10px、あるいはそれ以上の値を設定すれば、よりぼんやりとした影になります。この例では、影の色はピンクです。

複数の影を追加する

ここまで、text-shadowプロパティを使ってテキストに1つの影を付ける方法を見てきました。しかし、text-shadowプロパティは、1つのテキスト要素に複数の影を追加することもできます。

複数の影を追加するには、カンマ区切りのリストとして影を指定します。構文は次のとおりです。

text-shadow: shadowOne, shadowTwo;

カンマで区切られていれば、好きな数だけ影を指定できます。ただし、各影のoffset-xとoffset-yの値は徐々に大きくしていく必要があります。そうしないと、影同士が重なり合って正しく表示されないことがあります。

また、影は指定された順番に描画されます。つまり、shadowOneが先に、shadowTwoが後に表示されます。

それでは、テキストの背後にピンクとオレンジの2つの影を持つテキストバナーを作ってみましょう。次のようなコードを使用します。

<html>
<h1>Career Karma</h1>
<style>
h1 {
	text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}
</style>
</html>

このコードでは2つの影を指定しています。それぞれの影に設定した値は以下の表のとおりです。

プロパティ名	影1	影2
offset-x	3px	6px
offset-y	3px	6px
blur-radius	2px	5px
color	pink	orange

このように、それぞれ異なる値を持つ2つの影を1つのテキストに重ねて表示することができました。

まとめ

text-shadowプロパティは、HTMLのテキストに影を追加するためのプロパティです。見出しや段落など、テキストベースのあらゆる要素に適用できます。

この記事では、具体例を交えながら、テキストシャドウの基礎と、text-shadowプロパティを使ったカスタムシャドウの作成方法を解説しました。これであなたも、プロのWebデザイナーのように、自分だけのCSSテキストシャドウをデザインできるはずです。ぜひ実際のサイト制作で試してみてください！

CSSのtext-decorationプロパティ徹底解説！テキスト装飾の基本と実践例

CSSメディアクエリ

CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説
CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色）テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔）文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行
CSSのシャドウ効果とは？text-shadowとbox-shadowの使い方を解説
Webページに立体感や奥行きを加えたいときに便利なのが、CSSのシャドウ（影）効果です。CSSでは、text-shadowプロパティを使ってテキストに影を付け、box-shadowプロパティを使って要素（ボックス）に影を付けることができます。 text-shadowプロパティとは text-shadowは、文字に影を付けるためのプロパティです。「影の色」「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」を指定することで、柔らかい影からくっきりした影まで自由に表現できます。 box-shadowプロパティとは box-shadowは、divなどのボックス要素全体に影を付けるプロ