アニメーション付きのソーシャル共有ボタンを作成する | HTML、CSS3、Font Awesome

はじめに

この実験では、HTML と CSS3 を使ってアニメーション付きのソーシャル共有ボタンを作成する方法を学びます。これらのボタンは、アイコンに Font Awesome ライブラリを使用し、CSS でスタイルを設定して、スムーズなホバー遷移効果を提供します。このガイドが終わるとき、任意のウェブサイトに統合できる美しく応答性のあるソーシャルボタンのセットを手に入れることができます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-179618{{"CSS を使ったアニメーション付きのソーシャル共有ボタン"}} css/text_styling -.-> lab-179618{{"CSS を使ったアニメーション付きのソーシャル共有ボタン"}} css/display_property -.-> lab-179618{{"CSS を使ったアニメーション付きのソーシャル共有ボタン"}} css/pseudo_classes -.-> lab-179618{{"CSS を使ったアニメーション付きのソーシャル共有ボタン"}} css/pseudo_elements -.-> lab-179618{{"CSS を使ったアニメーション付きのソーシャル共有ボタン"}} css/transformations -.-> lab-179618{{"CSS を使ったアニメーション付きのソーシャル共有ボタン"}} end

アイコンの紹介

Font Awesome アイコンを使用するには、単に接頭辞「fa」の後にアイコン名を付けます。

具体的な形式は以下の通りです。<i class="fa ICON_NAME"></i>

アイコンライブラリから必要なアイコンを導入するには、index.htmlファイルに次のコードを記述します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animated Social Sharing Buttons</title>

    <!--Icon Library-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div>
      <i class="fa fa-facebook"></i>
      <i class="fa fa-twitter"></i>
      <i class="fa fa-google"></i>
      <i class="fa fa-instagram"></i>
      <i class="fa fa-pinterest"></i>
    </div>
  </body>
</html>

結果は以下の通りです。

疑似クラスセレクタを使用すると、マウスがリンクオブジェクトの上にホバーしたときにスタイルが変更されます。したがって、アイコンに空のリンクを追加します。または、それぞれのソーシャルホームページにリンクすることもできます。

疑似クラスの構文：selector:pseudo-class {property:value;}

a:hover {property:value;}は、マウスがリンクの上にホバーしたときに表示されるスタイルを設定します。

必要なクラスセレクタを設定して、それぞれのボタンの後続のスタイリングを容易にします。

<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
  <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
  <a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>

エフェクトプレビュー：

<a>タグを適用すると、Font Awesome アイコンが青になります。既定のフォントカラーは青です。

✨ 解答を確認して練習

アイコンのスタイル設定

アイコンのスタイルを設定する前に、index.htmlの<head>タグにstyle.cssのスタイルシートを追加します。

<link rel="stylesheet" href="style.css" />

全体的なスタイルを標準化するために、style.cssにグローバルスタイルを設定します。

/* グローバルスタイル設定 */
* {
  margin: 0;
  padding: 0;
}
a,
img {
  border: 0;
}
body {
  background: #eee;
}

Font Awesome フォントが提供するベクターアイコンを美化するために、まずそれらの色を設定します。

.social-btns.btn.facebook.fa {
  color: #3b5998;
}
.social-btns.btn.twitter.fa {
  color: #00aff0;
}
.social-btns.btn.google.fa {
  color: #dc4a38;
}
.social-btns.btn.instagram.fa {
  color: #bf00ff;
}
.social-btns.btn.pinterest.fa {
  color: #cc0000;
}

エフェクトプレビュー：

次に、アイコンに触れたときに即座に拡大し、その色を変更する設定を行います。即座に拡大するエフェクトには、transform: scale(0.8)を使用してアイコンを元のサイズの 80％に縮小し、タッチイベントが発生したときにtransform: scale(1)を使用して元のサイズに戻します。

style.cssファイルに次のコードを入力します。

.social-btns.btn.fa {
  /* 既定のリンク表示スタイルを設定 */
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.social-btns.btn:focus.fa, /* フォーカスされたボタンのスタイルを選択 */
.social-btns.btn:hover.fa {
  /* マウスオーバー時のリンク表示スタイルを設定 */
  color: #fff; /* その色を変更 */
  -webkit-transform: scale(1);
  transform: scale(1);
}
.social-btns.btn.fa {
  /* Font Awesome が提供するアイコンのサイズと垂直方向の整列を設定 */
  font-size: 38px;
  vertical-align: middle;
}

エフェクトプレビュー：

✨ 解答を確認して練習

ボタンのスタイル設定

ページをレイアウトするために、ボタンをページの中央に配置し、ブロックレベルのインライン要素として設定し、その後ボタンを美化します。

display属性は、生成する要素の種類を指定します。

display:inlineは、インライン要素として設定し、他の要素と同じ行に表示されます。つまり、独占的に 1 行を占めません。
display:blockは、ブロックレベル要素として設定し、独占的に 1 行を占めます。
display:inline-blockは、上記の 2 つの方法を組み合わせて、独占的に 1 行を占めないブロックレベル要素として設定します。

.social-btns {
  height: 90px;
  margin: 80px auto;
  font-size: 0;
  text-align: center; /* 水平方向の中央化 */
}
.social-btns.btn {
  display: inline-block; /* ボタンを独占的に 1 行を占めないブロックレベル要素として設定 */
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px; /* 行高を設定 */
  margin: 0 10px;
  text-align: center;
  position: relative; /* 相対位置指定に設定 */
  overflow: hidden; /* オーバーフローするコンテンツを非表示にする */
  border-radius: 28%; /* DIV の角を丸くする */
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* DIV 要素に影を追加 */
  opacity: 0.99; /* 不透明度を指定。0.0 で透明から 1.0 で完全に不透明 */
}

エフェクトプレビュー：

ボタンをタッチすると、アイコンとボタンの背景がともに白になり、見にくいことがわかります。そのため、ボタンの背景のタッチスタイルを設定する必要があります。まず、transform: rotate(45deg)を使用してbtn:beforeを時計回りに 45°回転させます。その後、btn:beforeの初期位置と最終位置を調整します。

beforeセレクタ：要素のコンテンツの前に新しいコンテンツを挿入します。

.social-btns.btn:before {
  /* 各 btn 要素のコンテンツの前の top と left の値を設定。つまり、タッチされていないときの btn の位置 */
  top: 90%;
  left: -110%;
}
.social-btns.btn:focus:before,
.social-btns.btn:hover:before {
  /* タッチされたときのボタンの位置を調整 */
  top: -10%;
  left: -10%;
}
.social-btns.btn:before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  /* btn:before を時計回りに 45°回転させる */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* btn:before の色を設定。つまり、タッチ後のボタンの背景色 */
.social-btns.btn.facebook:before {
  background-color: #3b5998;
}
.social-btns.btn.twitter:before {
  background-color: #00aff0;
}
.social-btns.btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns.btn.google:before {
  background-color: #dc4a38;
}
.social-btns.btn.pinterest:before {
  background-color: #cc0000;
}

エフェクトプレビュー：

最後に、ボタンにトランジション調整を行います。主にtransition-timing-function属性を使用して、トランジション効果の速度曲線を設定し、視覚的にスムーズにするようにします。

transition-timing-functionの構文：

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]>, <number>, <number [0,1]>, <number> )

style.cssに次のスタイルを追加します。

.social-btns.btn,
.social-btns.btn:before,
.social-btns.btn.fa {
  transition: all 0.35s; /* すべてのスタイルを 0.35 秒でゆっくりと変化させる */
  transition-timing-function: cubic-bezier(
    0.31,
    -0.105,
    0.43,
    1.59
  ); /* トランジション効果の速度を指定 */
}

エフェクトプレビュー：

注：右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

知識拡張

ハイパーリンクをホバーしたときの効果を設定するだけでなく、疑似クラスセレクタを使用して、未訪問、訪問済み、選択済みのハイパーリンクに対する効果を設定することもできます。

a:link {attribute: value;}は、未訪問のハイパーリンクに対する効果を設定します。
a:visited {attribute: value;}は、訪問済みのハイパーリンクに対する効果を設定します。
a:active {attribute: value;}は、選択済みのハイパーリンクに対する効果を設定します。

✨ 解答を確認して練習

まとめ

この実験では、以下のことを学びました。

Font Awesome アイコンライブラリの参照
CSS 疑似クラスセレクタ
CSS 変換プロパティ
display プロパティ
before セレクタ

この実験では、CSS を使って静的なアイコンをダイナミックな効果を持つボタンに変換しました。CSS は、繰り返しのスタイルに統一されたスタイルを設定してウェブ開発の効率を向上させるだけでなく、ウェブページのニーズに応じて様々な要素を設定して、ウェブページを美化し、ユーザーの使用感を向上させる目的を達成します。