【HTML CSS 独学5】 基礎を固めて高く積み上げ！「サクッ!と作ろうSNSリンクボタン編 」 投資家のFIREへの旅路 第226回
WEBサイトに必須ではないけど、あったほうがいいよねパーツ！
SNSリンクボタン
の簡単作り方解説です。
サクサクっと作っちゃいましょう！
【FontAwesome】
SNSのボタンなので、SNSのロゴを配置して、これにリンクを貼ってボタンにしたいと思います。
まず、このロゴは、FontAwesomeというWEBサービスを利用すると良いでしょう！
無料でも、十分に使える素材がたくさんあります！
使い方も簡単！
【FontAwesome 事前準備】
<head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</hed>まずは、headタグ内に、このコードをコピペしてください。
これは、CDNというやつで、
ネット経由で、FontAwesomeの機能を使うための、リンクです。
【FontAwesome 使い方】
メアドなど登録して、アカウントを作ります。
あとは、検索するだけ！
↓↓↓↓↓↓↓↓↓
検索結果が表示されるので、使いたい物をクリック！
↓↓↓↓↓↓↓↓↓
↓ここでコードをコピー！
コピーしたら、HTMLに貼り付ける！
↓↓↓↓↓↓↓↓↓
<div class="sns">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-line"></i></a>
</div>リンクなので、aタグを使います。
aタグの中に、先程コピーしたFontAwesomeのコードを貼り付けます。
<i> </i>の部分ですね。
【FontAwesome CSS 編集】
FontAwesomeのアイコンは、CSSでスタイルを指定できます。
SCSS
i {
font-size: 20px;
}FontAwesomeのアイコンのコードは、<i> </i>という形なので、
CSSでは、i に対して、スタイルを指定できます。
【FontAwesome マウスオーバーで色変】
アイコンをリンクボタンらしくするために、
マウスオーバー時のエフェクトを作ります。
こんな感じです。
それぞれの、SNSテーマカラーに変化するようにします。
そのコードがこちら
↓↓↓↓↓↓↓↓↓
SCSS
/*SNS ロゴ ---------------------------------------------*/
.sns {
width: 100%;
max-width: 1040px;
margin: 1% auto 0 auto;
text-align: right;
a {
display: inline-block;
color: rgb(75, 75, 75);
padding: 3px 4px;
border-radius: 10%;
margin-left: 1%;
&:nth-child(1) {
background-color: white;
transition: 0.3s;
&:hover {
background-color: rgb(253, 113, 160);
color: white;
transition: 0.3s;
}
}
&:nth-child(2) {
background-color: white;
transition: 0.3s;
&:hover {
background-color: rgb(66, 195, 255);
color: white;
transition: 0.3s;
}
}
&:nth-child(3) {
background-color: white;
transition: 0.3s;
&:hover {
background-color: rgb(102, 243, 89);
color: white;
transition: 0.3s;
}
}
i {
font-size: 20px;
}
}
}SCSSで書いています。
【 nth-child ( ) 】
この、nth-child( ) は、( )の中に数字を入れて使います。
今回のコードでは、aタグが３つ並んでいます。
<div class="sns">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-line"></i></a>
</div>この場合、
nth-child ( 1 )と書けば、aタグの1個目を指定することができます。
nth-child ( 2 )と書けば、aタグの2個目を指定することができます。
nth-child ( 3 )と書けば、aタグの3個目を指定することができます
SCSSでの注意は、aタグを親要素として、&:nth-child( ) を入れ子になるように書きましょう！
もう一度、SCSSを見てみましょう！
SCSS
/*SNS ロゴ ---------------------------------------------*/
.sns {
width: 100%;
max-width: 1040px;
margin: 1% auto 0 auto;
text-align: right;
a {
display: inline-block;
color: rgb(75, 75, 75);
padding: 3px 4px;
border-radius: 10%;
margin-left: 1%;
&:nth-child(1) {
background-color: white;
transition: 0.3s;
&:hover {
background-color: rgb(253, 113, 160);
color: white;
transition: 0.3s;
}
}
&:nth-child(2) {
background-color: white;
transition: 0.3s;
&:hover {
background-color: rgb(66, 195, 255);
color: white;
transition: 0.3s;
}
}
&:nth-child(3) {
background-color: white;
transition: 0.3s;
&:hover {
background-color: rgb(102, 243, 89);
color: white;
transition: 0.3s;
}
}
i {
font-size: 20px;
}
}
}nth-child ( 1 )は、instagramのアイコンなので、
hover時に、background-color: rgb(66, 195, 255); でアイコンの背景をピンクにして、color: white;で、アイコン本体を白に変化させています。
nth-child ( 2 )は、twitter
nth-child ( 3 )は、LINE なので、それぞれ、青、緑をbackground-colorに、しています。
【hover】
SCSSでは、マウスオーバー時を指定するのに、
「& : hover { } 」と、書きます。
「& :」と書くと、親要素を指定することができます。
hoverだけでなく、nth-child( ) などにも使います。
要するに、& の部分には、親要素が入ります。
&;hover { } は、a:hover { } と同じ意味です。
aタグや、マウスオーバーについては、こちら！
【まとめ】
これで、SNSのアイコンをリンクボタンにすることができました。
マウスオーバーで、テーマカラーに変わるところが楽しいところです！
今回紹介したコードをベースにして、
自分の好きなスタイルに仕上げていきましょう！
車輪の再発明は不要ですが、カスタマイズは必要です。
自分らしさを是非、出してください！
この記事が気に入ったらサポートをしてみませんか？