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 はその罠の影響を受けるので注意してください。

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

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

CAPTCHA