SNSボタンを表示させたい
プログラミングを学び始めて、もうすぐ2ヶ月。
Webアプリを作ることが増えてきました。
そこで、よく思うことが「SNSボタンを綺麗に表示させたい・・・」
▲こーゆーやつを、ページ下部にキレイに表示させるのが初心者には大きな一歩なのだ！！！
ということで、自分への備忘録も兼ねて、作り方をまとめておきます。
作り方
「Bootstrap」というCSSフレームワークを使う
あくまで簡単に作るのが目的なので、「Bootstrap」を使います！
初心者の方に説明すると、htmlに一文ちょこっと追加するだけで、CSSが楽になる魔法のツールです！
では、以下のページにSNSボタンを追加してみましょう！
html
まず、htmlの
部分に以下を挿入します。<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet"/>こんな感じになります。
<!DOCTYPE html><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>プロフィール</title><linkhref="style.css"rel="stylesheet"/><linkhref="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet"/><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet"/></head>なんと、これだけで「Bootstrap」が使えるようになりました！簡単！
次に、ボタンを入れたいところのhtmlに、以下のコードを挿入します。
<ulclass="profile-social-links"><li><atarget="_blank"href="#"><iclass="fa fa-facebook"></i></a></li><li><atarget="_blank"href="#"><iclass="fa fa-twitter"></i></a></li><li><atarget="_blank"href="#"><iclass="fa fa-instagram"></i></a></li><li><atarget="_blank"href="#"><iclass="fa fa-linkedin"></i></a></li></ul>htmlは以上！
css
続いて、CSS!
下記をコピペでドーン
/*ボタン全体が入ってるブロック*/.profile-social-links{width:218px;display:inline-block;float:right;margin:0px;padding:15px20px;background:#FFFFFF;margin-top:50px;text-align:center;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:moveIn1s3.1seaseforwards;animation:moveIn1s3.1seaseforwards;}/*ボタンを横一列で表示する*/.profile-social-linksli{list-style:none;margin:-5px0px0px0px;padding:0px;float:left;width:25%;/*今回4つなので25%です*/text-align:center;}/*ボタンの設定*/.profile-social-linkslia{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-linksliai{position:relative;z-index:1;}以上です！簡単ですね！
できたもの
良い感じにできた～～～～～嬉しい～～～～
ちなみに、ボタンのラインナップはこちら！Youtubeとかもあればいいんですけどね～
<iclass="fa fa-XXXX"></i>ここの、XXXX部分をgoogleやyahooに変えるだけで、ボタンは変わります♪
私のような初心者さんのお役に立てれば嬉しいです！