マンガでわかるホームページ作成

htmlやCSSでボタンを横並びにする方法3選

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

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

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

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

  • 方法1.【html】tableで横並べ
  • 方法2.【CSS】display:inline-blockで横並べ
  • 方法3.【CSS】display:flexで横並べ

以下にて詳しく説明します。

前提

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

button{
display:inline-block;
background:#d13415;
padding:10px;
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にすると横並べにできます。
(上記にて指定済み)
あとは必要に応じて中央寄せにします。

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

完成イメージ

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

html

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

css

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

スマホ版(横幅が狭いとき)

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

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

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

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

まとめ

  • 方法1.【html】tableで横並べ
    tableのtdにボタンを設置します。
  • 方法2.【CSS】display:inline-blockで横並べ
    buttonをCSSのdisplay:inline-blockにすると横並べにできます。
  • 方法3.【CSS】display:flexで横並べ
    ボタンを横並べにするには上記の2つが手っ取り早いですが、横並べと言えばdisplay:flexです。

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

関連記事