ブロック要素なんだけど左右に並べたい(なんて便利なinline-block)

水平に、画像や、文言や、四角や、いろんなものを並べたいということは頻繁にありますよね〜

まず私のような初心者としては、floatだっ!! と思うと思います。

しかしfloatって結構ややこしいし、思い通りにいかないことが多いのです。

 

ありがち二大お困りごとは、

  1. floatを子要素につけたとき、親要素に高さを認識してもらうためclearfixつけるのですが、うまくいかない・・・
  2. floatが付いている要素と付いていない要素とで認識し合わないことで、レイアウトがずれる・・・

 などでしょうか・・・。

 

※親要素につけるclearfixについては、下記参照。

tacosvilledge.hatenablog.com

 

そんな、floatが嫌になって来た頃、inline-blockを覚えるというCSS初心者にありがち(だと思われる)階段を登りきりましたので、備忘メモを記しておきます。

 

inline-block(インラインブロック)!

「display: block」や「display: none」といった書き方は、

要素を表示したり、消したりするときなんかに私のような初心者でも結構最初から使っていましたが、このdisplayプロパティで、inline-blockというものを指定することができます。

 

inline-blockは、「インライン要素なんだけど、高さと幅を指定できる」というものです。

「インライン要素」は、<a>タグ・<img>タグ・<span>タグなどのことで、これらは繋げて書くと、改行されません。

 

一方の「ブロック要素」は、<div>タグ、<h1〜h3>タグ、<p>タグ、<table>タグ、<ol>,<ul>,<dl>タグなどですが、これらは、仮にHTML上で横に並べて書いたとしても、ひとつひとつのタグの要素ごとに改行されて表示されます。

 

これは学校で結構最初に習って、「重要だから覚えておくんだよ〜」と言われましたし、CSSの効く効かない(text-alignやvertical-align, margin: 0 auto; など)で悩まされるものではあるのですが、今回ほどその違いを意識したことはありませんでした!

 

インライン要素は、横並びに表示される。

ブロック要素は、改行される。

であれば、ブロック要素を横並びに表示したいときは、「インライン要素」ぶってもらえばいいんだ!!\(^o^)/

 

(きっと考えたのは自由な発想の持ち主じゃないかな)

 

そこで、ブロック要素に「display: inline-block」を付記すれば、それが叶うような機能が実装された(予想)

 

ということで、ブロック要素なんだけど左右に並べたい時には、「display: inline-block」をつけてあげれば、floatは左〜右〜 あー みたいなことをやらなくても、同じ行に水平に並んでくれるのです。 

 

自分で学んでなんとなく感動したので備忘も兼ねて書いたのですが、W3Schoolのサイトでまさにシンプルにわかりやすく、floatでやっていたことがinline-block使うと御し易い旨、説明されていました!

サンプルも載せられていて、よくわかります! ご参考までに。

 

 

おしまい。

 

2017.06.18追記:

inline-blockで横並びにした時、vertical-alignも一緒に付与するのが良さそう。

横並びにした二つの要素両方に、vertical-align: bottomをつけると、

一番下のラインで水平に並んでくれます。

vertical-align: top にすると、一番上のラインで水平に並んでくれます。

便利!

 

また、inline-blockで横並びすると、間に3pxほどの間があいてしまう。

これがデザイン的に困る場合は、font-size: 0;が良さそう。

改行が全角文字として認識されることが原因だからだ。

inline-blockの隙間をなくす方法 - Qiita