9月
2

HTMLを学ぶならブロック要素とインライン要素を知っておこう

HTMLを勉強していると良く見られるブロック要素とインライン要素。
一体何が違うのか、名前は出てくるけど説明が出てこない。
なんとなく読み流している人も多いのでは。
難しい話ではないのでここで覚えてしまいましょう。



ブロック要素とは

ブロック要素は、表示に関して次のように定義されています
  • 視覚環境のUA(グラフィカルブラウザ)では表示域の左右いっぱいまでの範囲(行単位)を占め、前後に改行を置いて表示されます。
実際に表示はどうなるのか。
例えば、次のような代表的なブロック要素<div>を使った場合、
ここはブロック要素の説明です。<div>ブロック要素を使うとこのように独立した行になります。</div>わかりましたか?
ここはブロック要素の説明です。
ブロック要素を使うとこのように独立した行になります。
わかりましたか?
文章や画像などの要素に挿入した場合、
その前後に改行が入れられて、独立した行として表示される要素のことを言います。
インライン要素との対比で考えるとその役割がよくわかります。

インライン要素とは

インライン要素は名前の通りinline、つまり行内要素です。
ボックス要素が独立した行に表示されるのに対し、インライン要素は行内に挿入できる要素です。

実際にインライン要素も表示はどうなるのか見てましょう。
例えば、次のような代表的なインライン要素<span>を使った場合、
ここはインライン要素の説明です。<span>インライン要素は行内に入ることができます。</span>わかりましたか?
ここはインライン要素の説明です。インライン要素は行内に入ることができます。わかりましたか?
ブロック要素と違って、改行されずにそのまま行内に表示することができます。
見た目は変わりませんが、構造的にはきちんとインライン要素として範囲が区切られています。

ブロック要素とインライン要素、大切なので覚えておきましょう

ブロック要素やインライン要素はHTMLを扱う上で非常に大切な知識になります。
ホームページを作っているとレイアウトでさまざまな壁にぶち当たります。
初めはなんでここに改行が入っちゃうの?っていうこともしばしば。
その原因がこういったブロック要素やインライン要素の違いだったりすることもあります。
難しい考え方ではないので覚えておきましょう。

関連するタグとして
ブロック要素の範囲を指定する<div>タグ
インライン要素の範囲を指定する<span>タグ
があります。

2 Comments to “HTMLを学ぶならブロック要素とインライン要素を知っておこう”

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事