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の基本を押さえつつ、少し高度なテクニックを学ぶことで、より柔軟なデザインができるようになるでしょう。