ywork2020.com

Title

ブロックレベル要素とインライン要素とは

目次 (INDEX)

ブロックレベル要素とインライン要素について

HTML5では、「 ブロックレベル要素 」 と 「 インライン要素 」 という表現は廃止され、 「 要素のカテゴリー 」 になりましたが、CSS の仕様書においては今でも利用されている用語です。

目次に戻る

ブロックレベル要素とは

ブロックレベル要素 とは 「見出し要素」、「段落要素」、「表要素」、「コンテナー要素」などの、ページの骨格を形成するための要素で、 コンテンツをまとめる括りとして使用される要素です。 この要素は一つのブロックとして認識されるので、このような呼び方をします。 ブラウザの表示でも一つのブロックとして扱われ、一般的なブラウザでは前後に改行が入ります。

それでは「ブロックレベル要素」のサンプルを見てみましょう。

<ブロック要素のタグ>
コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、 コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ
</ブロック要素のタグ>

このように<ブロック要素の開始タグ>~</ブロック要素の終了タグ>に内包されたコンテンツは一つのブロックとして認識され、前後には改行が入ります。 横幅や高さ、余白などの指定ができるのでページのレイアウトにも欠かせない要素です。

ブロックレベル要素の中にはインライン要素を内包することができます。また、ブロックレベル要素の中に他のブロックレベル要素を内包することも できますが、できないものも存在します。 例えばコンテナーであるdiv要素の中に段落要素であるp要素を内包することはできますが、逆にp要素の中にdiv要素を含むことはできません。 ただし、最近のブラウザでは要素を自動的に補正してエラーを回避しているものが増えてきました。これにより作りて側もコードの間違いに気づかないケースが増えてきました。

それでは次項でインライン要素を見ていきましょう。

目次に戻る

インライン要素とは

インライン要素とは、「文章に意味付けをする要素」や、「役割を与える要素」など、 ブロックレベル要素に内包された一部のコンテンツとして用いられることが多い要素であり、 下記のサンプルのように改行しても1行のラインとして扱われます。

また、要素の表示幅を指定するための widthプロパティは効果がなく、 要素の外側の余白である marginプロパティもmargin-leftの値しか効果がありません。 なお、インライン要素にインライン要素を内包することはできるのですが、ブロックレベル要素を内包することはできません。

<インライン要素のタグ>
コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、 コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ
</インライン要素のタグ>

目次に戻る

ブロックレベル要素の中にインライン要素を使用したサンプル

ブロックレベル要素の一つであるdiv「汎用的なコンテナー要素」を使用した場合のサンプルで見てみましょう。 インライン要素であるb要素とmark要素を使用しています。

〇〇〇〇〇 □□□□□
△△△△△
〇〇〇〇〇 □□□□□
△△△△△

このように、ブロックレベル要素の中で複数のインライン要素を使用することができます。 また、ブロックレベル要素を連続して配置した場合には、二つの要素は隣り合って表示されずに改行して表示されます。 ただし、ブロックレベル要素が隣り合って表示できないわけではなく、 CSSの float プロパティを使用することで実現することが可能です。

<div>
	<mark> 〇〇〇〇〇 <b> □□□□□ </b> <br> △△△△△ </mark>
</div>	
<div>
	<mark> 〇〇〇〇〇 <b> □□□□□ </b> <br> △△△△△ </mark>
</div>	

目次に戻る

インライン要素にインライン要素を使用したサンプル

インライン要素の一つである span は特に意味を持たない汎用的なインライン要素ですが、 <span>~</span>の間のコンテンツはグループ化することができます。ではサンプルを見ていきましょう。

上記のブロックレベル要素の中で使用した、div要素は改行されるのに対し、 span要素を使用しても改行はされることはなく、横に並んでしまいます。

コンテンツ コンテンツ コンテンツ コンテンツ

< span style="font-weight: bold;">
	コンテンツ <mark> コンテンツ </mark>
< /span>
< span style="color: ##lightcoral;">
	コンテンツ <b> コンテンツ </b>
< /span>

目次に戻る

ブロックレベル要素の一覧

address article aside
blockquote details dialog
dd div dl
dt fieldset figcaption
figure footer form
h header hgroup
hr li main
nav ol p
pre section table
ul

目次に戻る

インライン要素の一覧

a abbr audio
b bdi bdo
br button canvas
cite code data
datalist del dfn
em embed i
iframe img input
ins kbd label
map mark meter
noscript object output
picture progress q
ruby s samp
script select slot
small span strong
sub template textarea
time u var
video wbr

目次に戻る

置換インライン要素とは

置換インライン要素とは独立した外部オブジェクトが挿入される要素のことです。 これは挿入されたオブジェクトがCSSのスコープの外で表現される要素であり、コンテンツは現在の文書スタイルに影響されません。

インライン要素のうち、置換要素以外の要素は非置換インライン要素と呼ばれ、記述コンテンツやマークアップの役割をもつ要素となります。

置換インライン要素

置換要素として扱われる場合がある要素

目次に戻る