HTML & CSS - blockquote タグ
基本的な使い方
blockquote タグは、他ページからの引用・転載したテキストであることを表します。引用元のアドレスが存在する場合は cite 属性で URL を指定できます。
<p>福沢諭吉の「学問のすゝめ」の冒頭は、以下のように始まります。</p>
<blockquote cite="https://www.aozora.gr.jp/cards/000296/files/47061_29420.html">
<p>天は人の上に人を造らず人の下に人を造らず</p>
</blockquote>blockquote タグの基本的な書き方
福沢諭吉の「学問のすゝめ」の冒頭は、以下のように始まります。
天は人の上に人を造らず人の下に人を造らず
ブラウザ表示
blockquote タグを使うと、通常は字下げされてブラウザに表示されます。
より厳密な書き方
より厳密な書き方をするには figure タグ、figcaption タグ、cite タグを組み合わせて記述します。
figureタグ- その部分だけで意味が成り立つ独立したコンテンツを表します。
figcaptionタグfigureタグのキャプション（注釈）を付けるために使用します。citeタグ- 引用された作品名やタイトルを表します。
<figure>
<blockquote cite="https://www.aozora.gr.jp/cards/000296/files/47061_29420.html">
<p>天は人の上に人を造らず人の下に人を造らず</p>
</blockquote>
<figcaption>
引用元: <cite>学問のすゝめ</cite>
<figcaption>
</figure>blockquote タグの厳密な書き方
上記の書き方は、全体を figure タグで囲み独立したセクションにしています。その中に、引用文を表す blockquote タグと、脚注を表す figcaption タグ、そして作品名を表す cite タグで構成しています。
使用上の注意
blockquote タグを使うと、通常は字下げされてブラウザに表示されます。ただし、装飾を目的に blockquote タグは使用しないでください。装飾のために字下げを行う場合、 CSS の margin-left プロパティなどを使用してください。
.blockquote {
margin-left: 2rem;
}CSS で字下げを行う例
引用・転載と著作権
blockquote タグで引用する場合、著作権で認められる範囲内で引用を行ってください。詳細は、公益社団法人著作権情報センターのページを参照してください。
外部リンク
- 著作物が自由に使える場合は？ - 公益社団法人著作権情報センターhttps://www.cric.or.jp/qa/hajime/hajime7.html
コピーコンテンツ
著作権の範囲を超えてページの大部分がコピーコンテンツである場合、Google はユーザに付加価値をほとんど提供しない低品質なページであると判断します。もしも、そのような判断がされた場合は、手動による対策を受けて検索結果のランキング順位が大幅に低下します。手動による対策を受けているかどうかは、Google Search Console から確認できます。
外部リンク
- Google Search Consolehttps://search.google.com/search-console?utm_source=about-page
- 手動による対策レポート - Search Console ヘルプhttps://support.google.com/webmasters/answer/9044175?hl=ja
外部リンク
外部リンク
- HTML Standard - 4.4.4 The blockquote elementhttps://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element