文字に影をつけたい！CSSのtext-shadowの使い方【初心者向け】現役Webデザイナーが解説
CSSで書くtext-shadowの使い方を初心者向けに紹介しています。テキスト(文字)に影をつけて立体的な表現をする際に使えます。テキストをより目立たせたいという時にぜひ活用してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで書くtext-shadowの使い方について解説しています。
テキスト(文字)に影をつけて、より目立たせたりおしゃれに見せたいという方はぜひ使い方を覚えておきましょう。
影をつけることでより立体的な見栄えになります。
目次
text-shadowとは
text-shadowプロパティを使用すると、テキストに影をつけることができます。
見出しなどに使用することによって印象を変えることができます。
今回はtext-shadowを使ってみよう。
田島メンター！！text-shadowは何に使うんですか～？
文字列に影をつけることができるプロパティだよ。
影の色や配置も自由に設定することができるんだ。
なるほど、お願いします！
text-shadowの書き方
text-shadowは以下のように記述します。
text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;
3つの値と色を指定します。
1つ目の値は水平方向(横側)の距離、2つ目の値は垂直方向(縦側)の距離、3つ目の値は作成した影のぼかし半径を設定します。
色の部分には色コードやカラーネームを入力し、それが影の色になります。
水平方向と垂直方向の値は正の数以外に負の数(マイナス)で設定することができます。
正数の場合は水平方向は右に、垂直方向は下に影が付きます。
逆に負の数の場合は水平方向は左に、垂直方向は上に影が付きます。
3つ目の値の影のぼかし半径と、4つ目の値の影の色は省略することができます。
,(カンマ)で区切ることによって複数の影を設定することができます。
値をnoneにすると影は表示されません。(初期値)
text-shadowの基本の書き方になるよ。
水平と垂直を両方使えば、斜め下や斜め上なんかにも指定できますね。
そうだね。
次は実際に文字列に影を適用して、どのように見えるか確認してみよう。
実際に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; }
表示結果
解説
cssのpは、htmlの
<p>横に1px・縦に2px・ぼかし3px・影の色#808080</p>
で囲まれた範囲を指定しています。
次のコードで具体的に影の指定を行っています。
text-shadow: 1px 2px 3px #808080
text-shadow:で影の指定を開始しています。
1pxで横側に影を1px生成しています。
影を付ける前に比べて影が右に生成されました。
2pxで縦側に影を2px生成しています。
影を付ける前に比べて影が下に生成されました。
3pxでぼかしを3px生成しています。
#808080;で影の色を#808080;の色にしています。
実行画面
縦横の値に負の数を入力した場合
最初の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; }
表示結果
解説
cssのpは、htmlの
<p>横に-1px・縦に-2px・ぼかし3px・影の色#808080</p>
で囲まれた範囲を指定しています。
次のコードで具体的に影の指定を行っています。
text-shadow: -1px -2px 3px #808080
text-shadow:で影の指定を開始しています。
-1pxで横側に影を-1px生成しています。
影を付ける前に比べて影が左に生成されました。
-2pxで縦側に影を-2px生成しています。
影を付ける前に比べて影が上に生成されました。
今回はどちらも負の数を指定しましたが、1つ目の数値を正の数、2つ目の数値を負の数とするように両方組み合わせることももちろん可能です。
3pxでぼかしを3px生成しています。
#808080;で影の色を#808080;の色にしています。
実行結果
影を複数指定した場合
次に、複数の影を設定した時の例です。
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; }
表示結果
解説
cssのpは、htmlの
<p>影をふたつ設定した場合</p>
で囲まれた範囲を指定しています。
次のコードで具体的に影の指定を行っています。
font-size:20px; text-shadow: -4px -4px 1px #808080,4px 4px 1px #2e8b57
font-size:20px;で文字の大きさを20pxにしています。
text-shadow:で影の指定を開始しています。
今回は２種類色違いの影の指定をしています。
１種類目の影の指定は、次のコードで具体的に行っています。
-4px -4px 1px #808080,
-4pxで横側に影を-4px生成しています。
影を付ける前に比べて影が左に生成されました。
-4pxで縦側に影を-4px生成しています。
影を付ける前に比べて影が上に生成されました。
1pxでぼかしを1px生成しています。
#808080,で影の色を#808080の色にしています。
これで１種類目の影の指定が終わりました。
１種類目と２種類目の指定のなかで、次のように,を記載している箇所があります。
#808080,4px
#808080は１種類目の最後の指定で、影の色を指定しています。
4pxは２種類目の影の横側の指定で、右に影を生成しています。
この１種類目と２種類目の指定値の間に、,（カンマ）を入れることで複数の指定を行うことが可能です。
２種類目の影の指定は、次のコードで具体的に行っています。
4px 4px 1px #2e8b57
4pxで横側に影を4px生成しています。
影を付ける前に比べて影が右に生成されました。
-4pxで縦側に影を4px生成しています。
影を付ける前に比べて影が下に生成されました。
1pxでぼかしを1px生成しています。
#2e8b57;で影の色を#2e8b57;の色にしています。
これで２種類目の影の指定が終わりました。
実行結果
以上、CSSで書くtext-shadowの使い方について解説しました。
テキストのデザインをより豊富にするために覚えておくと良いでしょう。
水平方向や垂直方向の距離、値のプラスやマイナスで色々な方向に影をつけることができるんだ。
影は色も変えれるし、複数指定することもできるんですね。
また、文字ではなくボックス自体に影を付けるbox-shadowというプロパティもあるよ。
これも合わせて覚えておこう。
box-shadowの方も調べてみます。
ありがとうございました！
【動画でも解説しています。クリックで見る！】
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。 |
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
