ログイン
問題39

文字に影をつけてみよう

この問題では、文字に影を付ける方法を学習します。画像やボックスなど影を付ける場合は、box-shadowプロパティを使用しました。今回は文字に対して影を付ける方法について学んでいきます。

アイコン画像

問題39:文字に影をつけてみよう

文字に影をつけてみましょう!

見本画像を参考にして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」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる