文字に影をつけたい!CSSのtext-shadowの使い方【初心者向け】

CSSで書くtext-shadowの使い方を初心者向けに紹介しています。テキスト(文字)に影をつけて立体的な表現をする際に使えます。テキストをより目立たせたいという時にぜひ活用してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで書くtext-shadowの使い方について解説しています。

テキスト(文字)に影をつけて、より目出させたりおしゃれに見せたいという方はぜひ使い方を覚えておきましょう。影をつけることでより立体的な見栄えになります。

 

本記事は、TechAcademyのWebデザインオンライン講座のカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はtext-shadowを使ってみよう。

大石ゆかり

田島メンター!!text-shadowは何に使うんですか~?

田島悠介

文字列に影を付けることができるプロパティだよ。影の色や配置も自由に設定することができるんだ。

大石ゆかり

なるほど、お願いします!

 

text-shadowとは

text-shadowプロパティを使用すると、テキストに影をつけることができます。見出しなどに使用することによって印象を変えることができます。

 

text-shadowの書き方

text-shadowは以下のように記述します。

text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;

3つの値と色を指定します。1つ目の値は水平方向(横方向)の距離、2つ目の値は垂直方向(縦方向)の距離、3つ目の値は作成した影のぼかし半径を設定します。色の部分には色コードやカラーネームを入力し、それが影の色になります。

水平方向と垂直方向の値は正の数以外に負の数(マイナス)で設定することができます。正数の場合は水平方向は右に、垂直方向は下に影が付きます。逆に負の数の場合は水平方向は左に、垂直方向は上に影が付きます。

3つ目の値の影のぼかし半径と、4つ目の値の影の色は省略することができます。

,(カンマ)で区切ることによって複数の影を設定することができます。

値をnoneにすると影は表示されません。(初期値)
 

田島悠介

text-shadowの基本の書き方になるよ。

大石ゆかり

水平と垂直を両方使えば、斜め下や斜め上なんかにも指定できますね。

田島悠介

そうだね。次は実際に文字列に影を適用して、どのように見えるか確認してみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にtext-shadowを書いてみよう

縦横の値に正の数を入力した場合

最初の2つの値に両方とも正の数を入力した場合の例です。

以下のHTMLファイルにtext-shadowを適用します。(HTMLとCSSファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です)

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p>横に1px・縦に2px・ぼかし3px・影の色#808080</p>
</body>
</html>

CSS

p {text-shadow: 1px 2px 3px #808080; }

画面ではこのように表示されます。1つ目と2つ目の値の分右と下に影が移動しています。

tsh_p_1

 

縦横の値に負の数を入力した場合

最初の2つの値に両方とも負の数を入力した場合の例です。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p>横に-1px・縦に-2px・ぼかし3px・影の色#808080</p>
</body>
</html>

CSS

p {text-shadow: -1px -2px 3px #808080; }

画面ではこのように表示されます。1つ目と2つ目の値の分左と上に影が移動しています。

1つ目の数値を正の数、2つ目の数値を負の数とするように両方組み合わせることももちろん可能です。

tsh_p_2

 

影を複数指定した場合

次に、複数の影を設定した時の例です。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p>影をふたつ設定した場合</p>
</body>
</html>

CSS

p {font-size:20px; text-shadow: -4px -4px 1px #808080,4px 4px 1px #2e8b57; }

ここでは右下方向と左上方向に2つの色違いの影を指定しています。

画面ではこのように表示されます。「,」で区切って設定した2つの影が同時に適用されています。

tsh_p_3

 

以上、CSSで書くtext-shadowの使い方について解説しました。

テキストのデザインをより豊富にするために覚えておくと良いでしょう。

 

田島悠介

水平方向や垂直方向の距離、値のプラスやマイナスで色々な方向に影をつけることができるんだ。

大石ゆかり

影は色も変えれるし、複数指定することもできるんですね。

田島悠介

また、文字ではなくボックス自体に影を付けるbox-shadowというプロパティもあるよ。これも合わせて覚えておこう。

大石ゆかり

box-shadowの方も調べてみます。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。