HTML & CSS

blockquote要素

  1. 最終更新日:
  2. 公開日:

段落単位での引用を表します。テキスト中の語句単位で引用を表すq要素や、作品名を表すcite要素などがありますが、この要素はテキスト丸ごとを引用として扱いたい場合に使用します。

HTML サンプルコード

<blockquote cite="url:isbn:416390364X">
  <p>アメリカ各地、荒涼たるアイスランド、かつて住んだギリシャの島々を再訪、長編小説の舞台フィンランド、信心深い国ラオス、どこまでも美しいトスカナ地方、そしてなぜか熊本。旅というものの稀有な魅力を書き尽くす。写真多数を収録。</p>
</blockquote>
  • カテゴリー

    フローコンテンツ、セクショニングルート、パルパブルコンテンツ

  • コンテンツモデル

    フローコンテンツ

  • 使用ケース

    フローコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

cite

引用元がWebページであれば、こちらの属性でURLを指定することができます。書籍の場合はISBNコードを「url:isbn:ISBNコード」で指定することができます。

使用例

ブログの記事ページを想定したサンプルコード

次のHTMLコードは、記事ページの中で他ページの引用をマークアップしている例です。

HTML コード例

<article>
  <header>
    <h1>Kindleはとても便利</h1>
    <p><b class="lead">amazonが出しているKindle。電子書籍リーダーと聞いて、「Kindle(キンドル)」を想像される方も多いのではないでしょうか。<br>今回はそのKindleの基本的な使い方を紹介していきます。</b></p>
  </header>
  <section>
    <h2>電子書籍の買い方</h2>
    <p>Kindleを購入したら、まずは電子書籍を手に入れる必要があります。</p>
    <p>...本文...</p>
    <p>下記のページにおいても、次のように紹介されています。<br>一部抜粋</p>
    <blockquote cite="url:https://gray-code.com/blog/book/%E9%9B%BB%E5%AD%90%E6%9B%B8%E7%B1%8D%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%80%8Ckindle%E3%80%8D%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC/">
      <p>入門用として手にしたkindleですが、上記の通り使い勝手が良く大変重宝しています。<br>最初の電子書籍リーダーとして「kindle」は間違いないと思います。</p>
    </blockquote>
  </section>
</article>

記事一覧