Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

ブロックレベル要素

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>
ナビゲーションのリンクを含む
<noscript>
スクリプトが非サポートまたは無効である場合に使用するコンテンツ
<ol>
順序付きリスト
<output> HTML5
フォームの出力
<p>
段落
<pre>
整形済みテキスト
<section> HTML5
Web ページのセクション
<table>
<tfoot>
表のフッター
<ul>
順不同リスト
<video> HTML5
動画プレイヤー

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, Marsf
 最終更新者: yyss,