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

最終更新日:2017年10月16日  (初回投稿日: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
<div id="smple1">First-letter</div>
#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行目のスタイルを指定できます。このテキストはダミーテキストです。
<div id="smple2">
First-line で、テキストの1行目のスタイルを指定できます。<br>
このテキストはダミーテキストです。First-line は、.... 
</div>
#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」が無いだけです。覚えやすいですね。

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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