HTMLでボタンを横並びにする方法はFlexboxがおすすめ！中央寄せなども解説

Webサイトを制作していると、「決定」と「キャンセル」のように、複数のボタンを横に並べて配置したい場面が頻繁に訪れます。

しかし、HTMLで<a>タグや<button>タグを記述しただけでは、通常は縦に並んでしまい、どのようにすれば横並びにできるのか、初心者の方は戸惑うかもしれません。

この問題を解決するのがCSSです。

そして、現在のWeb制作において、ボタンなどの要素を横並びにする最も簡単で強力な方法がCSSのFlexbox（フレックスボックス）というレイアウト機能です。

この記事では、Web制作を学び始めたばかりの方でも理解できるよう、Flexboxを使ってHTMLのボタンを横並びにする基本的な方法から、中央寄せや均等配置といった応用的なレイアウト調整、さらにはスマートフォン表示への対応まで、豊富なコード例と共に分かりやすく解説します。

【結論】ボタンの横並びはCSS Flexboxが最も簡単で推奨

まずは結論からお伝えします。

HTMLでボタンを横並びにするには、CSSのdisplay: flex;を使うのが現代の最もスタンダードで簡単な方法です。

具体的には、横並びにしたいボタン要素を<div>などの親要素で囲み、その親要素に対してCSSでdisplay: flex;を指定するだけです。

たったこれだけの記述で、中のボタンは綺麗に横に並んでくれます。

今すぐ使える基本コード

【HTML】

<div class="button-container">
  <button type="button" class="btn">ボタンA</button>
  <button type="button" class="btn">ボタンB</button>
</div>

【CSS】

.button-container {
  display: flex;
}

このコードを適用すると、ボタンAとボタンBは縦積みではなく、横に並んで表示されます。

なぜこうなるのか、そしてここからどのようにレイアウトを調整していくのかを、次の項目から詳しく解説していきます。

Flexboxを使った横並びの基本ステップ

Flexboxを使ってボタンを横並びにする手順は、非常にシンプルで2つのステップで完了します。

ステップ1：HTMLでボタンをdivなどの親要素で囲む

まず、横並びにしたいボタン要素たちを、一つの親要素で囲みます。
この親要素には、一般的に<div>タグが使われます。

後からCSSでスタイルを指定しやすくするために、この親要素にはclass属性（例: class="button-container"）を付けておくとよいでしょう。

この親要素のことを、Flexboxの文脈では「フレックスコンテナ」と呼びます。

【HTML】

<!-- ボタンを囲む親要素（フレックスコンテナ） -->
<div class="button-container">
  
  <!-- 横並びにしたい子要素（フレックスアイテム） -->
  <a href="#" class="btn">ボタンA</a>
  <a href="#" class="btn">ボタンB</a>
  <a href="#" class="btn">ボタンC</a>

</div>

<a>タグでも<button>タグでも、同様に横並びにすることが可能です。

ステップ2：親要素にdisplay: flex;を適用する

次に、CSSファイルで、先ほど作成した親要素（.button-container）に対してdisplay: flex;というスタイルを適用します。

display: flex;が指定された要素（フレックスコンテナ）の中にある直接の子要素（フレックスアイテム）は、自動的に横並びで配置されるようになります。
これがFlexboxの基本的な働きです。

【CSS】

.button-container {
  display: flex; /* これだけで中の要素が横並びになる */
}

/* 以下はボタンの見た目を整えるための参考スタイルです */
.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px; /* ボタン同士の余白 */
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

この段階で、Webページ上のボタンは綺麗に横に並んでいるはずです。

しかし、多くの場合、ただ横に並べるだけでなく、「コンテナの中央に配置したい」「ボタンを等間隔にしたい」といった、より細かいレイアウト調整が必要になります。

自由自在！ボタンの水平方向の配置を調整する (justify-content)

Flexboxの真価は、ここからのレイアウト調整の容易さにあります。

親要素（フレックスコンテナ）にjustify-contentというプロパティを追加することで、横並びにしたボタンたちの水平方向の配置を自由自在にコントロールできます。

以下に、よく使われるjustify-contentの値と、その効果を見ていきましょう。

左寄せ（初期値）

justify-content: flex-start;は、要素をコンテナの左端から配置します。
これはjustify-contentを指定しなかった場合の初期値なので、通常は記述する必要はありません。

【CSS】

.button-container {
  display: flex;
  justify-content: flex-start; /* 左寄せ（デフォルト） */
}

中央寄せ

justify-content: center;は、要素をコンテナの中央にまとめて配置します。
これはWebサイトのデザインで非常によく使われる配置です。

【CSS】

.button-container {
  display: flex;
  justify-content: center; /* 中央寄せ */
}

右寄せ

justify-content: flex-end;は、要素をコンテナの右端にまとめて配置します。

【CSS】

.button-container {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

均等間隔（両端は余白なし）

justify-content: space-between;は、最初と最後の要素を両端に配置し、残りの要素をその間に均等な間隔で配置します。

【CSS】

.button-container {
  display: flex;
  justify-content: space-between; /* 均等配置（両端はぴったり） */
}

均等間隔（両端にも余白あり）

justify-content: space-around;は、各要素の周りに均等な余白を設ける形で配置します。結果として、両端の余白は要素間の余白の半分になります。

【CSS】

.button-container {
  display: flex;
  justify-content: space-around; /* 均等配置（両端にも余白） */
}

ボタンとボタンの間に余白（隙間）を作る方法

ボタンを横に並べると、要素同士がくっついて表示されることがあります。
これらの間に適切な余白を設けることで、見た目と操作性が向上します。

【推奨】gapプロパティでシンプルに間隔を指定する

Flexboxを使用している場合、最もモダンで簡単な方法は、親要素にgapプロパティを指定することです。

gapは、フレックスアイテム間の隙間を直接指定できる非常に便利なプロパティです。

【CSS】

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px; /* ボタン間の余白を10pxに指定 */
}

この一行を追加するだけで、各ボタンの間に10pxの隙間が自動的に生まれます。
個別のボタンにmarginを設定する必要がなく、コードが非常にシンプルになります。

【補足】marginで個別に間隔を指定する方法

従来の方法として、子要素であるボタン自体にmargin（外側の余白）を設定する方法もあります。

【CSS】

.button-container {
  display: flex;
}
.btn {
  /* ...他のスタイル... */
  margin-left: 10px; /* 左側に10pxの余白 */
}
.btn:first-child {
  margin-left: 0; /* 最初のボタンだけは左の余白をなくす */
}

この方法でも同じ見た目を実現できますが、gapプロパティに比べて記述が少し複雑になります。
特別な理由がない限りは、gapの使用を推奨します。

【応用】レスポンシブデザインでスマホ表示に対応する

PCではボタンを横並びにし、画面幅が狭いスマートフォンでは縦積みに切り替える、といったレスポンシブデザインは現代のWeb制作では必須です。

これもFlexboxとメディアクエリを使えば簡単に実現できます。

メディアクエリとは、閲覧しているデバイスの画面幅などに応じて、適用するCSSを切り替えるための仕組みです。

【CSS】

/* PCでの表示（デフォルト） */
.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 画面幅が600px以下の場合に適用されるスタイル */
@media (max-width: 600px) {
  .button-container {
    flex-direction: column; /* 要素を縦積みに変更 */
    align-items: center; /* 中央寄せ（縦積みの場合） */
  }
}

このCSSを追加すると、画面幅が600pxより広いデバイスではボタンは横並びになり、600px以下のデバイス（多くのスマートフォンが該当）では自動的に縦積みに切り替わります。

flex-direction: column;が、要素の並びを縦方向に切り替えるための重要なプロパティです。

Flexbox以外の横並び方法（従来の手法）

Flexboxが登場する前は、他の方法で横並びを実現していました。
古いWebサイトのコードで見かけることもあるため、参考として紹介します。

display: inline-block;を使う方法とその注意点

inline-blockは、要素をインライン要素のように横に並べつつ、block要素のように幅や高さ、余白を指定できる性質を持ちます。

【CSS】

.btn {
  display: inline-block;
  /* ...他のスタイル... */
}

この方法はシンプルですが、HTMLのコード内で要素間に改行やスペースがあると、意図しない隙間がブラウザ上に表示されてしまうという扱いにくい点があります。

また、中央寄せなどの高度なレイアウト調整もFlexboxに比べて複雑になります。

floatを使う方法（非推奨）

floatプロパティは、元々画像を文章に回り込ませるために使われていた機能です。
float: left;を指定することで要素を左に寄せ、後続の要素を回り込ませることで横並びを実現します。

しかし、この方法はレイアウトが崩れやすく、親要素の高さが認識されなくなるなどの副作用があるため、clearfixと呼ばれる特殊なテクニックで後処理が必要になります。

現在では、ボタンの横並びのようなレイアウト目的でfloatを使用することは強く非推奨とされています。

初心者が「HTMLでのボタン横並び」などのスキルを効率的に学ぶには

HTMLでボタンを横並びにする方法をはじめ、HTML/CSSやWordPressに関するスキルを高めたい場合は、「WPHack講座」がおすすめです。

WPHack講座のメリットは、主に以下の通りです。

格安料金でHTMLを中心としたスキルを高めたい場合には最適なので、「月数千円の出費で効率的にスキルを身に付けられる」という点にメリットを感じる方は、「WPHack講座」の利用を検討してみてもいいかもしれません。