SNSボタンの横並びHTML,CSS記述例。floatプロパティ。|SNS、ブックマークボタン|いまさらHTML,CSS入門講座いまさらHTML,CSS入門講座|SNS、ブックマークボタン|横並びHTML,CSS記述例。floatプロパティ。横並びHTML,CSS記述例。floatプロパティ。いいね!(シェア含む)ボタンと大サイズのtwitterボタンを横にならべるCSSと、HTML5ドキュメントへの記述例を掲載しています。それぞれのボタンの作成方法はこちらをご参照下さい。--></article></body></html>上記のHTML5ドキュメント。class名:sns_buttonSNSボタンの大枠となる要素です。この要素には、displayプロパティでinline-block、widthプロパティで横幅を指定します。+1ボタンのコードを記述します。この要素には、floatプロパティでleftを指定し、次に続くはてなブックマークボタンの枠となるdiv要素(class名:hatena)を右側に回り込ませます。class名:hatenaバーティカルタイプのはてなブックマークボタンのコードを記述します。いいね!ボタンとtwetterボタンの枠となるdiv要素(class名:fb-tw)を右側に回り込ませます。いいね!ボタンとtwetterボタンの枠となる要素です。この要素には、displayプロパティでblockを指定します。この要素は右端ですが、floatプロパティでleftを指定します。いいね!(シェア含む)ボタンのコードを記述します。いいね!ボタンと、twitterボタンの間隔を調整するために指定しています。class名:tweet_button大サイズのtwitterボタンのコードを記述します。この要素には、この要素には、clearプロパティにbothを指定し、回り込みを解除しています。marginプロパティと、paddingプロパティの値をリセットするために"0"を指定しています。補足それぞれのボタンの間隔は、margin-rightプロパティで調整しています。