【徹底解説】HTML+CSSで横並びメニューを中央に配置する7つの方法

2024-04-07

HTML+CSSで横並びメニューを中央揃えにする方法

方法1: margin: 0 auto; を使う

最もシンプルで簡単な方法は、中央揃えしたい要素に margin: 0 auto; を指定する方法です。これは、左右の margin を自動的に調整して、要素を親要素の中央に配置します。

メリット:

コードがシンプルで分かりやすい
多くの場合、これで十分な結果が得られる

親要素の幅が固定されていない場合、メニューが左右にずれる可能性がある
子要素の幅が異なる場合、メニューが均等に配置されない可能性がある

注意点:

親要素はブロック要素である必要があります
子要素はインラインブロック要素またはブロック要素である必要があります

例:

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  margin: 0 auto;
}

方法2: flexbox を使う

より柔軟な方法は、flexbox を使う方法です。flexbox を使用すると、親要素をフレックスボックスレイアウトに変換し、子要素をどのように配置するかを細かく制御できます。

垂直方向の中央揃えも簡単にできる

コードが少し複雑になる
古いブラウザではサポートされていない

親要素に display: flex; を指定する必要がある
子要素に flex: 1; を指定すると、子要素が均等に配置される

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法3: grid を使う

最新の CSS レイアウトである grid を使う方法もあります。grid は、親要素を格子状に分割し、子要素をその格子に配置することができます。

非常に柔軟なレイアウトが作成できる
複雑なレイアウトも簡単に作成できる

子要素を格子に配置するには、grid-area プロパティを使用する

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: grid;
  place-items: center;
}

上記以外にも、以下のような方法があります。

text-align: center; を使う (テキストのみの場合)
position: absolute; と left: 50%; を使う (複雑なレイアウトの場合)
JavaScript を使う

これらの方法は、上記の方法でうまくいかない場合に検討してください。

HTML+CSSで横並びメニューを中央揃えするには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解した上で、目的に合った方法を選択してください。

[CSS Grid レイアウト入門 (1/3) はじめに

方法1: margin: 0 auto; を使う

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  margin: 0 auto;
}

方法2: flexbox を使う

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法3: grid を使う

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: grid;
  place-items: center;
}

<ul class="menu">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">サービス</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

.menu {
  text-align: center;
}

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<ul class="menu">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">サービス</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

const menu = document.querySelector('.menu');

function centerMenu() {
  const menuWidth = menu.offsetWidth;
  const windowWidth = window.innerWidth;
  const leftMargin = (windowWidth - menuWidth) / 2;

  menu.style.marginLeft = `${leftMargin}px`;
}

window.addEventListener('resize', centerMenu);

centerMenu();

これらのコードは、あくまでも参考例です。必要に応じて、コードを修正して使用してください。

その他の横並びメニューを中央揃えにする方法

display: table; を使う

親要素に display: table; を指定すると、その要素をテーブルレイアウトに変換することができます。そして、子要素に display: table-cell; を指定すると、子要素がテーブルセルとして配置されます。

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: table;
  margin: 0 auto;
}

.menu a {
  display: table-cell;
}

コードが比較的シンプル

テーブルレイアウトは複雑なレイアウトには不向き
他のレイアウトと組み合わせて使うのが難しい

CSS Grid レイアウトの auto-fit キーワードを使うと、子要素を自動的に等間隔に配置することができます。

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

CSS Grid レイアウトの minmax() 関数を使うと、子要素の幅を最小幅と最大幅で指定することができます。

<div class="menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

.menu {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, auto);
}

子要素の幅を柔軟に設定できる

JavaScriptを使って、子要素の位置を個別に調整することができます。

<ul class="menu">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">サービス</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

const menu = document.querySelector('.menu');
const menuItems = menu.querySelectorAll('li');

function centerMenu() {
  const menuWidth = menu.offsetWidth;
  const windowWidth = window.innerWidth;
  const leftMargin = (windowWidth - menuWidth) / 2;

  menu.style.marginLeft = `${leftMargin}px`;

  for (const menuItem of menuItems) {
    const menuItemWidth = menuItem.offsetWidth;
    const leftOffset = (menuWidth - menuItemWidth) / 2;

    menuItem.style.marginLeft = `${leftOffset}px`;
  }
}

window.addEventListener('resize', centerMenu);

centerMenu();