文字に影をつけたい！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の方も調べてみます。
ありがとうございました！
【動画でも解説しています。クリックで見る！】
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。 |
[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
