ブロック要素並びにインライン要素とは
はじめに
概要
Webサイトを構築する際には、タグの理解が重要です。特に、ブロック要素とインライン要素という2つのタグの特徴を把握することが重要です。ここでは、その要素について深掘りしていきます。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
特徴
ブロック要素
ブロック要素は、積み木のような要素です。横幅いっぱいに広がるため、要素が横に並ぶことはありません。代表的なタグとしてhタグPタグ等があります。
インライン要素
インライン要素は、基本横幅が決まっているため、その要素が横並びになります。代表的なタグとしてimgタグspanタグaタグ等があります。
以下はbackground-colorを設定し、よりわかりやすく表示したものです。なお、一番下の要素はinputタグになります。
インライン要素を深掘る
imgタグはインライン要素のため、以下のように2つ記述すると当然横並びになります。
<body> <img src="img.jpg" alt=""> <img src="img.jpg" alt=""> </body>
これを縦並びにしたいときは、imgタグをブロック要素で囲む方法があります。ここでは代表的なdivタグで囲っております。
インライン要素をブロック要素で囲めばレイアウトがしやすくなりますので、活用してみてください。
お疲れ様です。タグによってブロック要素とインライン要素で挙動が変わるので、しっかりと理解してデザインを作成してください。
まとめ
- ブロック要素とインライン要素の種類を把握する
- 特徴を理解し、デザインを形成する
- インライン要素をブロック要素で囲めばデザインが形成しやすい