Home » ★HTML Living Standard リファレンス

★HTML Living Standard リファレンス

<blockquote> …… 引用コンテンツであることを表す
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



<blockquote>タグは、引用コンテンツのセクションであることを表す際に使用します。

blockquote要素は、別の情報源から引用されたコンテンツであることを表します。
引用の出典に関する情報がある場合には、blockquote要素の内側ではなく外側に配置します。

引用元へのリンクがある場合には、cite属性の値に有効なURLを指定します。
blockquote要素のcite属性で指定するURLは、読者向けではありません。
例えば、引用に関する統計データをサーバー側スクリプトによって収集するなどの目的に利用されることが想定されています。

■使用例

以下のサンプルでは、blockquote要素で指定した引用ブロックの後に、引用の出典に関する情報が示されています。

HTMLソース

<blockquote>
 <p>
 私だけかね…? まだ勝てると思ってるのは…<br>
 あきらめたらそこで試合終了ですよ…?
 </p>
</blockquote>
<p>安西先生@山王戦</p>

↓↓↓

ブラウザ上の表示

私だけかね…? まだ勝てると思ってるのは…
あきらめたらそこで試合終了ですよ…?

安西先生@山王戦

■属性

cite属性
引用元へのリンク、または、編集に関する詳細情報を指定します。
引用元へのリンクアドレスがある場合、そのURLを指定します。

blockquote要素のcite属性とcite要素

blockquote要素のcite属性は、引用元へのリンクを指定する際に使用します。
cite要素は作品のタイトルを表す際に使用します。
blockquote要素のcite属性とcite要素は名前が似ていますが、意味や使い方が異なりますので混同しないようにしてください。

■使用例

以下のサンプルは、blockquote要素のcite属性とcite要素を併用した使用例です。

HTMLソース

<p>彼の次作は <cite>Sonnet 130(小曲130番)</cite> でした:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130 ">
  <p>
  彼女の目は太陽なんかじゃなく、<br>
  唇の色はサンゴみたいな赤じゃない、<br>
  ...
  </p>
</blockquote>

↓↓↓

ブラウザ上の表示

彼の次作は Sonnet 130(小曲130番) でした:

彼女の目は太陽なんかじゃなく、
唇の色はサンゴみたいな赤じゃない、

■使用例

以下のサンプルでは、
blockquote要素をfigure要素とそのfigcaption要素と組み合わせることで、
引用コンテンツとその出典情報を明確に関連付けています。
出典情報の部分は引用の一部ではないため、blockquote要素の外側に配置されています。

HTMLソース

<figure>
 <blockquote>
  <p>
  真実は不可解かもしれません。
  取り組むには手間がかかるかもしれません。
  直感に反するかもしれません。
  根深い偏見にさらされるかもしれません。
  切実に望んだことと一致しないかもしれません。
  しかし、真実とは私たちの好みによって決定されるものではありません。
  私たちには“やり方”があります。
  絶対的な真実への到達というよりは、だんだん真実に近づいていく方法です。
  周到に設計された実験が鍵です。
  </p>
 </blockquote>
 <figcaption>
 カール・セーガン 「<cite>不思議と懐疑主義</cite>」<br>
 <cite>懐疑的な探究者</cite> 第19巻、第1号(1995年1-2月)より
 </figcaption>
</figure>

↓↓↓

ブラウザ上の表示

真実は不可解かもしれません。
取り組むには手間がかかるかもしれません。
直感に反するかもしれません。
根深い偏見にさらされるかもしれません。
切実に望んだことと一致しないかもしれません。
しかし、真実とは私たちの好みによって決定されるものではありません。
私たちには“やり方”があります。
絶対的な真実への到達というよりは、だんだん真実に近づいていく方法です。
周到に設計された実験が鍵です。

カール・セーガン 「不思議と懐疑主義
懐疑的な探究者 第19巻、第1号(1995年1-2月)より

■使用例

以下のサンプルは、フォーラムにおけるユーザーの返信投稿を想定しています。
どの発言を引用しているのかを明確にするために、blockquote要素を使用しています。
入れ子が視覚的に分かりやすくなるように、article要素に赤色のアウトラインや余白のスタイルを指定しています。

HTMLソース

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">お題:ベーコン</a></h1>

 <article>

  <header><strong>ひでかず</strong> 3日前</header>
  <p>イルカはベーコン好きだ。間違いない。</p>
  <footer><a href="?pid=29578">固定リンク</a></footer>

  <article>
   <header><strong>たなか</strong> 2日前</header>
   <blockquote><p>イルカはベーコン好きだ。間違いない。</p></blockquote>
   <p>んなもん食わねーだろ!</p>
   <footer><a href="?pid=29579">固定リンク</a></footer>
   <article>
    <header><strong>ひでかず</strong> 5時間前</header>
    <blockquote>
     <blockquote><p>イルカはベーコン好きだ。間違いない。</p></blockquote>
     <p>んなもん食わねーだろ!</p>
    </blockquote>
    <p>んなもんイルカ! でお願いします。</p>
    <footer><a href="?pid=29580">固定リンク</a></footer>
   </article>
  </article>

  <article>
   <header><strong>おおた</strong> 23分前</header>
   <blockquote><p>イルカはベーコン好きだ。間違いない。</p></blockquote>
   <p>塩分には気を付けろ。</p>
   <footer><a href="?pid=29582">固定リンク</a></footer>
   <article>
    <header><strong>たなか</strong> 22分前</header>
    <blockquote><p>塩分には気を付けろ。</p></blockquote>
    <p>いつも塩水まみれだろ!</p>
    <footer><a href="?pid=29579">固定リンク</a></footer>
   </article>
  </article>

 </article>

</article>

CSSソース

article {outline:solid 1px #f00; margin:4px; padding:4px;}

↓↓↓

ブラウザ上の表示

お題:ベーコン

ひでかず 3日前

イルカはベーコン好きだ。間違いない。

たなか 2日前

イルカはベーコン好きだ。間違いない。

んなもん食わねーだろ!

ひでかず 5時間前

イルカはベーコン好きだ。間違いない。

んなもん食わねーだろ!

んなもんイルカ! でお願いします。

おおた 23分前

イルカはベーコン好きだ。間違いない。

塩分には気を付けろ。

たなか 22分前

塩分には気を付けろ。

いつも塩水まみれだろ!

■使用例

以下のサンプルは、blockquote要素内では必ずしもp要素を使用する必要がないことを示しています。

HTMLソース

<p>彼の説明は次のように始まった:</p>
<blockquote>
こちらの主張が認められると想定すべきではありません。
楽観的な見通しは排除しなくてはなりません。
</blockquote>
<p>話をしばらく続けたあとで、彼は次のように締めくくった:</p>
<blockquote>
つまり、交渉決裂に備える必要があり、その可能性に怯えてはなりません。
</blockquote>
<p>この件について、これから私たちで議論していきましょう...

↓↓↓

ブラウザ上の表示

彼の説明は次のように始まった:

こちらの主張が認められると想定すべきではありません。
楽観的な見通しは排除しなくてはなりません。

話をしばらく続けたあとで、彼は次のように締めくくった:

つまり、交渉決裂に備える必要があり、その可能性に怯えてはなりません。

この件について、これから私たちで議論していきましょう…

誰かの話した言葉の引用する ≠ 会話を表す

blockquote要素は、誰かの話した言葉を引用する場合にも使用できます。
ただし、会話を表すことを目的に、blockquote要素やcite要素を使用するのは適切ではありません。

■関連項目

  • <blockquote> …… 引用コンテンツであることを表す
  • <q> …… 別の情報源から引用されたコンテンツを表す
  • <cite> …… 作品のタイトルを表す
広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.