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

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

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

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

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

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

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

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

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

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

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

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

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

TEXTTEXT

 

これは普通ですね。

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

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

TEXT TEXT

 

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

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

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

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

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

改行を取り除く

なんだか乱暴な方法ですが、上のコードの様に改行せずにHTMLを1行で記載すればきれいに並びます。

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

CSSで改行を無視する

letter-spacing とは、文字の間隔を指定するプロパティです。

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

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

floatで並ばせる方法

個人的にはfloatを使うのが一番無難な感じがします。

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

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

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

flexを使う方法

親要素でdisplay: flex;を指定することで横並びにさせることも出来ます。

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

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

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

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

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA