このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

blockquote”要素:引用

記事Apr. 17th,2015
July 7th,2020
引用部分を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

blockquote”要素は他の情報源からの引用部分を表す要素です。

引用元のタイトルを表すためにはcite”要素を使用することができます。

blockquote”要素は段落のようなまとまった引用をするための要素です。行の中での短い引用を表すためにはq”要素を使用します。

blockquote”要素はセクショニング・ルートなので文書全体の階層構造とは別に独自の階層構造を要素内に持ちます。

サンプルコード

<p>紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われ、<cite>『紫式部日記』</cite>で紫式部は以下のように記しています。</p>
<blockquote>
<p>
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
</blockquote>
<p>このように紫式部は清少納言を批判しているのですが、しかし当時2人は面識はなかったのではないかという見方が有力です。</p>

紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われ、『紫式部日記』で紫式部は以下のように記しています。

清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。

このように紫式部は清少納言を批判しているのですが、しかし当時2人は面識はなかったのではないかという見方が有力です。

一般的なブラウザでは“blockquote”要素の内容は字下げ(インデント)を伴って表示されます。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
cite="" 引用元の文書 URL 引用元の文書のURL

引用元を示す

blockquote”要素はcite”属性を指定して引用元の文書のURLを示すことができますが、cite”属性で指定されたURLはブラウザには表示されません。なのでユーザーにもわかるように引用元を示すためにはそれとは別にテキストなどで引用元について記述する必要があります。

引用元を示すためにはcite”要素を使用することができます。

<p>紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われ、<cite>『紫式部日記』</cite>で紫式部は以下のように記しています。</p>
<blockquote>
<p>
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
</blockquote>
<p>このように紫式部は清少納言を批判しているのですが、しかし当時2人は面識はなかったのではないかという見方が有力です。</p>

紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われ、『紫式部日記』で紫式部は以下のように記しています。

清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。

このように紫式部は清少納言を批判しているのですが、しかし当時2人は面識はなかったのではないかという見方が有力です。

blockquote”要素の中に引用部分とともに引用元を記述することもできますが、その場合はcite”要素もしくはfooter”要素の中に記述されなければいけません。

<p>紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われ、実際紫式部は以下のように記しています。</p>
<blockquote>
<p>
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
<footer>
紫式部著<cite>『紫式部日記』</cite>
</footer>
</blockquote>

紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われ、実際紫式部は以下のように記しています。

清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。

紫式部著『紫式部日記』

以下はfigure”要素figcaption”要素を使用した例です。

<p>紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われています。</p>
<figure>
<blockquote>
<p>
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
</blockquote>
<figcaption>
紫式部著<cite>『紫式部日記』</cite>より抜粋
</figcaption>
</figure>

紫式部は同時代に生きて宮廷につかえた清少納言とライバル関係にあったと言われています。

清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。

紫式部著『紫式部日記』より抜粋

仕様書

blockquote”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<blockquote>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLQuoteElement : HTMLElement {
[HTMLConstructor] constructor();

[CEReactions] attribute USVString cite;
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

blockquote {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
unicode-bidi: isolate;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
blockquote {
unicode-bidi: bidi-override;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク