Twitter、はてブ、Google+1ボタンの横幅を調整して横一列に並べる方法（CSS3）

基本的には、Twitterのボタン、はてなブックマークのボタンなどの取得したコードをそのままHTML・PHPファイルに張り付けるだけで共有・ソーシャル系ボタンは横一列に並びます。

しかし、色々なボタンが出てくる中で使うボタンによっては、幅や余白の違いやタグで自動に設定されている値によって思った通りに並ばない可能性もあります。

CSS3を使用した共有ボタン類を横一列に並べる方法

CSS3を使用した共有ボタン類を横一列に並べる方法

CSS3を利用して横一列に並べるための方法を考えてみました。
※CSS3のボックス系の仕様は頻繁に変更されているので将来変更になるかもしれませんが、たぶんここで紹介する内容は大きく変更されず大丈夫ではないかと思います。

HTMLのコード

それぞれに取得したコードを入れるためのHTMLコードを用意します。
ボタンを増やすときは、「div.share-button数字」のように追加していきます。

<div id="share">

<div class="share-button1">ボタンのソースコード１</div>

<div class="share-button2">ボタンのソースコード２</div>

<div class="share-button3">ボタンのソースコード３</div>

</div>

CSSの設定

ボタンの上位にある#shareにdispaly:flexを設定することで横一列に並べたりなどの柔軟なレイアウトができるようになります。要素ごとに均等に並べたり表示順を変えたりなどは、#shareにプロパティを追加していくことでできます。

それぞれのボタンに設定されている固有の幅を調整したいときは、widthプロパティを設定します。

#share {
  display:flex;
  width: 100%;
}

.share-button1 {
  /* width:110px !important; */
}
.share-button2 {
  /* width:130px !important; */
}
.share-button3 {
}

表示順を変更するには、orderを使い値は0から右に設定されます。

.share-button1 {
  width:110px !important;
  order: 0;
}
.share-button2 {
  width:130px !important;
  order: 2;
}
.share-button3 {
  order: 1;
}

ブラウザによって適用される範囲が違いますが、現在のIE、Google Chrome、Firefoxの最新版でチェックしてみた結果、意図した表示ができました。また、IE9以下では表示できませんした。

その他の設定方法について

上記の書き方以外にもボタンを囲むクラス名を同じにして、CSSで子セレクタを使って設定する方法も考えられます。