リスト（li）を横並びにする方法
HTML上のul（リスト）はデフォルトでは左揃えの縦並びになっています。
- 項目1
- 項目2
- 項目3
ですが、これを横並びに変えたいときもあるでしょう。ここではリスト(li)を縦並びから横並びに変更する方法を紹介します。
インライン化する
一番簡単な方法はリストのli要素にdisplayプロパティを与え横に並べる方法です。
リストはブロック要素であり、要素ごとに行が別れてしまう仕様になっています。ですが、displayプロパティにinline属性を与えることでインライン要素に変わり、縦並びから横並びに変化します。
最も簡単な方法ですが、インライン化の場合一つだけ問題があります。それは、「インライン化された要素は幅と高さを設定できない」ということです。
つまりどういうことかと言うと、インライン化されたリストの各要素はwidth、heightプロパティが適用されず、幅を25%均一にする、100px固定といったことができません。
上記サンプルを見て分かる通り、width属性に100pxを指定しているにも関わらず先ほどのサンプルと何も幅が変わっていないのが確認できると思います。(分かりやすく背景色を赤に変えています)
そういう場合はインラインブロック化することで解決します。
インラインブロック化する
インライン化の課題である幅と高さは問題ですが、インライン化ではなくインラインブロック化することでその問題を解決できます。
どういうことかと言うと、各要素の並び方はインラインと同じ(横並びになる)ですが、各要素の中身はブロック要素のままということです。
ブロック要素にはwidthとheightを使って幅と高さを指定することができるため、等間隔での配置といった要素サイズの調整が行えるようになります。
inline化した時のサンプルとは違って、こちらはしっかりwidthプロパティが適用されているのが確認できます。
各要素に微妙な隙間があるのはまた別の要因なので後で紹介します。
floatプロパティを使用する(非推奨)
もう一つの方法としてfloatプロパティを使ったやり方がありますが、こちらを推奨できません。
floatプロパティを使った場合、ブロック要素かどうかに関係なく強制的に横並びになるため、リストアイコンかそのままになるなど、表示がおかしくなります。
それだけでなく、floatプロパティで設定した属性は自動で初期化されず、floatプロパティが適用された要素以降にも影響します。
サンプルテキストはpタグに囲まれたブロック要素であるにも関わらずなぜかリストと同じように横に並んでいるのが確認できます。
このようにfloatプロパティを使った場合は意図しない不具合に見舞われる可能性があるためあまりおすすめしませんが、使わざるを得ない場面もあるのでその際は注意して使うようにしてください。
リスト（li）を横並びQ&A
リストを横並びにする方法はdisplayプロパティを使ったやり方さえ知っておけば十分です。
続いては横並びにした際に浮かんでくる問題を解決する方法を紹介します。
横並びの間隔を調整したい場合
横並びにした要素の大きさではなく、間隔を調整したい場合はmarginプロパティを使用します。こちらはインライン要素でも使える方法です。
インライン(ブロック)化した横並びリストに対してはpadding要素が適用されないので注意しましょう。
均等に横並びしたい場合
均等に横並びにしたい場合はインラインブロック化した上でwidthプロパティも与えます。
この際li要素の親要素であるul要素にもwidthプロパティを与える必要があるので忘れないようにしてください。
サンプルではパーセントを使って幅を指定していますが、ピクセル指定も可能です。
ですが、レスポンシブ対応のことを考えるとほかのプロパティと組み合わせてパーセンテージ指定し、2列以上のリストにも出来る設計が望ましいので、スマホにも対応させる場合はあまり固定幅指定をしないようにしましょう。
横並びしたものを中央に揃えたい場合
横並びにしたものを中央に揃えたい場合は親要素のul要素に text-align:center を与えます。
プロパティ名にテキストと入っていますが、中央揃えする際に役立つプロパティです。
ほかにもtext-align:centerの代わりに margin:auto を指定する方法が紹介されていることもありますが、少なくともインライン化(インラインブロック化)した要素に対しては margin:auto が効かないので注意しましょう。
要素ごとの謎の空白を削除したい場合
ここまでのサンプルを見てみると、リストの各要素ごとに謎の空白ができているのがわかると思います。
これはCSSで完全に対処することはできず、HTMLを修正する必要があります。具体的には余分な空白や空行を削除することで謎の空白を削除できます。
HTMLを自前で組んでいる際に起きやすい問題かつ、解決方法がわかりにくい問題なので覚えておきましょう。
まとめ
ページトップのナビゲーションメニューなど、リストを横並びにしたい機会は結構頻繁に訪れます。
そういう時に実際に横並びする方法を知っていたらとても便利ですので、知らなかったという方は是非覚えて帰ってください。