Twitter・Facebook・LINEなどのボタンを並べる方法!divタグで解決できる

中野貴利人
執筆中野貴利人
2020/04/21 更新

Twitter・Facebook・LINEなどのボタンを並べる方法!divタグで解決できる

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

横並びと中央寄せにはdivタグを使う

サイトやブログではTwitterの「ツイート」ボタン、Facebookの「いいね!」ボタン、LINEの「LINEで送る」、はてブの「ブックマーク」ボタンボタンを設置することがあります。

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

ここは時間をかけたくない箇所だったため、今回はシンプルにdivタグの入れ子を使ってみましょう。各ボタンをdivタグで囲ってwidthを指定することで、ソーシャルメディア側の仕様変更にも強くなります。

HTML

<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>

CSS

.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、margin、paddingを指定していますが、これはボタンの周りに余白を入れるためであり、必須ではありません。

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

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

ブラウザチェックはChrome、Safari、FireFox、IEで問題ないです。IE6のみ縦にずれますが、シェアも1%未満でCSSハックは使う必要もないため、割愛しました。

スポンサーリンク

スポンサーリンク

著作・制作

中野貴利人
監修・編集
新卒から10種類以上の副業を経験。26歳で法人化、現在12期目、副業関連の著書4冊。2児の父。取材履歴はこちら

ピックアップ

スポンサーリンク