＜blockquote要素＞ - ブロックレベルの引用

公開日: 2017/02/09

blockquote要素は、内容が、外部から引用したものであることを表す要素です。この要素はブロック要素です。インラインレベルでマークアップしたい場合はq要素を利用しましょう。

概要

名前

blockquote

カテゴリー

Flow content

Sectioning content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLQuoteElement

デフォルトのスタイル

blockquote {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 40px;
	-webkit-margin-end: 40px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-blockquote-element

属性

cite

引用元のURL、または情報を表す文字列。この属性は表示に反映されない。ユーザー向けではなく、ユーザーエージェント向けの属性である。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

最も簡単な使い方は、引用したテキストをそのまま囲むことです。

HTML

<p>クラークの名言に次の言葉があります。</p>

<blockquote>
	<p>少年よ、大志を抱け</p>
</blockquote>

引用した内容に関する情報はblockquote要素の外にマークアップしなければいけません。さもないと、それらの情報自体が引用だと解釈されてしまいます。

HTML

<p>クラークの名言に次の言葉があります。</p>

<div>
	<blockquote>
		<p>少年よ、大志を抱け</p>
	</blockquote>
	<p>— クラーク</p>
</div>

引用元の情報をcite属性に指定すると、ユーザーエージェントがそれを解釈します。cite属性の内容はブラウザには表示されません。引用元がウェブページである場合はURLを指定しましょう。

HTML

<p>クラークの名言に次の言葉があります。</p>

<div>
	<blockquote cite="クラーク名言大全集(架空の本)">
		<p>少年よ、大志を抱け</p>
	</blockquote>
	<p>— クラーク</p>
</div>

figure要素とfigcaption要素とcite要素を利用して、次のようにマークアップすることもできます。引用元に関する情報をblockquote要素と結び付けて、ユーザーにも表示できます。当サイトではこのマークアップ方法を採用しています。

HTML

<p>クラークの名言に次の言葉があります。</p>

<figure>
	<blockquote>
		<p>少年よ、大志を抱け</p>
	</blockquote>
	<figcaption>
		<p><cite>クラーク名言大全集(架空の本)</cite>より引用</p>
	</figcaption>
</figure>

blockquote要素とq要素の役割は同じです。違いは、前者がブロック要素で、後者がインライン要素であることです。例えば、複数の段落をまとめて引用コンテンツとしてマークアップするにはblockquote要素の方が適しているでしょう。

blockquote要素とq要素の違い

<!-- 間違った例 -->
<p>次は全て引用だ。</p>
<q>
	<p>あの日、君は見ていた</p>
	<p>素敵な月を、見ていた</p>
</q>

<!-- 正しい例 -->
<p>次は全て引用だ。</p>
<blockquote>
	<p>あの日、君は見ていた</p>
	<p>素敵な月を、見ていた</p>
</blockquote>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜blockquote要素＞ - ブロックレベルの引用</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/blockquote/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>blockquote要素は、引用する時に利用します。</p>

<div>
	<blockquote cite="クラーク名言大全集(架空の本)">
		<p>少年よ、大志を抱け</p>
	</blockquote>
	<p>— クラーク</p>
</div>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/588/"> <meta charset="utf-8"> <title>【デモ】＜blockquote要素＞ - ブロックレベルの引用</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/blockquote/"> </head> <body>

<p>blockquote要素は、引用する時に利用します。</p> <div> <blockquote cite="クラーク名言大全集(架空の本)"> <p>少年よ、大志を抱け</p> </blockquote> <p>— クラーク</p> </div>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>