今回は、ul 要素や ol 要素でつくった「リスト」をインラインブロックで横並びにする方法をまとめてみました。
本記事でのインラインブロックは、display: inline-block;のスタイルであり、インラインブロック要素はdisplay: inline-block;を CSS で設定した要素ということで話を進めます。
インラインブロック要素とは
インラインブロック要素とは、ブロック要素（display: block;）とインライン要素（display: inline;）の性質を併せ持った要素、または、そのいいとこ取りの要素である。
という説明は、
よく見かけますよね！
私はこの説明を見て、イマイチ理解できません。なぜなら『いいとこどりなら全部インラインブロックにすればいいのでは？』と思い、なんだか解せないからです。
なので、インラインブロックに真摯に向き合い一つずつ順を追ってまとめたいと思います。
インラインブロックの特徴１
横並びになる。
See the Pen inline-block__横並び by MATSUDAI (@matsudai) on CodePen.
このように横並びにすることこそ、「リスト」にインラインブロックを設定する一番の目的ではないでしょうか。
ただし、
隣同士がインラインブロック要素またはインライン要素でないと効果はありません。
インラインブロックの特徴２
width と height を設定できる。
設定しない場合は、各リストアイテムが内包する内容に合わせた幅になります。また、親要素の幅に収まらない場合は通常のインライン要素と同じく改行されます。
インラインブロックの特徴３
margin と padding を設定できる。
インラインブロック要素とブロック要素だけの特徴のように見えますが、実はインライン要素も左右に関しては設定できます。
上下に関しては、
padding は上下の要素に影響を与えないというのと、margin は無視されるという、やや癖のある感じです。本記事と内容がそれてしまうので深くは触れないでおきます。
特徴としては、だいたいこんな感じでしょうか。
リストを横並びにするには
li 要素をセレクタに指定して
display: inline-block; を設定する
前項でもちょいちょいコードは載せてますが、、
「リスト」を横並びにしたい場合、子要素である li 要素をセレクタに指定してdisplay: inline-block;を設定します。
言い換えれば、
横並びにしたい要素自身をインラインブロック要素にします。それは li 要素に限らず div 要素でも p 要素でも同じです。そうすると、該当の要素たちが左詰めされます(文章の頭に向かって詰められます。)。
その時に起こる現象としてもう一つ、リストマーカーは消えてしまいます。
See the Pen inline-block__点 by MATSUDAI (@matsudai) on CodePen.
これは、リストにはデフォルトでdisplay: list-item;が設定されており、それがあることでリストと認識されリストマーカーが表示されていました。しかしdisplay: inline-block;に上書きされてしまったため、リストと認識されず、消えてしまったという感じです。意外と盲点なので豆知識として覚えておくと良いかもしれません！
インラインブロックを使う意義
さて今回、リストを横並びにするためにdisplay: inline-block;を使用しましたが、
float ではダメなのか？flex の方が良いのでは？という疑問が浮かびます。本記事の内容のようにまとめてみて思ったのは、インラインブロックで「リスト」を横並びにする理由は、楽だから。だと私は思います。
float で横並びにする場合は、“クリアリング”をしたり、レイアウトの崩れという問題を意識しなければなりません。flex を使用する場合は、要素の幅の設定、並び順や方向などの細かな設定をしなければならず、少し手間がかかりますし、少し知識も必要です。
そういった面を考えると、インラインブロックを利用するというのは、やはり楽だからというのもありますし、複雑なコードが必要ないのでシンプルなコードにする事もできるというのも大きなメリットなのかなと思います。
楽を追求するならば、ただ闇雲にテキストを並べて、メニューにしたいテキストを span で囲ってスタイリングするだけじゃダメなのか？となりますが、それはセマンティック的に良くないので、やはりインラインブロックに軍配が上がると思います。何というか、メニュー系を作るのに、かゆいところに手の届く便利なスタイルって感じなイメージがしました。
まとめ
インラインブロックを活用することで「リスト」を横並びにすることができます。「メニュー」などのモジュールを簡易的、またはシンプルなコードでつくりたい場合に適したやり方ですね。
参考・出典
・MDN. 「display」. https://developer.mozilla.org/ja/docs/Web/CSS/display, 2024年5月22日閲覧。
