HTMLのblockquoteタグの使い方！引用文をマークアップ

html

HTMLのblockquoteタグについて書いています。

blockquoteタグは、他の情報源から引用された長い引用文（ブロックレベルの引用）を示すために使用されます。
単にテキストをインデントするためではなく、引用元が明確で、引用文が本文の重要な一部である場合に、その意味合いをブラウザや検索エンジン、スクリーンリーダーに伝えるためのセマンティックな要素です。

blockquoteタグの基本的な使い方と表示

blockquoteタグは、引用したいテキストを囲むだけで使用できます。
ブラウザは通常、blockquoteで囲まれたテキストを左右にインデントして表示します。

<p>スティーブ・ジョブズはかつてこう言いました:</p>
<blockquote>
  <p>Stay hungry, stay foolish.</p>
</blockquote>
<p>この言葉は、多くの人に影響を与えました。</p>

上記のHTMLは、ブラウザで以下のように表示されます。(Chromeのデフォルト表示)
HTMLのblockquoteタグの表示確認(chromeデフォルト)

blockquoteタグのセマンティックな意味合い

blockquoteタグは、囲まれたコンテンツが外部のソースからの引用であり、そのドキュメント内でブロックレベルの独立した引用文であることを示す意味合い（セマンティクス）を持っています。
これは、単にテキストをインデントする目的ではなく、情報が引用であることを明確にし、検索エンジンやスクリーンリーダーなどの支援技術が引用コンテンツを正しく認識できるようにするために重要です。

cite属性で引用元を示す

blockquoteタグには、引用元のURLを記述するためのcite属性があります。
この属性の値はブラウザには表示されませんが、機械が読み取れる形で引用元を示すことができます。

引用元がWebページの場合など、人間が読むための引用元情報（著者名、書籍名、URLのテキストなど）は、<figcaption>要素や<footer>要素、または単に<p>タグなどを<blockquote>の内側や直後に記述するのが一般的です。
その際に<cite>タグを使用して引用元のタイトルや作者をマークアップすることもできます。

<blockquote cite="https://codelikes.com/about-laravel/">
  <p>LaravelはPHPのWebフレームワークのひとつで、Webアプリケーションを簡単かつ効率的に開発できる環境を提供します。</p>
  <p><a href="">Laravelについての概要とよく使う機能について</a>より</p>
</blockquote>

<blockquote>
  <p>The only way to do great work is to love what you do.</p>
  <footer>— <cite>Steve Jobs</cite></footer>
</blockquote>

ブラウザで確認すると、下記のように表示されました。
HTMLのblockquoteのcite属性について

blockquoteタグにスタイルを適用する

blockquoteタグのデフォルトのスタイル（インデント）は、CSSで上書きしたり、さらに他のスタイルを追加したりすることができます。
引用文を視覚的に強調するために、背景色やボーダーなどを追加することがよくあります。

blockquote {
  margin: 2em 0; /* 上下の余白 */
  padding: 1.5em 2em; /* 内側の余白 */
  background-color: #f9f9f9; /* 背景色 */
  border-left: 5px solid #ccc; /* 左側のボーダー */
  font-style: italic; /* 斜体 */
  color: #555; /* 文字色 */
}

blockquote p {
  margin: 0; /* 段落のデフォルトマージンをリセット */
}

blockquote footer {
  text-align: right; /* 引用元を右寄せ */
  font-size: 0.9em;
  margin-top: 1em;
}

blockquote footer cite {
  font-style: normal; /* citeの斜体を解除 */
  font-weight: bold;
}

<blockquote>
  <p>知識とは、問いを立てる能力を増大させるものである。</p>
  <footer>— <cite>アルベルト・アインシュタイン</cite></footer>
</blockquote>

上記のCSSを適用することで、引用文が視覚的に明確に区別され、より読みやすくなります。
ブラウザで確認すると、下記のように表示されました。
HTMLのblockquoteタグにスタイルを適用する

blockquoteタグを使用する際の注意点

  • 装飾目的でインデントしない: blockquoteタグは、単にテキストをインデントするためだけの装飾目的で使用するべきではありません。その場合は、CSSのmarginやpaddingを使用するべきです。
  • ブロックレベルの引用に限定: 長い引用文（複数行にわたる場合や、段落を含む場合）に対して使用します。単語や短いフレーズのインライン引用には、通常<blockquote>ではなく<q>タグを使用します。
  • 引用元を明確にする: 可能な限り、引用元を示すcite属性や、ユーザーが読み取れる形で引用元を示す要素（<cite>、<footer> など）を併用しましょう。
  • ネストされた引用: blockquoteタグの中にさらにblockquoteタグをネストすることも可能ですが、多重引用は可読性を損ねる可能性があるため、注意が必要です。

blockquoteタグの記述例

以下に、様々な状況におけるblockquoteタグの記述例を示します。

<p>有名な映画監督の言葉を引用します。</p>
<blockquote>
  <p>映画を作ることは、人々が自分自身を理解する手助けをするためのものです。</p>
  <footer>
    <cite>宮崎 駿</cite>
  </footer>
</blockquote>

<p>経済学の古典からの一節です。</p>
<blockquote>
  <p>見えざる手によって、彼は社会の利益を促進するように導かれる。それは彼自身の意図の一部ではなかったのだ。</p>
  <p>アダム・スミス, 国富論より</p>
</blockquote>

<p>とあるブログ記事からの引用です。</p>
<blockquote>
  <p>Webデザインにおいて、ユーザビリティは最も重要な要素の一つです。どんなに美しいデザインでも、使いにくければ意味がありません。</p>
  <footer>
    出典: <cite><a href="https://example.com/blog/usability">Webデザインの基本</a></cite>
  </footer>
</blockquote>

ブラウザで確認すると、下記のように表示されました。
HTMLのblockquoteタグの記述例

まとめ

blockquoteタグは、外部ソースからの長い引用文を意味的にマークアップするための重要なHTML要素です。
単なる見た目のインデントではなく、引用であることを明確に伝えるセマンティクスを持ちます。

cite属性や<footer>、<cite>タグを組み合わせて引用元を明示し、CSSで視覚的な区別を行うことで、Webページの品質とアクセシビリティを向上させることができます。
引用文を正しく表現するために、積極的にblockquoteタグを活用しましょう。

HTML
yasuaki

コメント