htmlやCSSでボタンを横並びにする方法(flexなど)

こんにちは。テイクです。ホームページを作り続けて9年になります。

ボタンを横並びで2つ配置したいときがあります。

「ボタンのサイズもそんなに大きくないからできればきれいに横並べしたい。」

そんな「htmlやCSSでボタンを横並びにする方法」をご説明します。

下記関連記事も参考にしてください。

前提

まずボタンを以下のようにデザインしたとします。

ボタン

button{
display:inline-block;
background:#d13415;
padding:10px 30px;
text-align:center;
color:#FFF;
margin:5px;
border:1px solid;
cursor:pointer;
}

ここではbuttonタグで説明しますが、aタグでもinputタグでもやり方は同じです。

ちなみに沈むボタンの作り方も紹介しています。

方法1.【html】tableで横並べ

htmlだけで実装可能です。

tableのtdにボタンを設置します。
あとは必要に応じて中央寄せにします。

完成イメージ

ボタン

ボタン

ブラウザの幅を狭くしてご確認ください。

html

<table>
<tr>
<td><button>ボタン</button></td>
<td><button>ボタン</button></td>
</tr>
</table>

css（必要に応じて）

table{
margin:auto;
}

スマホ版（横幅が狭いとき）

2つのボタンが入るだけの横幅がないときでも、ボタンは横並びになり、ボタンの中でテキストが改行されます。

スマホ版で、はみ出ないようボタンの幅を調整する必要がある場合があります。

方法2.【CSS】display:inline-blockで横並べ

buttonをCSSのdisplay:inline-blockにすると横並べにできます。
（上記にて指定済み）
あとは必要に応じて中央寄せにします。

完成イメージ

html

<div>
<button>ボタン</button>
<button>ボタン</button>
</div>

css

button{
display:inline-block;/*コレ*/
}
div{
text-align:center;
}

display:inline-blockについてはこちら↓

スマホ版（横幅が狭いとき）

2つのボタンが入るだけの横幅がないときはボタンごと改行され縦並びになります。
スマホ版では2段にしたい場合に便利です。

方法3.【CSS】display:flexで横並べ

ボタンを横並べにするには上記の2つが手っ取り早いですが、横並べと言えばdisplay:flexです。

display: flexを指定した要素の子要素は横並べになります。

完成イメージ

html

<div>
<button>ボタン</button>
<button>ボタン</button>
</div>

css

div{
display: flex;
justify-content: center;
}

横並べの時に何かと使うdisplay:flexを覚えましょう。

スマホ版（横幅が狭いとき）

2つのボタンが入るだけの横幅がないときでも、ボタンは横並びになり、ボタンの中でテキストが改行されます。

逆に「flex-wrap: wrap」を指定し改行させることもできます。

まとめ

• 方法1.【html】tableで横並べ
  tableのtdにボタンを設置します。
• 方法2.【CSS】display:inline-blockで横並べ
  buttonをCSSのdisplay:inline-blockにすると横並べにできます。
• 方法3.【CSS】display:flexで横並べ
  display: flexを指定した要素の子要素は横並べになります。

以上、htmlやCSSでボタンを横並びにする方法でした。