htmlやCSSでボタンを横並びにする方法(flexなど)
こんにちは。テイクです。ホームページを作り続けて9年になります。
ボタンを横並びで2つ配置したいときがあります。
「ボタンのサイズもそんなに大きくないからできればきれいに横並べしたい。」
そんな「htmlやCSSでボタンを横並びにする方法」をご説明します。
- 方法1.【html】tableで横並べ
- 方法2.【CSS】display:inline-blockで横並べ
- 方法3.【CSS】display:flexで横並べ
以下にて詳しく説明します。
目次
前提
まずボタンを以下のようにデザインしたとします。
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でボタンを横並びにする方法でした。
