ブロックレベル要素
HTML (Hypertext Markup Language) の要素は従来、 「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS においてフローレイアウトの中で定義されています。ブロックレベル要素は親要素 (コンテナー) の水平空間全体と、内容物の高さに等しい垂直空間を占有し、「ブロック」を生成します。この記事では、 HTML のブロックレベル要素とは何か、インラインレベル要素とどのように異なるかを説明します。
ブラウザーは一般的に、前後に新しい行を伴ってブロックレベル要素を表示します。これはボックスを積み上げたように見えます。
メモ: ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります (できる限り左右に伸びます)。
以下の例では、ブロックレベル要素が与える影響を示しています。
ブロックレベル要素
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>要素内にのみ現れます。
ブロックレベル要素とインライン要素
ブロックレベル要素とインライン要素の間には、二つの大きな違いがあります。
- 包含モデル
-
一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。この固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。
- 既定の整形
-
既定では、ブロックレベル要素は新しい行から始まりますが、インライン要素は行内のどこからでも始めることができます。
ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様書で使用されていました。 HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの組み合わせに置き換えられました。「インライン」はおよそ記述コンテンツのカテゴリに対応しているのに対し、「ブロックレベル」カテゴリは HTML5 のコンテンツカテゴリには直接対応しませんが、「ブロックレベル」要素と「インライン」要素の組み合わせは HTML5 のフローコンテンツに対応します。他にも、対話型コンテンツなどの他のカテゴリも存在します。
要素
「ブロックレベル」要素の一覧は以下のとおりです (ただし HTML5 の新規要素は、厳密には「ブロックレベル」であると定義されていません)。
<address>-
連絡先情報です。
<article>-
記事コンテンツです。
<aside>-
本論から外れたコンテンツです。
<blockquote>-
長い (「ブロック」の) 引用です。
<details>-
折りたたみウィジェットです。
<dialog>-
ダイアログボックスです。
<dd>-
定義リストで用語を説明します。
<div>-
文書の一部です。
<dl>-
定義リストです。
<dt>-
定義語リストの用語です。
<fieldset>-
フィールドセットのラベルです。
<figcaption>-
図表のキャプションです。
<figure>-
キャプション (
<figcaption>を参照) を伴うメディアコンテンツをグループ化します。 -
セクションまたはページのフッターです。
<form>-
入力フォームです。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>-
見出しレベル 1-6 です。
<header>-
セクションまたはページのヘッダーです。
<hgroup>-
見出し情報をグループ化します。
<hr>-
水平線 (区切り線) です。
<li>-
リストの項目です。
<main>-
この文書で固有の中心的なコンテンツを含みます。
-
ナビゲーションのリンクを含みます。
<ol>-
番号付きリストです。
<p>-
段落です。
<pre>-
整形済みテキストです。
<section>-
ウェブページのセクションです。
<table>-
表です。
<ul>-
番号なしリストです。