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

中野貴利人
監修中野貴利人
株式会社ネットピコ 代表取締役

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

  1. 横並びにして中央に表示する
  2. CSSのプロパティの意味

横並びにして中央に表示する

弊社のサイトやブログでは記事の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%未満であることから割愛しました。

スポンサードリンク

本サイトでは専門性と倫理観に裏付けられた情報を掲載するように努めておりますが、内容の一部に誤りがあるなどのご指摘はお問い合わせより随時承っております。
公開日公開日 2011.02.04
更新日更新日 2018.05.30

著作・制作など

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