Facebookやtwitterのボタンを並べる方法!divタグで入れ子にする

中野貴利人
執筆中野貴利人 ネットピコ代表
2019/02/18 更新

Facebookやtwitterのボタンを並べる方法!divタグで入れ子にする

  1. divタグで横並びと中央寄せをする
  2. 今回使ったCSSプロパティを解説

divタグで横並びと中央寄せをする

弊社のサイトやブログでは記事の1番下にFacebookの「いいね!」ボタン、twitterの「ツイート」ボタン、はてブの「ブックマーク」ボタン、LINEの「送る」ボタンを追加しています。

ただ、SNSボタンをtableタグやliタグで適当に横並びにしてみると、ボタンの上下がずれたり、中央に表示されません。そもそもtableタグは表で伝えたいときに使うために好ましくありません。

ここは時間をかけたくない箇所だったため、今回はシンプルにdivタグの入れ子にしました。ソーシャルメディア側の仕様に従いながら、各ボタンをdivタグで囲ってwidthを指定しています。

<div class="social">
<div class="social_inner">
<div class="facebook">コード</div>
<div class="twitter">コード</div>
<div class="hatebu">コード</div>
<div class="line">コード</div>
</div>
</div>

.social {
height: 64px;
margin: 24px 0 0 0;
padding: 24px 0 24px 0;}

.social_inner {
position: relative;
left: 50%;
float: left;}

.facebook,
.twitter,
.hatebu,
.line {
position: relative;
left: -50%;
float: left;
margin: 0 10px 0 0;}

.facebook {width: 72px;}
.fb_iframe_widget > span {vertical-align: baseline !important;}
.twitter {width: 76px;}
.hatebu {width: 84px;}
.line {margin: 0;}

今回使ったCSSプロパティを解説

はじめにsocialクラスにheight、mardin、paddingを指定していますが、これらはボタンの周りに余白を入れるためであり、必須ではありません。

ボタンを横に並べるにはdivタグにfloatを指定するのみでできます。ただ、floatで浮かんでしまっているために、ボタン全体をセンタリングしようとしても「text-align: center」などが効きません。

そこで各ボタンを囲むsocial_innerクラスのpositionをrelativeにして、位置を右に50%ずらします。次に各ボタンのpositionもrelativeにして、位置を左に50%ずらします。これで中央にボタン全体が配置できます。

各ボタンはmarginで左に10pxの余白を設けて、widthで確実にスペースを確保しています。Facebookボタンの横幅を72pxにしたように、各ボタンのwidthを調整することで1pxのずれもなくなります。

ブラウザチェックはChrome、Safari、FireFox、IEで問題ないです。IE6のみ縦にずれますが、個人的に「.tag { /property: value; }」などのCSSハックは使いたくなく、シェアも1%未満であることから割愛しました。

スポンサーリンク

著作・制作など

中野貴利人
監修・執筆・編集
株式会社ネットピコ代表/フクポン運営/副業プランナー。新卒で副業開始、26歳で法人化、11期目。副業関連の著書4冊。2児の父。過去の取材や講演はメディア掲載履歴で紹介。