We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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> 要素内にのみ現れます。

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

ブロックレベル要素とインライン要素の間には、二つの大きな違いがあります。

整形
既定では、ブロックレベル要素は新しい行から始まりますが、インライン要素は行内のどこからでも始めることができます。
内包モデル
一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。この固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。

ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様で使用されていました。 HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの組み合わせに置き換えられました。「ブロックレベル」カテゴリはおおむね HTML5 のフローコンテンツに、また「インライン」は記述コンテンツに対応していますが、他にもカテゴリが存在します。

要素

ブロックレベル要素の一覧は以下のとおりです(ただし HTML5 の新規要素は、技術的に "ブロックレベル" であるとは定義されていません)。

<address>
連絡先情報です。
<article>
記事コンテンツです。
<aside>
本論から外れたコンテンツです。
<blockquote>
長い(「ブロック」の)引用です。
<canvas>
キャンバスの描画です。
<dd>
定義リストで用語を説明します。
<div>
文書の一部です。
<dl>
定義リストです。
<dt>
定義語リストの用語です。
<fieldset>
フィールドセットのラベルです。
<figcaption>
図表のキャプションです。
<figure>
キャプション(<figcaption> を参照)を伴うメディアコンテンツをグループ化します。
<footer>
セクションまたはページのフッターです。
<form>
入力フォームです。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
見出しレベル 1-6 です。
<header>
セクションまたはページのヘッダーです。
<hgroup>
見出し情報をグループ化します。
<hr>
水平線(区切り線)です。
<li>
リストの項目です。
<main>
この文書で固有の中心的なコンテンツを含みます。
<nav>
ナビゲーションのリンクを含みます。
<noscript>
スクリプトに対応していないか、無効にしてある場合に使用するコンテンツです。
<ol>
番号付きリストです。
<output>
フォームの出力です。
<p>
段落です。
<pre>
整形済みテキストです。
<section>
ウェブページのセクションです。
<table>
表です。
<tfoot>
表のフッターです。
<ul>
番号なしリストです。
<video>
動画プレイヤーです。

関連情報

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

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