SNS、ブックマークボタンの横並びHTML,CSS記述例。floatプロパティ。

いまさらHTML,CSS入門講座 > HTML5 > SNS、ブックマークボタン > 横並びHTML,CSS記述例。floatプロパティ。

SNS、ブックマークボタンを横に並べます

本稿では、バルーンタイプのGoogle +1ボタン、バーティカルタイプのはてなブックマークボタンと、2段にしたbutton_countタイプ、largeサイズのfacebook いいね！（シェア含む）ボタンと大サイズのtwitterボタンを横にならべるCSSと、HTML5ドキュメントへの記述例を掲載しています。

それぞれのボタンの作成方法はこちらをご参照下さい。

記述例

スタイルシートの記述例）

article.sns_button{
	display: inline-block;
	width: 100%;
}
	article div.google_button{
		float: left;
		margin-right: 10px;
	}
	article div.hatena{
		float: left;
		margin-right: 10px;
	}
	article div.fb-tw{
			display: block;
			float: left;
		}
		div.fb-like{
			margin-bottom: 4px;
		}
		div.tweet_button{
			clear: both;
			margin: 0;
			padding: 0;
		}

HTMLドキュメントの記述例）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<!-- facebook button -->
<div id="fb-root"></div><script type="text/javascript" src="facebook_button2016.js"></script>
<!-- facebook button -->

<!-- SNS Button -->
<article class="sns_button">

<div class="google_button">
<div class="g-plusone" data-size="tall"></div><script src="google_button2016.js"></script>
</div>

<div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

<div class="hatena">
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>

<div class="fb-tw">
<div class="fb-like" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>
<br>
<div class="tweet_button"><a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a></div><script type="text/javascript" src="../twitter_button2016.js"></script>
<!-- SNS Button -->
</article>

</body>
</html>

上記のHTML5ドキュメント。

ソースコードの解説

article要素　class名：sns_button: SNSボタンの大枠となる要素です。
この要素には、displayプロパティでinline-block、widthプロパティで横幅を指定します。
div要素 class名：google_button: バルーンタイプのGoogle +1ボタンのコードを記述します。
この要素には、floatプロパティでleftを指定し、次に続くはてなブックマークボタンの枠となるdiv要素（class名：hatena）を右側に回り込ませます。
div要素 class名：hatena: バーティカルタイプのはてなブックマークボタンのコードを記述します。
この要素には、floatプロパティでleftを指定し、次に続くfacebook いいね！ボタンとtwetterボタンの枠となるdiv要素（class名：fb-tw）を右側に回り込ませます。
div要素 class名：fb-tw: facebook いいね！ボタンとtwetterボタンの枠となる要素です。
この要素には、displayプロパティでblockを指定します。また、この要素は右端ですが、floatプロパティでleftを指定します。
div要素 class名：fb-like: button_countタイプ、largeサイズのfacebook いいね！（シェア含む）ボタンのコードを記述します。
この要素には、margin-bottomプロパティの値は、facebook いいね！ボタンと、twitterボタンの間隔を調整するために指定しています。なお、class名は、コードに指定してあるclass名でスタイルを指定します
div要素 class名：tweet_button: 大サイズのtwitterボタンのコードを記述します。
この要素には、この要素には、clearプロパティにbothを指定し、回り込みを解除しています。また、marginプロパティと、paddingプロパティの値をリセットするために"0"を指定しています。

補足

それぞれのボタンの間隔は、margin-rightプロパティで調整しています。