ログイン

問題39 テキストに影をつけよう

HTML_CSSの問題

HTML_CSS

テキストに影を付ける問題です。初級参ではブロックに影を付ける問題がありましたが、今回はテキストに対して影を付けます。チャレンジしてみましょう。

テキストに影をつけよう

問題

テキストに影をつけてみましょう!

見本画像を参考にしてCSSに記述し実装してください。

自分の環境に書くコード

              <p style="color:red;font-size:24px;font-weight:bold;">この文字にテキストシャドーをつけてみよう!</p>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <p style="color:red;font-size:24px;font-weight:bold;">この文字にテキストシャドーをつけてみよう!</p>
¥HTML¥
            
              p {
    text-shadow: 5px 5px 5px #000;
}
¥CSS¥
            
答えのアイコン

解説

テキストに影をつける為には、
text-shadowというプロパティを付与します。

使用する際は以下のように記述します。

text-shadow:水平方向の距離, 垂直方向の距離, 影のぼかし半径, 影の色
ログインして解答を見る
見出しなど強調したい場所で使用すると少し印象が変わります。
text-shadowプロパティはただ影を表示するだけではなく、影の距離感やぼかし具合、影の色まで細かく指定することができます。
また、text-shadowはカンマ「,」で区切ることでひとつの文字に対して複数の影を付けることもできます。
例えば、「text-shadow:2px 2px 0 #93f, 3px 3px 0 #00d」のように指定すると、2色の色が入り混じった立体的なデザインを作り上げることができます。
他にも少し窪んだようなテキストの表現や、ネオン風な見た目など色々な思いのほか表現の幅が広いプロパティです。
素早く色々試したい場合は「text-shadowジェネレーター」と検索すると便利なツールが出てくるので使ってみてください。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!