ほんっとにはじめてのHTML5とCSS3：[18-3] テキストにシャドウをつけよう（text-shadow）

[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

● 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つの並び方は絶対不動。この順番で決まっています。
１水平オフセット　２垂直オフセット　３ぼかし半径

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

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

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

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」が無いだけです。覚えやすいですね。

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

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。