ウェブランサー

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

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

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

ブロックレベル要素

ブロックレベル要素は、「見出し」「段落」などの文書を構成する基本要素となるものです。『お弁当箱』のような箱をイメージしてみて下さい。body要素が食卓だとすると、そこに直接おかずを並べてしまっては行儀が悪いですよね。まずどんな器に盛って何処に配置するかをブロックレベル要素で決めます。透明の箱で内容物をどのように配置するかを決めるものがブロックレベル属性です。

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

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

主要なブロックレベル要素

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

インライン要素

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

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

主要なインライン要素

タグ 説明
a リンク
img 画像(イメージ)
br 改行
span 汎用的な用途で用いられるインライン要素
strong 重要な要素として定義する
em 強調
q 引用句
object オブジェクト

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます