問題
2SNSアイコンを作ろう
CSSAnimationの問題に挑戦しよう！
問題
「SNSアイコンを作ろう」
今回はwebサイトでよく見かける
twitterやinstagramのSNSアイコンを表示してみましょう！
外部サイトなどを使用して、アイコンを頑張って表示して見ましょう！
※画像を直で使用するのはNGです。
以下のコードを使ってください。
※twitterの色は#00ACEE、instagramの色は#C51DCD、#FDBA2Eの二色を使ってください。
あらかじめエディタに書くコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<div class="twitter icon"><i class="fab fa-twitter"></i></div>
<div class="instagram icon"><i class="fab fa-instagram"></i></div>
</body>
</html>
¥HTML¥
.icon{
width: 100px;
height: 100px;
display: inline;
cursor: pointer;
}
¥CSS¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
今回はfontawesomeという外部サイトを利用してアイコンを表示しなければなりません。
外部サイトはheadタグの中にlinkタグを作り、linkタグのhrefにサイトのURLを挿入して読み込みます。
fontawesomeのサイトにアクセスし、iconのページから好きなアイコンを検索して、htmlのコードをコピーし、
好きなところに埋め込みます。
次にコードの説明ですが、iタグの色はcolorで変更できます。 twitterは問題ないかと思います。問題はinstagramです。文字にグラデーションをかけるには、
①-webkit-background-clip:text;でbackgroundの適応範囲を文字の中にする。
②-webkit-text-fill-color:transparent;で文字色を透過します。
③backgroundにlinear-gradientを使ってグラディーションの背景にします。
