<blockquote>タグの解説
<blockquote>は、文章の中で引用文として扱いたい箇所を表します。書籍やニュース記事など第三者の書いた文章から抜粋したい時など、比較的引用部分が長文の場合に使用します。
段落をまたがない一行程度の短文に対しては、<q>の方を使用して下さい。
この要素は特定の段落を「この部分は引用である」と明示したい場合に使用して下さい。既定値では、このタグで囲った部分は自動的に改行され、一文字分インデントされた状態で表示されます。
<blockquote>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<blockquote>要素に指定できる属性
cite- 引用文の出典を提示します。URLや書籍情報、補足事項などを埋め込むことができます。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<blockquote>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。ページの中で、独自のコンテンツとは切り離して引用であることを明示したい箇所に適用します。
<blockquote>
他の文献やサイトから引用した内容。
</blockquote>
cite属性を使って引用元の文章の出典を明記することができます。ここに入る情報は、ウェブサイトのURLや書籍のISBN、関連する説明文などです。
<blockquote cite="value">
他の文献やサイトから引用した内容。
</blockquote>
cite属性に関する情報を画面上に明示する場合は、<cite>要素を追加します。以下の例は、引用した記事のURLをcite属性で示し、媒体名を<cite>を使って表しています。
<blockquote cite="https://example.com/">
ニュースサイトの記事から引用した文章。
――記者の名前 <cite>Example News</cite>
</blockquote>
<blockquote>は、文章の中で相対的に引用箇所を示したい場合に使用します。自分が書いている記事の中で、書籍やウェブページに記載されている内容を引用する祭に、<blockquote>で囲ってその意図を伝えることができます。
<article>
<h1>記事の見出し</h1>
<p>記事の内容です。自分で書いた文章が配置されます。</p>
<blockquote>
引用文です。他者の文献から参照しました。<br>
引用文です。他者の文献から参照しました。<br>
</blockquote>
<p>記事の内容です。自分で書いた文章が配置されます。</p>
</article>
何も装飾を加えない状態だと、視覚的な効果が少ないために読者が意図を読み取れません。そこで、スタイルシートの擬似要素を使って、引用符で囲ったような見た目に変えてみましょう。
blockquote {
position: relative;
inline-size: fit-content;
margin-block-start: 1rem;
margin-inline: 0;
padding-block: 1rem;
border-radius: 5px;
background-color: #eee;
font-style: oblique;
}
blockquote::before,
blockquote::after {
position: absolute;
color: #aaa;
font-size: 5em;
}
blockquote::before {
content: "“";
top: -0.3em;
left: -0.15em;
}
blockquote::after {
content: "”";
bottom: -0.85em;
right: 0.15em;
}