SYNCERのロゴ
アイキャッチ画像

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

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

概要

名前
blockquote (Blockquote)
カテゴリ
Flow content
Sectioning content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
Flow content。
タグの省略
開始タグも終了タグも省略できません。
コンテンツ属性
cite - 引用元のURL。
DOM Interface
HTMLQuoteElement
デフォルトのスタイル

Chrome / Firefox / Safari

blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    unicode-bidi: isolate;
}
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/grouping-content.html#the-blockquote-element

属性

cite属性

引用元のURL。この属性は表示に反映されない。人間ではなく、専らユーザーエージェント向けの属性。

グローバル属性

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

チュートリアル

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

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

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

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

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

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

引用元がウェブサイトである場合、cite属性にURLを指定すると、ユーザーエージェントが引用元を解析する助けとなります。決まったことではありませんが、引用元をリスペクトするなら属性を付けるのを忘れないようにしましょう。

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

<div>
	<blockquote cite="https://example.com/">
		<p>少年よ、大志を抱け</p>
	</blockquote>
	<p>— クラーク</p>
</div>

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

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

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

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

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

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

デモ

blockquote要素のデモです。

<!-- このコードは編集できます。 -->

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

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
blockquote要素
cite属性
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年2月9日 (木)
コンテンツを公開しました。