ブロックレベル要素とインライン要素
(X)HTMLは、開始タグと終了タグでくくられた要素の集合体で形成されています。body要素の中で使われる要素は、大きく分けて二種類あります。それがブロックレベル要素とインライン要素です。
(X)HTMLやCSSを覚えていくうちによく目にする名前ですが、この二つの存在を正しく理解できるかどうかが、CSSデザイン上達のカギと言えます。ここでは、ブロックレベル要素とインライン要素について解説して行きますので、参考になれば幸いです。
ブロックレベル要素
ブロックレベル要素は、「見出し」「段落」などの文書を構成する基本要素となるものです。『お弁当箱』のような箱をイメージしてみて下さい。body要素が食卓だとすると、そこに直接おかずを並べてしまっては行儀が悪いですよね。まずどんな器に盛って何処に配置するかをブロックレベル要素で決めます。透明の箱で内容物をどのように配置するかを決めるものがブロックレベル属性です。
さて、ブロックレベル要素は様々な種類がありますが、基本的にはブラウザで横幅一杯の領域を占領します。例えば<p>の弁当箱に『あ』という具を１つだけ放り込んでも、横一列は<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]の使い方について |
| ユニバーサルセレクタ（*）について | ユニバーサルセレクタ（全称セレクタ）を使えば全てのタグを一括で指定できます |