初心者でも、これを読めばOK！簡単にSNSボタンを作れる方法！【Bootstrap／HTML／CSS】


#SNSボタンを表示させたい

プログラミングを学び始めて、もうすぐ2ヶ月。
Webアプリを作ることが増えてきました。

そこで、よく思うことが「SNSボタンを綺麗に表示させたい・・・」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/c607556f-8cd7-7bf7-c95f-519245ee3352.png)

▲こーゆーやつを、ページ下部にキレイに表示させるのが初心者には大きな一歩なのだ！！！

ということで、自分への備忘録も兼ねて、作り方をまとめておきます。

#作り方
###「Bootstrap」というCSSフレームワークを使う

あくまで簡単に作るのが目的なので、「Bootstrap」を使います！
初心者の方に説明すると、__htmlに一文ちょこっと追加するだけで、CSSが楽になる魔法のツールです！__

では、以下のページにSNSボタンを追加してみましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/d09979dd-e655-6719-e701-351ec108d582.png)


###html
まず、htmlの<head>部分に以下を挿入します。

```html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
```

こんな感じになります。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>プロフィール</title>
    <link href="style.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

  </head>
```

なんと、__これだけで「Bootstrap」が使えるようになりました！簡単！__

次に、ボタンを入れたいところのhtmlに、以下のコードを挿入します。

```html
    <ul class="profile-social-links">
        <li>
          <a target="_blank" href="#">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
        <li>
          <a target="_blank" href="#">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li>
          <a target="_blank" href="#">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
        <li>
            <a target="_blank" href="#">
             
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
      </ul>
```

htmlは以上！

###css
続いて、CSS!
下記をコピペでドーン

```css
/*ボタン全体が入ってるブロック*/
.profile-social-links {
  width: 218px;
  display: inline-block;
  float: right;
  margin: 0px;
  padding: 15px 20px;
  background: #FFFFFF;
  margin-top: 50px;
  text-align: center;
  opacity: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

/*ボタンを横一列で表示する*/
.profile-social-links li {
  list-style: none;
  margin: -5px 0px 0px 0px;
  padding: 0px;
  float: left;
  width: 25%; /*今回4つなので25%です*/
  text-align: center;
}

/*ボタンの設定*/
.profile-social-links li a {
  display: inline-block;
  color: green; /*ボタンの色はここで変えてね！*/
  width: 24px;
  height: 24px;
  padding: 6px;
  position: relative;
  overflow: hidden!important;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.profile-social-links li a i {
  position: relative;
  z-index: 1;
}

```

以上です！簡単ですね！

#できたもの

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/aae1c690-b3f7-730d-9112-3aca382498c5.png)


__良い感じにできた～～～～～嬉しい～～～～__


ちなみに、ボタンのラインナップはこちら！Youtubeとかもあればいいんですけどね～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/37376134-1304-39c5-c45b-08a236a266ea.png)

```html
<i class="fa fa-XXXX"></i>
```

ここの、XXXX部分をgoogleやyahooに変えるだけで、ボタンは変わります♪


私のような初心者さんのお役に立てれば嬉しいです！