引用

文章に外部ソースからのコンテンツやブロックを引用する場合は Blockquote コンポーネントを利用します。

Overview

文章に外部ソースからのコンテンツやブロックを引用する場合は Blockquote コンポーネントを利用します。

A well-known quote, contained in a blockquote element.

vue
<template>
 <BBlockquote>
  <b-p>A well-known quote, contained in a blockquote element.</b-p>
 </BBlockquote>
</template>

Naming a source

HTML仕様では、ブロック引用符の帰属を Blockquote コンポーネントの外側に配置する必要があります。

アトリビューションを提供するときは、 Blockquote コンポーネントを Figure コンポーネントでラップし Figcaption コンポーネント で footer 属性 またはブロックレベル要素（例：<P>）を使用します。

ソース作品の名前も必ず <cite> タグで囲んでください。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
vue
<template>
 <BBlockquoteFigure>
  <BBlockquote>
   <b-p>A well-known quote, contained in a blockquote element.</b-p>
  </BBlockquote>
  <BBlockquoteFooter>
   Someone famous in
   <cite title="Source Title">Source Title</cite>
  </BBlockquoteFooter>
 </BBlockquoteFigure>
</template>

Alignment

引用の配置を変更するには, text-alignment 属性を使用します。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
vue
<template>
 <BBlockquoteFigure text-alignment="center">
  <BBlockquote>
   <b-p>A well-known quote, contained in a blockquote element.</b-p>
  </BBlockquote>
  <BBlockquoteFooter>
   Someone famous in
   <cite title="Source Title">Source Title</cite>
  </BBlockquoteFooter>
 </BBlockquoteFigure>
</template>

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
vue
<template>
 <BBlockquoteFigure text-alignment="end">
  <BBlockquote>
   <b-p>A well-known quote, contained in a blockquote element.</b-p>
  </BBlockquote>
  <BBlockquoteFooter>
   Someone famous in
   <cite title="Source Title">Source Title</cite>
  </BBlockquoteFooter>
 </BBlockquoteFigure>
</template>

See Also