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

HTMLは開始タグと終了タグでくくられた要素の集合体で形成されています。body要素の中で使われる要素は、大きく分けて二種類あります。それがブロックレベル要素と、インライン要素です。

HTMLやCSSを覚えていくうちによく目にする名前ですが、この二つの存在を正しく理解出来るかどうかが、CSSデザイン上達のカギと言えます。ここでブロックレベル要素インライン要素について解説して行きますので、参考になれば幸いです。

ブロックレベル要素

ブロックレベル要素は、『見出し』『段落』など文書を構成する基本要素となるものです。分かりやすく言うと『お弁当箱』です。body要素がテーブルだとすれば、そこに直接おかずを並べてしまっては行儀が悪いですよね。まずどんな器に盛って何処に配置するかをブロックレベル要素で決めます。メインディッシュなら<h1>に盛ろうか、おせち料理なら<table>ね、とか。大体感覚を掴んで頂ければオッケーです。

さて、ブロックレベル要素は様々な種類がありますが、基本的にはブラウザで言うと、横幅一杯の領域を占領します。例えば<p>の弁当箱に『あ』という具を1つだけ放り込んでも、横一列は<p>の領域です。つまり、ブロックレベル要素を横に並べて配置する事は出来ません。しかし、CSSの登場によって、ブロックレベル要素の幅を決める事が出来るようになりました。positionや、floatなどを使って今まで不可能だった事が出来るようになった訳ですね。

ブロックレベル要素の中にブロックレベル要素を入れ子に出来るもの、インライン要素のみ受け付けるもの、hrのように内容を持たないものなどがあります。

主要ブロックレベル要素
div 一般的なブロックレベルの容器 
h1〜h6 見出し 
段落 
pre 整形文 
dl 定義リスト 
ol 序列付リスト 
ul 非序列リスト 
form フォーム 
hr 横罫線 
table 表(テーブル) 

インライン要素

インライン要素は、ブロックレベル要素の内容として用いられるもので、ブロックレベル要素が『お弁当箱』だとすれば、インライン要素は『おかず』です。おかずはきちんと弁当箱に入れて食べなければなりませんから、<body>要素の上にいきなりインライン要素を置く事は出来ません。もちろん『ただの文字列』もブロックレベル要素の内容物として、丁寧に扱ってあげましょう。

また、インライン要素は、ブロックレベル要素を子に持つ事が出来ません。

主要インライン要素
リンク 
img 画像、イメージ 
br 改行 
span 万能容器 
strong 強調、重要 
em 強調 
引用句 
cite 引用元 
object オブジェクト 

戻る

TOP