WEB Tips デザイン・コーディング

SNSボタンをきれいに横並びに

2015-04-03

本記事にはプロモーションが含まれています。

SNSボタンをきれいに横並びに

HP上にSNSの各ボタンを並べてみたら余分なスペースがあったり、ガタガタになってしまったので、今後きれいに横並びできるようにするための覚え書きです。

今回は、Twitter、Google+、Facebookの3つです。

横に並べる html

<ul class="sns-wrap">
<li class="twitter">
	<!-- twitter のコード  -->
</li>
<li class="gplus">
	<!-- google+のコード -->
</li>
<li class="fb">
	<!-- Facebook のコード -->
</li>
</ul>

デフォルトでは以下の様な状態です。

sns0

とりあえず、横並びにしてみる

.sns-wrap{
	margin:20px auto;
	padding:0;
	overflow: hidden;
	list-style: none;
}
.sns-wrap li{
	float: left;
	margin:0 10px 0 0;
}

すると、余白が・・・

sns1

Twitter は 124px、Google+は90pxぐらい自動的にwidth が指定されているようです。

なので以下のようにCSS修正

.sns-wrap{
	margin:20px auto;
	padding:0;
	overflow: hidden;
	list-style: none;
}
.sns-wrap li{
	float: left;
	margin:0 10px 0 0;
	overflow: hidden;
}
.sns-wrap li.twitter{
	width:90px;
}
.sns-wrap li.gplus{
	width:60px;
}
.sns-wrap li.fb{
	line-height: 1;
}

twitter とgoogle+はワイドを指定して、はみ出た部分はli にoverflow:hidden で対処しました。

Facebookで上部に余白ができるのは line-height:1 で余白を消すことができました。

sns2

こちらのサイト参考にさせていただきました:
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する
http://s115.jp/wordpress/the-sort-method-next-to-the-social-buttons/

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-