【CSS】シェアボタン（SNSボタン）のキレイな作り方

この記事では、CSSでシェアボタン（SNSボタン）をキレイに作る方法を解説していく。 スマートフォンでもキレイに表示されるよう、レスポンシブデザインにも対応させた。

はじめに
シェアボタンのHTML
シェアボタンのスタイルシート
シェアボタンのレスポンシブデザイン版
IcoMoonを使ってSNSのアイコンを表示する

はじめに

本記事ではfloatを使ってシェアボタンの横並びを行いましたが、最近ではFlexboxプロパティを使うのが一般的なようです。Flexboxの使い方については、こちらの書籍をご覧ください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Amazonで見る Kindleで見る楽天市場で見る

シェアボタンのHTML

まずは、シェアボタンのHTMLを準備する。設置するシェアボタンは「Twitter」「Facebook」「はてなブログ」「Pocket」の4つを選んだ。下記ソースの「サイトURL」「ページタイトル」は、自分のサイトに合わせて書き換えて欲しい。

html

<ul class="shareSns">
  <li><a class="icon-twitter" href="https://twitter.com/intent/tweet?url=サイトURL&text=ページタイトル" target="_blank" title="Twitter"></a></li>
  <li><a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=サイトURL" target="_blank" title="Facebook"></a></li>
  <li><a class="icon-hatebu" href="http://b.hatena.ne.jp/add?&url=サイトURL" target="_blank" title="はてなブックマーク"></a></li>
  <li><a class="icon-pocket" href="https://getpocket.com/edit?url=サイトURL" target="_blank" title="Pocket"></a></li>
</ul>

今回、SNSのアイコンを表示するために「IcoMoon」を使用した。記事の最後に「IcoMoon」の使い方を説明した。

シェアボタンのスタイルシート

ここでは、記事の横幅を720pxとした。また、それを4で割った値の180pxが、1つあたりのボタンの横幅となる。

css

/*
  Share SNS
  Created by Toshihiko Arai.
  https://101010.fun/programming/css-sns-share.html
*/
.shareSns {
    list-style: none;
    overflow: hidden;
    margin:0;
    padding: 0px;
}
.shareSns li {
    text-align: center;
    float: left;
    margin:0;
    padding: 0px;
}
.shareSns li a {
    width: 180px;
    line-height: 50px;
    font-size:20px;
}
.shareSns li a:hover{
    opacity: 0.8;
}

.shareSns li .icon-twitter{
    display:block;
    background:#55acee;
    color:#ffffff;
}
.shareSns li .icon-facebook{
    display:block;
    background:#3B5998;
    color:#ffffff;
}
.shareSns li .icon-hatebu{
    display:block;
    background:#008FDE;
    color:#ffffff;
}
 
.shareSns li .icon-pocket{
    display:block;
    background:#EB4654;
    color:#ffffff;
}

上のスタイルシートでは、スマホから表示した場合にデザインが崩れてしまう。そこで、次ではレスポンシブデザインに対応させたスタイルシートを紹介する。

CSSの横並び表現はこちらの記事を参考に

【CSS】メニューボタンをfloatで横並び表現するやり方

2018-05-18

シェアボタンのレスポンシブデザイン版

ここでは、先ほどのスタイルシートを元に、レスポンシブデザインへ対応させたコードを紹介する。

改良した点は次の2つ。

aタグのwidth: 180px;を削除する
liタグを position: relative;とwidth: 25%;で指定する

css

/*
  Share SNS
  Created by Toshihiko Arai.
  https://101010.fun/programming/css-sns-share.html
*/
.shareSns {
    list-style: none;
    overflow: hidden;
    margin:0;
    padding: 0px;
}
.shareSns li {
    text-align: center;
    float: left;
    margin:0;
    padding: 0px;
    position: relative; /* ←ここを追加 */
    width: 25%; /* ←ここを追加 */
}
.shareSns li a {
    /* width: 180px; ←ここを削除 */
    line-height: 50px;
    font-size:20px;
}
.shareSns li a:hover{
    opacity: 0.8;
}

.shareSns li .icon-twitter{
    display:block;
    background:#55acee;
    color:#ffffff;
}
.shareSns li .icon-facebook{
    display:block;
    background:#3B5998;
    color:#ffffff;
}
.shareSns li .icon-hatebu{
    display:block;
    background:#008FDE;
    color:#ffffff;
}
 
.shareSns li .icon-pocket{
    display:block;
    background:#EB4654;
    color:#ffffff;
}