inline-blockで簡単レイアウト!

inline-blockで簡単レイアウト!

グローバルメニューやコンテンツを横並びにレイアウトしたいとき、なんでもかんでもfloatしていませんか?
floatでレイアウトしようとする場合、例えばグローバルメニューのリンクを中央寄せしたい!というときにとても不便です。

そういうときに活躍できるのがinline-block
一見floatだけで十分と思うようなデザインでも一手間加えてInline-blockでレイアウトしてあれば不意にデザインが変更となったときに柔軟に対応することができます。

対応ブラウザ

現在のモダンブラウザであればほぼ全てのブラウザでinline-blockを使用することができます。
IE7までは対応していないようですが、ここまで対応させる必要はほぼ無いといえるでしょう。

inline-blockとは?

inline-blockはインライン要素とブロックレベル要素の特徴を併せ持つちょっぴり特殊なスタイルです。
主な特徴としては以下の通り。

  • width、heighを指定できる
  • widthを指定しなければデフォルトではインライン要素のように要素そのものの横幅になる
  • floatしなくても横並びになる
  • vertical-alignを指定できる

このようにかゆいところに手が届くスタイルになっています。

vertical-alignを使った上下レイアウト

グローバルメニューにアイコン画像を使うようなデザインの場合、上下を中央揃えにしたい場合があります。
その場合、table-cellを使って中央揃えにするといったこともできますが、少々扱いがややこしいスタイルです。

inline-blockであればもっと簡単に中央揃えにすることができます。

See the Pen inline-block vm by くりはら (@kuriative) on CodePen.

このようにinline-blockやインライン要素がfloatをしようせず横並びになっているレイアウトの場合、inline-blockに対してvertical-alignを使用することで中央揃えにすることができます。
ただし、inline-blockで指定している要素の中に対しては上下中央揃えは適用されないので注意が必要です。

横並びレイアウトのコツ

inline-blockを使用して横並びにしたときによくある事象が要素間に生じる謎の隙間です。
この隙間はmarginやpaddingを0にしても消えることはなく、この隙間のせいでレイアウト崩れが生じ、結局floatで対応してしまうといった経験をした方もたくさんいるかと思います。
特にinline-blockしている要素に対してwidthと余白のmarginを%で指定したい場合にはかなり致命的な隙間となります。

実はこの隙間の正体は”改行“なのです。
改行とはいえ、<br>タグのことを指すのではなく、実際にHTMLをコーディングしているときに見やすいようにEnterキーを押して改行したその改行部分のことを言います。

ではその正体が分かったところでどのように対処すればいいのか、以下がオススメの対処法を施したサンプルコードになります。

See the Pen inline-block 3col by くりはら (@kuriative) on CodePen.

その上でinline-blockを指定している要素に対して新たにfont-sizeを指定することでデザインに影響を与えずに改行で作られた隙間を0にすることができます。
また、cssの組み方によってはfont-sizeに加えてletter-spacingを0に指定する必要があることもあるようです。

この方法以外にも以下のような方法があります。

改行部分をコメントアウトしてしまう

そもそも改行しない

HTML5の場合閉じタグを使用しない

しかしこの3つの方法は自分以外の誰かがこのコードを編集するときに、不要なコメントアウトと思い削除・見やすさのために改行・閉じ忘れと思い閉じタグを挿入といったことが起こりうるため個人的にはあまりオススメしません。(実際にあった体験談です。)

まとめ

いかがでしたでしょうか。
inline-blockの扱いに慣れることができればfloatよりも簡単かつ柔軟に様々なレイアウトを組むことができるのでぜひ活用してみてください。


Previous: セールスレターを書く前に。特徴を売れるパーツに変換するワークって? Next: ランディングページデザインの3つのポイント!

© 2017 ALL CONNECT Inc. All Rights Reserved.