Sorairo

photo credit: Jeffrey Flexible Boxes – next-generation CSS designed to create layouts via photopin (license)

CSSで複数の要素を横並びにする方法

ブログのグローバルメニューやパンくずリストの他、SNSシェア用のボタンなど複数の要素を横並びにしたい時ってたくさんあると思います。
ただ、同じ横並びでもCSSでの実装方法はいくつかあって一体どれを使うのがいいのか迷う時がありますので、備忘録的にまとめてみたいと思います。

advertisement

共通のHTML

以降、サンプルとして示すもののHTMLは以下のようにします。

この状態では当然以下のように要素が縦に並んだだけの状態です。

See the Pen Default HTML by ryskyshd (@ryskyshd) on CodePen.

display: inline;

まずは一番簡単な方法ですが、CSSのdisplay: inline;を使う方法です。
一つ一つの要素に指定したクラス名のitemdisplay: inline;を指定します。

すると、以下のようにそれぞれの要素が横並びになります。

See the Pen display inline by ryskyshd (@ryskyshd) on CodePen.

display: inline-block;

続いてはdisplay: inline-block;です。
上記のdisplay: inline;と見た目は同じですが、marginやpadding指定時の挙動が異なるようです。

See the Pen display inline-block by ryskyshd (@ryskyshd) on CodePen.

なお、display: inline;display: inline-block;の共通の挙動として、HTMLの記述で要素と要素の間に改行を入れると、要素間に隙間ができます。
隙間がないようにするには、以下のように要素同士を改行なしで記述する必要があります。

背景色を指定するとよく分かります。

See the Pen display inline background-color by ryskyshd (@ryskyshd) on CodePen.

要素間に隙間が空いてるのが分かると思います。
HTMLを改行なしで記述すると以下のように隙間なく表示されます。

See the Pen display inline background-color not br by ryskyshd (@ryskyshd) on CodePen.

display: table-cell;

これはほとんど使ったことがないのでよく分かりません(苦笑)

See the Pen display table-cell by ryskyshd (@ryskyshd) on CodePen.

これだと要素間の隙間もなく横並びになるようですね。

float: left;

CSSで横並びというと、少し前まではこのfloat: left;が多かったと思います。
これのデメリットは文字通り要素を浮かせるので、何もしないと後続の要素まで横並びになるためレイアウトが崩れる点です。
これを解消するためにClearfixという方法がありますが、ブラウザごとに対応が異なるため効かなかったりCSSの記述量が多くなったりします。
ただ、それさえ注意すれば使い勝手の良い方法だと思います。

CSSは以下の通りです。

See the Pen float left by ryskyshd (@ryskyshd) on CodePen.

この方法でも要素間の隙間はなく表示されます。
ところが、先述の通り、このままだと後続の要素まで横並びになりますので、Clearfixを使う必要があります。

See the Pen float left following by ryskyshd (@ryskyshd) on CodePen.

親要素のwrapperに疑似要素の:afterを追加して以下のように記述します。

See the Pen float left clearfix by ryskyshd (@ryskyshd) on CodePen.

display: flex;

Flexboxと呼ばれるこのCSSはCSS3から新たに導入されたんですが、概念も理解しやすいし、CSSの記述もシンプルです。
早速試してみましょう。

CSSでは横並びにしたい要素の親要素にdisplay: flex;を指定するだけです。

これだけの記述で、後続の要素まで横並びになりません。

See the Pen display flex by ryskyshd (@ryskyshd) on CodePen.

親要素のwrapperに内包されている各要素(item)だけが横並びになります。
ほんとに簡単。
さらに色々なプロパティがありますので、並べ方や並び順など詳細な指定が可能となっています。
この辺はここでは省略しますが、以下の記事が参考になりました。

最後に

いかがでしたでしょうか。
Flexboxはほんとに簡単でそれでいてプロパティが豊富で細かな指定もできるし言うことなしです。
当ブログではブログ全体のレイアウトからグローバルメニューやパンくずリスト等々、横並びのレイアウトにはほとんどFlexboxを使ってます。

advertisement

related posts

TOLOTで2014年の卓上カレンダーを作ってみました!

フォトブックを作ってくれるサービスは数多くありますが、今回は卓上カレンダーを作ってくれるTOLOTを利用してみました。このクオリティで送料込みの500円は安い!

CSSの小ネタを5つご紹介します。

CSSの小ネタをいくつかご紹介したいと思います。

当ブログをご紹介いただきました!

私の大好きなブログ、イロトリドリのこっこさんから当ブログをご紹介いただきました。相思相愛で良かったです(笑)

最近Pocketに保存した気になる記事をご紹介します。

「あとで読む」サービスのPocketに最近保存した、私が気になった記事をご紹介します。

私が好きなデザインのWebサイトを5つだけご紹介します。

WebサイトのギャラリーサイトCSSManiaの中から個人的に好みのサイトをご紹介します。

マウスオーバー時に沈みこむ挙動のボタンをCSSで作成する方法

CSSで作るマウスオーバー時に沈むような挙動のボタンをご紹介します。

ブログに欠かせないShareHtml、AppHtmlの細部をカスタマイズしました。

凝り性の私は細かいところを自分の好きなようにカスタマイズするのが大好きです。今回はShareHtml、AppHtmlを細かくカスタマイズしたのでご紹介します。

Webサイト制作時に素人の私が重宝しているオンラインツールまとめ。

新規Webサイト構築の際にとても重宝しているオンラインツールをまとめてみました。素人にはありがたいものばかりです。