読者です 読者をやめる 読者になる 読者になる

floatが嫌になって来た頃にinline-blockを覚えるというCSS初心者の階段を登る

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

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

 

今回、フリーランスとしての初仕事を経て、マークアップについて、「いろは」から少し実践的なやり方を学ぶことができました。

そこで気づいたこととしては、floatは、floatを子要素につけた場合に、親要素が高さを認識してくれないため、clearfixつけたりしなくてはいけないし、floatが付いている要素と付いていない要素とで認識し合わないことで、レイアウトがずれるなど少々面倒です。

 

※floatをつけた時に親要素にclearfixをつけなければいけない話については、下記の記事を参考にしてください。

tacosvilledge.hatenablog.com

 

そして、今回わかったのは、実はもちょいうまいやり方があるということです。

 

そこで使うのが、inline-block(インラインブロック)!

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

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

 

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

「インライン要素」(もし分からなかったらググってくださいね)は、aタグ、imgタグ、spanタグなどで、これらは、横に並べた場合、改行されません。

 

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

 

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

 

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

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

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

 

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

 

そこで、「display: inline-block」とCSSファイルに記述すれば、それが叶うような機能が実装された、ということだと思います。

 

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

 

 

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

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

 

 

おしまい。