ログイン

問題2 snsアイコンを作ろう

CSSAnimationの問題

CSSAnimation

snsアイコンを作ろう

問題

今回はwebサイトでよく見かける
twitterやinstagramのアイコンを表示してみましょう!
外部サイトなどを使用して、アイコンを頑張って表示して見ましょう!
※画像を直で使用するのは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¥
            

期待する画面

コードのアイコン

解答ソースコード

              .twitter{
  color: #00ACEE;
}
.instagram i{
  background: linear-gradient(to bottom left,#C51DCD,#FDBA2E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon:hover i{
  transform: scale(1.1);
}
.icon i{
  font-size: 3em;
  transition-duration: .5s;
}
¥CSS¥
            
答えのアイコン

解説

今回は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を使ってグラディーションの背景にします。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!