SNSボタンを表示させたい

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

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

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

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

作り方

「Bootstrap」というCSSフレームワークを使う

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

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

html

まず、htmlの

部分に以下を挿入します。

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

こんな感じになります。

<!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に、以下のコードを挿入します。

    <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!
下記をコピペでドーン

/*ボタン全体が入ってるブロック*/
.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;
}

以上です！簡単ですね！

できたもの

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

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

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

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

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

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

SNSボタンを表示させたい

作り方

「Bootstrap」というCSSフレームワークを使う

html

css

できたもの