どのように作成するか：ソーシャルメディアボタン
- 前のページ： 画像上のボタン：
- 次のページ： もっと読む/もっと少なくする：
CSSを使用してソーシャルメディアボタンのスタイルを設定する方法を学びます。
ソーシャルメディアボタンのスタイルのデザイン方法
第1ステップ - HTMLを追加：
<!-- アイコンライブラリを追加 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Font Awesome アイコンを追加 --> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> ...
第2ステップ - CSSを追加：
四角の例
/* Font Awesome アイコンに共通のスタイルを設定 */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* ヒント：マウスオーバー効果を追加 */
.fa:hover {
opacity: 0.7;
}
/* 各ブランドに特定の色を設定 */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
角丸ボタン
ヒント：追加 border-radius:50% を円形のボタンを作成し、 width：
角丸の例
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
関連ボタン：
チュートリアル：アイコン：
チュートリアル：CSSボタン：
- 前のページ： 画像上のボタン：
- 次のページ： もっと読む/もっと少なくする：
