問題
39文字に影をつけてみよう
この問題では、文字に影を付ける方法を学習します。画像やボックスなど影を付ける場合は、box-shadowプロパティを使用しました。今回は文字に対して影を付ける方法について学んでいきます。
HTML_CSSの問題に挑戦しよう！
問題
「文字に影をつけてみよう」
文字に影をつけてみましょう!
見本画像を参考にしてCSSに記述してください。
あらかじめエディタに書くコード
<p style="color:red;font-size:24px;font-weight:bold;">この文字にテキストシャドーをつけてみよう!</p>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
文字に影をつける為には、
text-shadowというプロパティを付与します。
使用する際は以下のように記述します。
text-shadow:水平方向の距離, 垂直方向の距離, 影のぼかし半径, 影の色
補足
text-shadowは見出しなど強調したい部分に使用すると効果的です。
ただ影をつけるだけではなく、影の距離感やぼかし具合、影の色まで細かく指定することができます。
また、text-shadowはカンマ「,」で区切ることでひとつの文字に対して複数の影を付けることもできます。
例えば、「text-shadow:2px 2px 0 #93f, 3px 3px 0 #00d」のように指定すると、2色の色が入り混じった立体的なデザインを作り上げることができます。
他にも少し窪んだような文字表現など、様々な表現ができるようになります。
色々試してみたい場合は「text-shadowジェネレーター」と検索すると便利なツールが出てくるので使ってみてください。
