[18-3] テキストにシャドウをつけよう(text-shadow)

最終更新日:2017年11月01日  (初回投稿日:2011年08月04日)

今回は、テキストにシャドウをつける text-shadowプロパティを使ってみましょう。

CSSプロパティ text-shadow

参考:CSS Text Decoration Module Level 3 | 4. Text Shadows: the ‘text-shadow’ property

本日のINDEX
  1. text-shadowプロパティの値
    1. text-shadow の値は 最低 2つ必要
    2. テキストシャドウの色
    3. テキストシャドウをぼかす半径
  2. 複数のテキストシャドウを指定できます
  3. 疑似要素「::first-letter」「::first-line」にも使えます
  4. デフォルト値「none」で影なしに戻せます

2017年10月:複数のテキストシャドウの構文を追加しました。
● 2017年10月:疑似要素「::first-letter」「::first-line」への適用のサンプルを追加しました。

text-shadowプロパティの値

サンプルファイルでは、アイキャッチ部分の テキストに「テキストシャドウ」を使っています。
(クリックで別ウィンドウでサンプルが開きます)

サンプルファイルの HTML, CSS ソースコードをブラウザで見るには、
[14-1] ブラウザでソースを表示する を参考にしてください。

サンプルのテキストシャドウのCSSの指定はこのようにしています。

#eyeCatcher {
	width:100%;
	height:100%;/*for Old*/
	height:100vh;
	display:table;
	text-align:center;
	color:white;
	text-shadow: 0 -0.04em 0.01em #cd98b9
	}

ここでは、水平方向へは0、上へ 0.04em の位置に、0.01emの幅でぼかし、色は #cd98b9(ピンク系)です。4つの値を使っていますね。

「em」などの単位については、
【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)
色指定については、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)
をご覧ください。

では、text-shadowプロパティの値のルールを見ていきましょう。

text-shadow の値は 最低 2つ必要

text-shadowプロパティは、最低限 2つの値が必要です。
1つ目の値は、水平方向のオフセット(ずらす距離)
2つ目の値は、垂直方向のオフセット です。
単位を付けた数値で「距離(長さ)」を指定します。

シャドウの色はデフォルトで文字色(colorプロパティの値)です。

Sample
#sample {
	color:#0cf;
	font-size:40px;
    font-weight:bold;
	text-shadow:2px 5px;
    }

テキストシャドウの色

シャドウの色が文字色と同じなので、どんなシャドウだかわかりませんね。
色指定の値は、「水平オフセット・垂直オフセット」のセットの前か後ろに入れます。
(ボックスシャドウのルールと同じです)

Sample
#sample {
	color:#0cf;
	font-size:40px;
    font-weight:bold;
	text-shadow:2px 5px #999;
    }

「水平オフセット・垂直オフセット」は、マイナスの値も使えます
オフセットをマイナスにすれば、左側や上へシャドウをつけることができます。

Sample
#sample {
	text-shadow:-2px -5px #999;
    }

テキストシャドウをぼかす半径

「水平オフセット・垂直オフセット」のセットの後に「ぼかす半径」を入れます。

この 3つの並び方は絶対不動。この順番で決まっています。
1水平オフセット 2垂直オフセット 3ぼかし半径

このうち必須なのは、1水平オフセット 2垂直オフセット

3ぼかし半径 は、無くてもいいけど、入れるなら必ずこの順。

色指定の値は、この「水平オフセット・垂直オフセット・ぼかし半径」のセットの前か後ろに入れます。

Sample
#sample {
	text-shadow:#999 2px 5px 2px;
    }

複数のテキストシャドウを指定できます

「水平オフセット・垂直オフセット・ぼかし半径」+「色指定」のセットを「,(カンマ)」で区切ることで、複数のテキストシャドウを指定できます。
(ボックスシャドウは「2つまで」でしたが、テキストシャドウは数に制限はありません)

Sample
#sample {
   text-shadow:3px 5px 2px #666, 6px 10px 2px #9c9, -3px -5px 2px pink;
   }

ちょっと立体的な表現も、複数のシャドウがあれば簡単ですね。

Sample
#sample {
   background-color:#0cf;
   color:#0cf;
   text-shadow:-1px -1px white,0 1px #666
   }

疑似要素「::first-letter」「::first-line」にも使えます

text-shadowプロパティは、
疑似要素「::first-letter」(最初の一文字)
疑似要素「::first-line」(最初の一行)
にも使えます。

First-letter

HTMLはこちら。

<div id="smple1">First-letter</div>

CSSはこちら。

#smple1 {
	color:#0cf;
	margin:1em 0 0;
	font-size:40px;
	font-weight:bold;
	line-height:40px;
	}
#smple1::first-letter {
	padding:.1em .4em;
	background:#0cf;
	border-radius:50%;
	text-shadow:-1px -1px white,0 1px #666
	}
First-line で、テキストの1行目のスタイルを指定できます。
このテキストはダミーテキストです。First-line は、テキストコンテンツの1行目のスタイルを指定できます。このテキストはダミーテキストです。

HTMLはこちら。

<div id="smple2">
First-line で、テキストの1行目のスタイルを指定できます。<br>
このテキストはダミーテキストです。First-line は、.... 
</div>

CSSはこちら。

#smple2 {
	border:dotted 1px #CCC;
	padding:.7em;
	}
#smple2::first-line {
	color:#825726;
	font-weight:bold;
	text-shadow:2px 2px 1px #ccc
	}

デフォルト値「none」で影なしに戻せます

text-shadowプロパティ「none」を指定してあげれば、影なしに戻ります。

	text-shadow: none;

次回予告

いかがでしたか?
text-shadowプロパティは、box-shadowプロパティとよく似ていて、「拡張の半径」と「inset」が無いだけです。覚えやすいですね。

次回は、円形(放射状)グラデーションをやってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.