HTMLには、改行されて縦に並ぶ要素や、横に続けて表示される要素が存在します。
本記事では、混同しやすいブロック要素とインライン要素、さらにインラインブロック要素についてまとめてみました。
本記事を読むことによって、下記について理解を深めることができます！
- ブロック要素、インライン要素、インラインブロック要素の違いが理解できる
- それぞれどのようなタグが該当するのか把握できる
- CSSでの指定方法が理解できる
本記事を通し、HTMLやCSSを勉強されている方のお悩みが解決できましたら幸いです。
目次
ブロック要素（block）
ブロック要素とは
ブロックレベル要素とは、縦にそのまま出力される要素で、よく使用する要素（タグ）として、以下のものが挙げられます。
- <h1> ～ </h1> ・・・ <h6> ～ </h6>
- <p> ～ </p>
- <div> ～ </div>
- <header> ～ </header>
- <footer> ～ </footer>
- <nav> ～ </nav>
- <main> ～ <main>
- <section> ～ </section>
- <article> ～ </article>
- <aside> ～ </aside>
- <ul><li> ～ </li></ul>
- <ol><li> ～ </li></ol>
- <table> ～ </table>
- <form> ～ </form>
コーディングした際の挙動について
ブロック要素を実際にコーディングすると以下のような形で出力されます。
See the Pen
Untitled by 岩村彰斗 (@fynxbyun-the-flexboxer)
on CodePen.
タグごとに改行されて出力されておりますね！
このようにブロックレベル要素では、width（横幅）やheight（縦幅）を指定しない場合、widthは画面横幅いっぱいに、heightは”auto”となり、上記の場合は文字の大きさ分、高さが設定されております。
widthとheight、marginやpaddingも指定してみましょう！
