【簡単解説】floatで横並びにしたリストをCSSで中央揃えする方法

Webデザインでよく見かけるのが、リストアイテムを横に並べ、それを中央揃えにするというものです。例えば、フッターメニューやページングナビゲーションなどで、リスト項目を横一列に並べたい場合があります。しかし、一般的に「margin:0 auto;」や「text-align;」を使っても、思ったようにリスト全体が中央に揃わないことがあります。

コードが書かれたモニター

この問題を解決するには、少し工夫が必要です。この記事では、CSSを使ってfloatで横並びにしたリストを中央揃えにする方法について、具体的なコードと共に詳しく解説します。

CSSの基本的な設定

まず、一般的なCSSでの設定方法を確認しておきましょう。通常、リストを横並びにするためには、以下のようにliタグにfloatを適用します。

ul { list-style-type: none; padding: 0; margin: 0; } 
li { float: left; margin-right: 10px; /* アイテム間のスペース */ } 

このコードで、リストの各アイテムは横に並びますが、ul全体を中央揃えにすることはできません。

floatで横並びにしたリストを中央揃えする方法

floatを使って横並びにしたリストを中央揃えにするには、少し工夫が必要です。ここで紹介する方法は、ul要素を右に50%移動させ、さらにli要素を左に50%移動させるというものです。これにより、リスト全体が中央に揃います。

HTML

まずは、HTMLの構造を確認しましょう。

<div id="menu">
 <ul>
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
  <li><a href="#">メニュー4</a></li>
  <li><a href="#">メニュー5</a></li>
 </ul>
</div>

次に、このHTMLに対応するCSSを設定します。

CSS

#menu { position: relative; overflow: hidden; } 
#menu ul { position: relative; float: left; left: 50%; } 
#menu li { position: relative; float: left; left: -50%; } 

このCSSの解説をしていきます。

CSSの解説

まず、#menuに対してposition: relative;を設定することで、内部の要素が親要素を基準に位置決めされます。また、overflow: hidden;を追加することで、横スクロールバーが出るのを防ぎます。

次に、#menu ulに対して、float: left;とleft: 50%;を設定しています。これにより、ul要素が左に浮かびながら右に50%移動します。

最後に、#menu liに対してleft: -50%;を設定することで、各リストアイテムが左に50%移動し、結果的に中央に揃う形となります。

なぜこの方法が有効なのか

この方法が有効な理由は、ulとliに対して相互に逆方向の移動を設定することで、リスト全体を中央揃えにすることができるからです。left: 50%;は親要素の左端から50%の位置に移動させ、left: -50%;はその位置からさらに50%戻すことで、結果的に中央に配置されます。

「left:-50%;」は「right:50%;」と同じであるため、理解しやすい方を使っても問題ありません。リスト全体をかこっているoverflow: hidden;は、ブラウザによって横スクロールバーが出てしまう場合の対策になります。

注意点と補足

この方法は非常に有効ですが、いくつかの注意点があります。まず、ブラウザの互換性に注意してください。古いブラウザでは、この手法が正しく動作しない場合があります。また、レスポンシブデザインを意識する場合、メディアクエリを使って調整する必要があるかもしれません。

さらに、left: -50%;と同様に、CSSグリッドやフレックスボックスを使うことで、より簡単に中央揃えができる場合もありますが、今回はfloatを使用した方法にフォーカスしています。

まとめ

floatで横並びにしたリストを中央揃えにする方法を紹介しました。このテクニックを使うことで、リスト全体を見た目よく配置することが可能になります。CSSの基本を押さえつつ、少し高度なテクニックを学ぶことで、より柔軟なデザインができるようになるでしょう。