【CSS】コンテンツを横に並べることができる、インラインブロックの使い方

ウェブサイトを制作するとき、コンテンツは縦並びになります。

ヘッダーメニューのように、コンテンツを横並びにしたい場合、どうすればいいのでしょうか。

今回は、インラインブロックの使い道を紹介します。

基本のコードは、以下になります。

現在、コンテンツが横いっぱいに広がっていて、縦並びになっています。

コンテンツを横並びにするには、display: inline-block;を指定します。

ブラウザで確認すると、

コンテンツが横並びになりました。

display: inline-block;にすると、コンテンツに合わせて幅が狭まり、横に並ぶようになります。

また、コンテンツのサイズを指定することもできます。

縦横のサイズが固定されました。

コンテンツのサイズが横幅いっぱいになった場合、次のコンテンツは下の行に移動します。

ちなみに、display: inline-block;ではなく、display: inline;でもいいのでは？と思うかもしれません。

試しに、display: inline;にしてみると、

コンテンツのサイズが小さくなりました。

display: inline;では、サイズの指定ができないのです。

コンテンツのサイズに合わせるinline要素と、コンテンツのサイズを指定できるblock要素が合わさったものが、inline-blockになります。

コンテンツを簡単に横並びしたい場合便利ですので、ぜひ試してみてください。