inline-blockでwidth:50%でも横に並ばない原因と解決する方法

ちょっと昔僕がはまった単純なHTMLの罠の話です。

ブロック要素は通常連続して書くと横幅の設定値に限らず改行されて縦に並びます。

displayプロパティに inline-block を設定すると、ブロック要素のようだけどテキストなどのように横に並ぶようになります。

しかし、widthで50%を指定して横に2つずつ並べようとすると何故か並びません。

49%だったら並びましたけど気持ち悪いです。

今回は inline-block で横にすっきり並べる方法と、それ以外にきれいに並べる方法をご紹介します。

inline-blockで横に並ばない原因

HTMLは基本的に半角スペースやタブは認識しないと僕は覚えています（いました）。

半角スペースを表示させるためにはエスケープされた文字「 」を使います。

でもここにちょっとした罠があります。

例えば以下のようなHTMLの要素と文章があります。

これを表示されると以下のようになります。

これは普通ですね。

では、以下のようなHTMLの場合はどうでしょう。半角スペースを入れてみました。

これを表示したらこうなります。

半角スペースとして入れたわけではないのに入ってしまいます。

上の４つのブロック要素にも間に改行があります。

スペースやタブが入ることも多いでしょう。

これがスペースになり、widthで50%を指定してもスペースの分50％以上になってしまいきれいに並ばないのです。

inline-blockで横に並ばせる方法

改行を取り除く

改行部分をコメントなどで隠しても大丈夫です。

CSSで改行を無視する

親要素の文字間隔を1文字分マイナス(-1em)にしてスペースを消し、横並びにする子要素で通常(0em)に戻すことで間のスペースを消すことが出来ます。

でも、これもちょっと強引ですけど、CSSで対応出来るのでありかと思います。

floatで並ばせる方法

だけどfloatってなんだか扱い辛いイメージもあります。

使うときには親要素も用意して、:after でfloatをクリアする記述も追加した方がよいです。

ちなみにfloatを使う場合は、inline-block である必要はありません。blockでよいです。

flexを使う方法

でも通常だと要素が1行に並ぶようになるので、flex-wrap: wrap; で折り返し出来るようにします。

子要素はこれもinline-blockである必要はありません。blockでよいです。

flexはCSS3からの新しい機能だし、非常に便利です。

僕は最近はHTMLなどは外注しちゃうのでよく分かりませんでしたが、一般的にはこれが一番良い方法なのかもしれません。

まとめ

今回は横に並べる方法というより、HTMLのスペースの罠について注意してほしいということを伝えたいです。

inline-block はその罠の影響を受けるので注意してください。

横に並べる方法は縦列の数が決まっているならテーブルを使ってもよいかもしれないです。