HTML (Hypertext Markup Language) 要素は通常、 "ブロックレベル" 要素または "インライン" 要素のいずれかになります。ブロックレベル要素は親要素 (コンテナ) の領域全体を占有して、"ブロック" を生成します。この記事では、ブロックレベル要素が意味することを説明します。
ブラウザは一般的に、前後に新しい行を伴ってブロックレベル要素を表示します。以下のサンプルでは、ブロックレベル要素が与える影響を示しています。
ブロックレベル要素
HTML
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
CSS
p { background-color: #8ABB55; }
使用法
- ブロックレベル要素は
<body>要素内にのみ現れます。
ブロックレベル要素とインライン要素
ブロックレベル要素とインライン要素の間には、大きな違いが 2 つあります:
- 整形
- デフォルトでは、ブロックレベル要素は新しい行から始まります。一方インライン要素は、行内のどこからでも始めることができます。
- 内包モデル
- 一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含みます。この固有の構造による区別は、ブロック要素がインライン要素よりも "大きな" 構造を構築するという考え方です。
ブロックレベル要素とインライン要素という区分は、HTML 4.01 までの仕様で使用されていました。HTML5 ではこの 2 つの区分が、より複雑なコンテンツカテゴリの組み合わせに置き換えら得ました。"ブロックレベル" カテゴリはおおむね HTML5 のフローコンテンツに、また "インライン" はフレージングコンテンツに対応していますが、他にもカテゴリが存在します。
要素
ブロックレベル要素の一覧は以下のとおりです (ただし HTML5 の新規要素は、技術的に "ブロックレベル" であるとは定義されていません)。
<address>- 連絡先情報
<article>HTML5- 記事コンテンツ
<aside>HTML5- 本論から外れたコンテンツ
<blockquote>- 長い ("ブロック") 引用
<canvas>HTML5- canvas を描画
<dd>- 定義の説明
<div>- ドキュメントの一部
<dl>- 定義リスト
<fieldset>- フィールドのセットを示す
<figcaption>HTML5- 図表のキャプション
<figure>HTML5- キャプション (
<figcaption>を参照) を伴うメディアコンテンツのグループを作る <footer>HTML5- セクションまたはページのフッター
<form>- 入力フォーム
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- 見出しレベル 1-6
<header>HTML5- セクションまたはページのヘッダー
<hgroup>HTML5- 見出し情報のグループを作る
<hr>- 水平線 (区切り線)
<li>- リストの項目
<main>- ドキュメントで唯一の中心的なコンテンツを含む
<nav>- ナビゲーションのリンクを含む