ブロックレベル要素とインライン要素
HTMLは開始タグと終了タグでくくられた要素の集合体で形成されています。body要素の中で使われる要素は、大きく分けて二種類あります。それがブロックレベル要素と、インライン要素です。
HTMLやCSSを覚えていくうちによく目にする名前ですが、この二つの存在を正しく理解出来るかどうかが、CSSデザイン上達のカギと言えます。ここでブロックレベル要素とインライン要素について解説して行きますので、参考になれば幸いです。
ブロックレベル要素
ブロックレベル要素は、『見出し』『段落』など文書を構成する基本要素となるものです。分かりやすく言うと『お弁当箱』です。body要素がテーブルだとすれば、そこに直接おかずを並べてしまっては行儀が悪いですよね。まずどんな器に盛って何処に配置するかをブロックレベル要素で決めます。メインディッシュなら<h1>に盛ろうか、おせち料理なら<table>ね、とか。大体感覚を掴んで頂ければオッケーです。
さて、ブロックレベル要素は様々な種類がありますが、基本的にはブラウザで言うと、横幅一杯の領域を占領します。例えば<p>の弁当箱に『あ』という具を１つだけ放り込んでも、横一列は<p>の領域です。つまり、ブロックレベル要素を横に並べて配置する事は出来ません。しかし、CSSの登場によって、ブロックレベル要素の幅を決める事が出来るようになりました。positionや、floatなどを使って今まで不可能だった事が出来るようになった訳ですね。
ブロックレベル要素の中にブロックレベル要素を入れ子に出来るもの、インライン要素のみ受け付けるもの、hrのように内容を持たないものなどがあります。
| 主要ブロックレベル要素 | |
|---|---|
| div | 一般的なブロックレベルの容器 |
| h1〜h6 | 見出し |
| p | 段落 |
| pre | 整形文 |
| dl | 定義リスト |
| ol | 序列付リスト |
| ul | 非序列リスト |
| form | フォーム |
| hr | 横罫線 |
| table | 表(テーブル) |
インライン要素
インライン要素は、ブロックレベル要素の内容として用いられるもので、ブロックレベル要素が『お弁当箱』だとすれば、インライン要素は『おかず』です。おかずはきちんと弁当箱に入れて食べなければなりませんから、<body>要素の上にいきなりインライン要素を置く事は出来ません。もちろん『ただの文字列』もブロックレベル要素の内容物として、丁寧に扱ってあげましょう。
また、インライン要素は、ブロックレベル要素を子に持つ事が出来ません。
| 主要インライン要素 | |
|---|---|
| a | リンク |
| img | 画像、イメージ |
| br | 改行 |
| span | 万能容器 |
| strong | 強調、重要 |
| em | 強調 |
| q | 引用句 |
| cite | 引用元 |
| object | オブジェクト |
